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