diff --git a/index.html b/index.html
index ea266fe..676062e 100644
--- a/index.html
+++ b/index.html
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
+ <script async src="/static/theme.js"></script>
<link rel="stylesheet" href="/static/styles.css">
</head>
<body>
+ <button data-set-theme="light">Light Mode</button>
+ <button data-set-theme="dark" >Dark Mode</button>
<main class="uutis-lista">
<a href="#">
<article class="uutis-kortti">
diff --git a/static/styles.css b/static/styles.css
index 3f8d056..3473deb 100644
--- a/static/styles.css
+++ b/static/styles.css
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;
}
.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
+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