modified: index.html

modified:   style.css
	new file:   theme.js
main
anthony 3 weeks ago
parent 5a728445b5
commit 45e143f784

@ -2,7 +2,8 @@
<html>
<head>
<title>CiF Political DB</title>
<link href="style.css" rel="stylesheet"
<link href="style.css" rel="stylesheet">
<script src="theme.js"></script>
</head>
<body>

@ -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);
}
}
}
@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;
}
}

@ -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);
Loading…
Cancel
Save