更改CSS中的背景颜色（网站上的明暗主题）
[英]Change background color in CSS (Light and Dark theme on site)
问题描述
I have a question, I'm using a free template of HTML5 UP Editorial and want to make a button which will switch a theme from light to dark. 
我有一个问题，我正在使用免费的HTML5 UP编辑模板，并希望创建一个按钮，将主题从浅色切换为深色。 I did it to one page, to main page, its switches to dark, but if I go to another page (in my example from HOMEPAGE to ELEMENTS) its resets to default light theme. 我将其转到一页，转到主页，它切换为暗色，但是如果转到另一页（在我的示例中，从首页到ELEMENTS），则将其重置为默认的浅色主题。 Is it possible to make it dark on all pages if someone clicked a dark theme on main page? 如果有人单击主页上的深色主题，是否可以在所有页面上将其设为深色？ and again if someone click light it swtiches to light theme on all pages. 再次，如果有人单击指示灯，它会闪烁以点亮所有页面上的主题。 Its 100% HTML so I dont know if I should use java, or other option. 它的100％HTML，所以我不知道是否应该使用Java或其他选项。
Heres my workspace: http://foodtek.eu/pub/index.html (on the top-right corner - is icons to switch theme) 这是我的工作空间： http : //foodtek.eu/pub/index.html （在右上角-是用于切换主题的图标）
I wish to make it works like here: https://docs.microsoft.com/en-us/windows-hardware/drivers/debugger/-lmi 我希望使它像这里一样工作： https : //docs.microsoft.com/zh-cn/windows-hardware/drivers/debugger/-lmi
function swapStyleSheet(sheet){ document.getElementById('pagestyle').setAttribute('href', sheet); }
<li><a href="#" class="icon fa-sun-o" onclick="swapStyleSheet('assets/css/main_light.css')"><span class="label">Light Style Sheet</span></a></li> <li><a href="#" class="icon fa-moon-o" onclick="swapStyleSheet('assets/css/main_dark.css')"><span class="label">Dark Style Sheet</span></a></li>
2 个解决方案
解决方案1
0 2018-11-26 01:38:31
function setTheme(isDark) {
if (isDark) {
localStorage$1.setItem("theme", nightClassName);
html.add(nightClassName);
} else {
html.remove(nightClassName);
localStorage$1.removeItem("theme");
}
}
解决方案2
0 2018-11-26 01:54:41
How do I have the theme apply to all pages? 如何使主题适用于所有页面？
You can use JavaScript cookies to store information on the user's computer which can be read between pages and thus share your preference for a dark theme. 您可以使用JavaScript cookie将信息存储在用户计算机上，这些信息可以在页面之间读取，从而共享您对深色主题的偏好。
You can learn more about changing stylesheets with JavaScript here . 您可以在此处了解有关使用JavaScript更改样式表的更多信息。
You can learn more about reading cookies here . 您可以在此处了解有关阅读Cookie的更多信息。
(function() { if (document.cookie.indexOf('theme=') != -1) { switchTheme(getCookie("theme")); } else { switchTheme('light'); } })(); function swapStyleSheet(theme) { document.getElementById("css").setAttribute("href", theme); } function switchTheme(theme) { document.cookie = "theme=" + theme; swapStyleSheet("assets/css/main_" + theme + ".css"); }
<!doctype html> <html> <head> <title>Theme Toggle Example</title> <link id="css" rel="stylesheet" href="assets/css/main_light.css" /> </head> <body> <h2>Theme Toggle Example</h2> <a href="javascript:void(0);" onclick="switchTheme('light');">Light Theme</a> | <a href="javascript:void(0);" onclick="switchTheme('dark');"> Dark Theme</a> </body> </html>
What does this look like? 看起来像什么？
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.