- Viết code javascript để thay đổi theme: Ví dụ bạn có 2 theme, đoạn code dưới đưa một link thay đổi theme bằng javascript vào trang.
Trong một file javascript bất kỳ hoặc ngay trong trang html, bạn viết thêm đoạn code thay đổi theme:
<script>
function changeTheme(tentheme) {
document.getElementById(‘sitetheme’).src= tentheme + ”/mytheme.css”;
// Thay đổi Path của theme hiện tại thành một path mới
}
</script>
Như vậy, mỗi khi click vào các link Theme_1, Theme_2; đường dẫn của mytheme.css được thay đổi và do đó tất cả các định dạng của website bao gồm cả hình ảnh cũng thay đổi theo.
Tuy vậy, việc thay đổi theme chỉ diễn ra trong khi click lên nút Theme_1 hay Theme_2 và không lưu được trạng thái của theme khi trang được tải lại hoặc chuyển qua trang mới. Chúng ta có thể sử dụng cookie để lưu trạng thái (theme đã chọn) khi chuyển qua các trang tiếp theo, như vậy cứ mỗi lần chuyển trang sẽ phải gọi function setTheme() (<body onload=”setTheme()”>) :
<script>
function setTheme() {
if(document.cookie(“theme”)) { // Nếu tồn tại cookie tên là theme
document.getElementById(‘sitetheme’).src= document.cookie(“theme”) + ”/mytheme.css”;
}
}
</script>
Và để lưu trạng thái của theme đã chọn, sau khi thay đổi đường dẫn cho file css, cần lưu lại theme đã chọn:
<script>
function changeTheme(tentheme) {
document.getElementById(‘sitetheme’).src= tentheme + ”/mytheme.css”;
document.cookie = "theme=" + tentheme;
var date = new Date();
date.setMonth(date.getMonth()+1);
document.cookie += ("; expires=" + date.toUTCString());
}
</script>
Với việc viết website bằng HTML đơn thuần, sử dụng cách này để đưa chức năng thay đổi theme vào website không mấy tiện dụng, nhưng nếu thiết kế website với các ngôn ngữ như ASP, PHP,... thì với biến theme đã lưu trong cookie, Path_to_css lúc import css vào trang được thực hiện ngay trên server và mỗi khách viếng thăm có thể chọn lưu cho mình một theme ưa thích.
