Decentrala/website
24
1
Fork 12
Code Issues 1 Pull Requests 1 Packages Projects Releases Wiki Activity

[Theme] dark/light theme fix

Browse Source
This commit is contained in:
coja
2026-05-02 02:37:39 +02:00
parent e3330ad1bd
commit b6cfef830a
5 changed files with 42 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
site/deconference.html
View File

@@ -1,6 +1,16 @@
<!doctype html>
<html lang="sr">
<head>
<script>
(function () {
const theme = localStorage.getItem("theme");
const prefersDark = window.matchMedia(
"(prefers-color-scheme: dark)",
).matches;
if (theme === "dark" || (!theme && prefersDark))
document.documentElement.classList.add("dark");
})();
</script>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -36,7 +46,7 @@
<title>Dekonferencija Decentrala</title>
<link rel="alternate" hreflang="en" href="/en/deconference" />
</head>
<body class="theme light">
<body>
<header>
<a id="logo" href="/">
<img src="/img/logo-light.svg" alt="Logo" />

15
site/scripts/main.js
View File

@@ -9,22 +9,23 @@ const imgs = document.getElementsByTagName("img");
const main = document.getElementsByTagName("main")[0];
const isMenuOpen = () => hamburger.classList.contains("open");
const theme = window.localStorage.getItem("theme");
const body = document.getElementsByClassName("theme")[0];
/* Functions */
const changeToDarkTheme = () => {
body.classList = "theme dark"
window.localStorage.setItem("theme", "dark");
document.documentElement.classList.add("dark");
themeBtn?.setAttribute("title", "turn the light on");
Array.from(imgs).forEach((img) => img.src = img.src.replace("-light", "-dark"));
Array.from(imgs).forEach((img) => {
if (img.src.includes("-light")) img.src = img.src.replace("-light", "-dark");
});
}
const changeToLightTheme = () => {
body.classList = "theme light"
window.localStorage.setItem("theme", "light");
document.documentElement.classList.remove("dark");
themeBtn?.setAttribute("title", "turn the light off");
Array.from(imgs).forEach((img) => img.src = img.src.replace("-dark", "-light"));
Array.from(imgs).forEach((img) => {
if (img.src.includes("-dark")) img.src = img.src.replace("-dark", "-light");
});
}
const closeMenu = () => {

2
site/styles/style.css
View File

@@ -11,7 +11,7 @@
--bg: var(--light-bg);
}
body.dark {
html.dark {
--border: var(--dark-border);
--text: var(--dark-text);
--bg: var(--dark-bg);

12
template/page-en.html
View File

@@ -1,6 +1,16 @@
<!doctype html>
<html lang="en">
<head>
<script>
(function () {
const theme = localStorage.getItem("theme");
const prefersDark = window.matchMedia(
"(prefers-color-scheme: dark)",
).matches;
if (theme === "dark" || (!theme && prefersDark))
document.documentElement.classList.add("dark");
})();
</script>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -36,7 +46,7 @@
<title><!--TITLE--> Decentrala</title>
<link rel="alternate" hreflang="sr" href="/PAGE_NAME" />
</head>
<body class="theme light">
<body>
<header>
<a id="logo" href="/en/index">
<img src="/img/logo-light.svg" alt="Logo" /> Decentrala

12
template/page-sr.html
View File

@@ -1,6 +1,16 @@
<!doctype html>
<html lang="sr">
<head>
<script>
(function () {
const theme = localStorage.getItem("theme");
const prefersDark = window.matchMedia(
"(prefers-color-scheme: dark)",
).matches;
if (theme === "dark" || (!theme && prefersDark))
document.documentElement.classList.add("dark");
})();
</script>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -36,7 +46,7 @@
<title><!--TITLE--> Decentrala</title>
<link rel="alternate" hreflang="en" href="/en/PAGE_NAME" />
</head>
<body class="theme light">
<body>
<header>
<a id="logo" href="/">
<img src="/img/logo-light.svg" alt="Logo" />