- Đưa định dạng css vào trong trang:
<link rel=”stylesheet” id=”sitetheme” type=”text/css” href=”Path_To_Css/mytheme.css”>
- 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.
<a href=#theme onclick=”changeTheme(‘Theme_1’); return false”>Theme_1</a>
<a href=#theme onclick=”changeTheme(‘Theme_2’); return false”>Theme_2</a>
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>
trên mạng nó hướng dẫn như zậy, nhưng mình đọc k hiểu. Bạn nào làm có demo thì send mình vs nha thank.
<link rel=”stylesheet” id=”sitetheme” type=”text/css” href=”Path_To_Css/mytheme.css”>
- 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.
<a href=#theme onclick=”changeTheme(‘Theme_1’); return false”>Theme_1</a>
<a href=#theme onclick=”changeTheme(‘Theme_2’); return false”>Theme_2</a>
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>
trên mạng nó hướng dẫn như zậy, nhưng mình đọc k hiểu. Bạn nào làm có demo thì send mình vs nha thank.
