From 45e143f78494e14eb700b92db5317f486f58d04b Mon Sep 17 00:00:00 2001 From: anthony Date: Sun, 1 Dec 2024 15:14:30 +0100 Subject: [PATCH] modified: index.html modified: style.css new file: theme.js --- index.html | 3 ++- style.css | 30 +++++++++++++++++++++--------- theme.js | 19 +++++++++++++++++++ 3 files changed, 42 insertions(+), 10 deletions(-) create mode 100644 theme.js diff --git a/index.html b/index.html index 7bb002e..6b3a470 100644 --- a/index.html +++ b/index.html @@ -2,7 +2,8 @@ CiF Political DB - + diff --git a/style.css b/style.css index 3d1ec9a..cfb4ba6 100644 --- a/style.css +++ b/style.css @@ -8,14 +8,6 @@ --text: #ffa7c7; --highlight: #ff5a99; } - - body { - background: var(--background); - color: var(--text); - position:absolute; - margin-top: 10px; - font-family: Futura; - } .disclaimer { color: red; @@ -32,4 +24,24 @@ opacity: 1; transform: translateY(0); } - } \ No newline at end of file + } + +@media (prefers-color-scheme: light) { + body { + background: #fff3f9; + color: #ffa7c7; + position:absolute; + margin-top: 10px; + font-family: Futura; + } +} + +@media (prefers-color-scheme: dark) { + body { + background: #060606; + color: #00d791; + position:absolute; + margin-top: 10px; + font-family: Futura; + } +} diff --git a/theme.js b/theme.js new file mode 100644 index 0000000..48ac956 --- /dev/null +++ b/theme.js @@ -0,0 +1,19 @@ +function detectTheme() { + if (window.matchMedia('(prefers-color-scheme: dark)').matches) { + // Dark mode + console.log("Dark mode detected"); + // Add your dark mode styles or trigger a CSS class change here + document.body.classList.add('dark-mode'); + } else { + // Light mode + console.log("Light mode detected"); + // Add your light mode styles or trigger a CSS class change here + document.body.classList.add('light-mode'); + } + } + + // Call the function to detect the initial theme + detectTheme(); + + // Listen for changes in the system preference + window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', detectTheme); \ No newline at end of file