From 59f795560c733f5eb12bee6b35e217d97eed784c Mon Sep 17 00:00:00 2001 From: Luka Hietala Date: Fri, 14 Nov 2025 12:33:20 +0200 Subject: [PATCH] tumma ja vaalea teema --- index.html | 3 +++ static/styles.css | 20 +++++++++++++++++--- static/theme.js | 26 ++++++++++++++++++++++++++ 3 files changed, 46 insertions(+), 3 deletions(-) create mode 100644 static/theme.js diff --git a/index.html b/index.html index ea266fe..676062e 100644 --- a/index.html +++ b/index.html @@ -3,9 +3,12 @@ Document + + +
diff --git a/static/styles.css b/static/styles.css index 3f8d056..3473deb 100644 --- a/static/styles.css +++ b/static/styles.css @@ -2,15 +2,29 @@ font-family: sans-serif; } +:root { + --default-text: light-dark(black, white); + --background: light-dark(#f8f8f8, rgb(20, 20, 20)); + --card: light-dark(white, rgb(52, 52, 52)); +} + +[data-theme="light"] { + color-scheme: light; +} + +[data-theme="dark"] { + color-scheme: dark; +} + body { max-width: 500px; padding: 20px; margin: auto; - background-color: #f8f8f8; + background-color: var(--background); } a { - color: black; + color: var(--default-text); text-decoration: none; } @@ -23,7 +37,7 @@ a { .uutis-kortti { display: flex; flex-direction: column; - background-color: white; + background-color: var(--card); transition: 0.2s; } diff --git a/static/theme.js b/static/theme.js new file mode 100644 index 0000000..21a813b --- /dev/null +++ b/static/theme.js @@ -0,0 +1,26 @@ +const lightModeBtn = document.querySelector("[data-set-theme='light']"); +const darkModeBtn = document.querySelector("[data-set-theme='dark']"); +const html = document.documentElement; + +const setTheme = (theme) => { + document.documentElement.removeAttribute('data-theme'); + + if (theme === 'dark') { + html.setAttribute('data-theme', 'dark'); + } + + localStorage.setItem('theme', theme); +}; + +const loadTheme = () => { + const savedTheme = localStorage.getItem('theme'); + + if (savedTheme) { + setTheme(savedTheme); + } +}; + +lightModeBtn.addEventListener('click', () => setTheme('light')); +darkModeBtn.addEventListener('click', () => setTheme('dark')); + +loadTheme(); \ No newline at end of file -- 2.47.3