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> <!doctype html>
<html lang="sr"> <html lang="sr">
<head> <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 charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -36,7 +46,7 @@
<title>Dekonferencija Decentrala</title> <title>Dekonferencija Decentrala</title>
<link rel="alternate" hreflang="en" href="/en/deconference" /> <link rel="alternate" hreflang="en" href="/en/deconference" />
</head> </head>
<body class="theme light"> <body>
<header> <header>
<a id="logo" href="/"> <a id="logo" href="/">
<img src="/img/logo-light.svg" alt="Logo" /> <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 main = document.getElementsByTagName("main")[0];
const isMenuOpen = () => hamburger.classList.contains("open"); const isMenuOpen = () => hamburger.classList.contains("open");
const theme = window.localStorage.getItem("theme"); const theme = window.localStorage.getItem("theme");
const body = document.getElementsByClassName("theme")[0];
/* Functions */ /* Functions */
const changeToDarkTheme = () => { const changeToDarkTheme = () => {
body.classList = "theme dark" document.documentElement.classList.add("dark");
window.localStorage.setItem("theme", "dark");
themeBtn?.setAttribute("title", "turn the light on"); 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 = () => { const changeToLightTheme = () => {
body.classList = "theme light" document.documentElement.classList.remove("dark");
window.localStorage.setItem("theme", "light");
themeBtn?.setAttribute("title", "turn the light off"); 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 = () => { const closeMenu = () => {

2
site/styles/style.css
View File

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

12
template/page-en.html
View File

@@ -1,6 +1,16 @@
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <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 charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -36,7 +46,7 @@
<title><!--TITLE--> Decentrala</title> <title><!--TITLE--> Decentrala</title>
<link rel="alternate" hreflang="sr" href="/PAGE_NAME" /> <link rel="alternate" hreflang="sr" href="/PAGE_NAME" />
</head> </head>
<body class="theme light"> <body>
<header> <header>
<a id="logo" href="/en/index"> <a id="logo" href="/en/index">
<img src="/img/logo-light.svg" alt="Logo" /> Decentrala <img src="/img/logo-light.svg" alt="Logo" /> Decentrala

12
template/page-sr.html
View File

@@ -1,6 +1,16 @@
<!doctype html> <!doctype html>
<html lang="sr"> <html lang="sr">
<head> <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 charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -36,7 +46,7 @@
<title><!--TITLE--> Decentrala</title> <title><!--TITLE--> Decentrala</title>
<link rel="alternate" hreflang="en" href="/en/PAGE_NAME" /> <link rel="alternate" hreflang="en" href="/en/PAGE_NAME" />
</head> </head>
<body class="theme light"> <body>
<header> <header>
<a id="logo" href="/"> <a id="logo" href="/">
<img src="/img/logo-light.svg" alt="Logo" /> <img src="/img/logo-light.svg" alt="Logo" />