kristoferssolo/kristofersxyz
1
0
Fork 0
mirror of https://github.com/kristoferssolo/kristofersxyz.git synced 2025-10-21 18:30:34 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Added color modes properly

Browse Source
This commit is contained in:
Kristofers Solo 2023-01-21 20:07:46 +02:00
parent 205bfdb46c
commit 17476e893e
3 changed files with 66 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
' Normal file
View File

@ -0,0 +1,47 @@
$(document).ready(function () {
let lightmode = localStorage.getItem("lightmode")
const HTML = $("html")
const AUDIO = $("#flashbang")
const enable_light_mode = () => {
HTML.attr("data-color-mode", "light")
localStorage.setItem("lightmode", "enabled")
}
const disable_light_mode = () => {
HTML.attr("data-color-mode", "dark")
localStorage.setItem("lightmode", null)
}
if (lightmode === "enabled") {
enable_light_mode()
}
window
.matchMedia("(prefers-color-scheme: dark)")
.addEventListener("change", (event) => {
if (event.matches) {
disable_light_mode()
} else {
enable_light_mode()
}
})
if (window.matchMedia) {
if (window.matchMedia("(prefers-color-scheme: light)").matches) {
enable_light_mode()
} else {
disable_light_mode()
}
}
$("#color-mode-toggle").click(() => {
lightmode = localStorage.getItem("lightmode")
if (lightmode !== "enabled") {
enable_light_mode()
AUDIO[0].play()
} else {
disable_light_mode()
}
})
})

22
static/main/js/lightmode.js
View File

@ -1,17 +1,15 @@
$(document).ready(function() {
$(document).ready(function () {
let lightmode = localStorage.getItem("lightmode")
const HTML = $("html")
const AUDIO = $("#flashbang")
const enable_light_mode = () => {
HTML.attr("data-color-mode", "light")
$("meta[name='color-scheme']").attr("content", "light")
localStorage.setItem("lightmode", "enabled")
}
const disable_light_mode = () => {
HTML.attr("data-color-mode", "dark")
$("meta[name='color-scheme']").attr("content", "dark")
localStorage.setItem("lightmode", null)
}
@ -19,6 +17,24 @@ $(document).ready(function() {
enable_light_mode()
}
window
.matchMedia("(prefers-color-scheme: dark)")
.addEventListener("change", (event) => {
if (event.matches) {
disable_light_mode()
} else {
enable_light_mode()
}
})
// if (window.matchMedia) {
// if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
// disable_light_mode()
// } else {
// enable_light_mode()
// }
// }
$("#color-mode-toggle").click(() => {
lightmode = localStorage.getItem("lightmode")
if (lightmode !== "enabled") {

1
templates/layout.html
View File

@ -3,7 +3,6 @@
<html lang="en" data-color-mode="dark">
<head>
<meta charset="UTF-8">
<meta name="color-scheme" content="dark">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" href="{% static 'main/img/icons/logo.svg' %}" />
<link rel="preconnect" href="https://fonts.googleapis.com">