ward/ward-truyen-network-site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

bugfix theme/css

Browse Source
This commit is contained in:
Ward Truyen 2024-08-09 16:15:45 +02:00
parent b39c4102ed
commit 65a6bdbb99
3 changed files with 13 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/css/main.css
View File

@ -2,9 +2,6 @@
* Version: 1.0.0 * Version: 1.0.0
*/ */
/* :root { */
/* color-scheme: only light; */
/* } */
html, html,
body { body {
margin: 0px; margin: 0px;
@ -57,7 +54,6 @@ ul.dashed {
html.theme-dark { html.theme-dark {
color-scheme: dark; color-scheme: dark;
background-image: none;
background-image: linear-gradient(-10deg, #1010206F 60%, #5050506F); background-image: linear-gradient(-10deg, #1010206F 60%, #5050506F);
color: white; color: white;
} }

4
src/index.html
View File

@ -7,7 +7,9 @@
</head> </head>
<body> <body>
<header><button title="Dark theme on/off" onclick="toggleTheme();">&#9728;</button></header> <header>
<button title="Dark theme on/off" onclick="toggleTheme();">&#9728;</button>
</header>
<main> <main>
<h1>Ward Truyen home</h1> <h1>Ward Truyen home</h1>

16
src/js/theme.js
View File

@ -2,6 +2,11 @@ function toggleTheme() {
const theme = "theme-dark";//localStorage.getItem('theme'); const theme = "theme-dark";//localStorage.getItem('theme');
const root = document.querySelector(":root"); const root = document.querySelector(":root");
root.classList.toggle(theme); root.classList.toggle(theme);
if (root.classList.contains(theme)) {
localStorage.setItem('theme', theme);
} else {
localStorage.setItem('theme', "theme-light");
}
} }
function setTheme(themeName) { function setTheme(themeName) {
@ -23,12 +28,11 @@ function detectTheme() {
return; return;
} }
// if (window.matchMedia('(prefers-color-scheme: light)').matches) { if (window.matchMedia('(prefers-color-scheme: light)').matches) {
// setTheme('theme-light'); setTheme('theme-light');
// return; return;
// } }
// setTheme('theme-light'); setTheme('theme-light');
} }
detectTheme(); detectTheme();