Skip to content

Commit

Permalink
added dark mode support based on device preference and previous visit…
Browse files Browse the repository at this point in the history 
…s preference (with localstorage)
  • Loading branch information
@arthur-adriansens
arthur-adriansens authored Jan 6, 2024
1 parent d83d3c9 commit a889be2
Show file tree
Hide file tree
Showing 2 changed files with 59 additions and 43 deletions.
100 changes: 57 additions & 43 deletions src/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,116 +21,129 @@
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="style-dark.css" />
<link rel="icon" href="https://cdn.glitch.global/a2328394-6a2f-46f0-9a34-e8b074480846/favicon.ico?v=1699797335084" type="image/x-icon" />
<script>
document.addEventListener('DOMContentLoaded', function() {
// check if the device prefers dark mode
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
document.documentElement.classList.add('dark');
}

// check if dark mode preference is eneabled in localstorage
if (localStorage.getItem('theme') == 'dark') {
document.body.classList.add('dark');
}
}
</script>
</head>

<body>
<div class="main_layout">
<div class="left column">
<div class="logo">
<!-- todo <a href="https://sjh-tetris.glitch.me/"></a> -->
<svg viewBox="0 0 420.2 65.9" xmlns="http://www.w3.org/2000/svg" xmlns:bx="https://boxy-svg.com">
<svg viewbox="0 0 420.2 65.9" xmlns="http://www.w3.org/2000/svg" xmlns:bx="https://boxy-svg.com">
<defs>
<linearGradient
gradientUnits="userSpaceOnUse"
<lineargradient
gradientunits="userSpaceOnUse"
x1="68.332"
y1="227.897"
x2="68.332"
y2="271.597"
id="gradient-0"
spreadMethod="pad"
gradientTransform="matrix(1, 0, 0, 1, -34.832001, -227.896542)"
spreadmethod="pad"
gradienttransform="matrix(1, 0, 0, 1, -34.832001, -227.896542)"
>
<stop offset="0" style="stop-color: var(--colorGradientStart)"></stop>
<stop offset="1" style="stop-color: var(--colorGradientEnd)"></stop>
</linearGradient>
<linearGradient
gradientUnits="userSpaceOnUse"
</lineargradient>
<lineargradient
gradientunits="userSpaceOnUse"
x1="226.072"
y1="227.9"
x2="226.072"
y2="271.2"
id="gradient-2"
gradientTransform="matrix(1, 0, 0, 1, -40.832001, -227.899536)"
gradienttransform="matrix(1, 0, 0, 1, -40.832001, -227.899536)"
>
<stop offset="0" style="stop-color: var(--colorGradientStart)"></stop>
<stop offset="1" style="stop-color: var(--colorGradientEnd)"></stop>
</linearGradient>
<linearGradient
gradientUnits="userSpaceOnUse"
</lineargradient>
<lineargradient
gradientunits="userSpaceOnUse"
x1="303.242"
y1="238.21"
x2="303.242"
y2="281.91"
id="gradient-3"
gradientTransform="matrix(1, 0, 0, 1, -336.445466, 8.305004)"
gradienttransform="matrix(1, 0, 0, 1, -336.445466, 8.305004)"
>
<stop offset="0" style="stop-color: var(--colorGradientStart)"></stop>
<stop offset="1" style="stop-color: var(--colorGradientEnd)"></stop>
</linearGradient>
<linearGradient id="gradient-7" bx:pinned="true">
</lineargradient>
<lineargradient id="gradient-7" bx:pinned="true">
<stop offset="0" style="stop-color: var(--colorGradientStart);"></stop>
<stop offset="1" style="stop-color: var(--colorGradientEnd);"></stop>
</linearGradient>
<linearGradient
gradientUnits="userSpaceOnUse"
</lineargradient>
<lineargradient
gradientunits="userSpaceOnUse"
x1="145.996"
y1="238.443"
x2="145.996"
y2="282.143"
id="gradient-6"
gradientTransform="matrix(1, 0, 0, 1, -47.668785, -214.569473)"
gradienttransform="matrix(1, 0, 0, 1, -47.668785, -214.569473)"
>
<stop offset="0" style="stop-color: var(--colorGradientStart)"></stop>
<stop offset="1" style="stop-color: var(--colorGradientEnd)"></stop>
</linearGradient>
<linearGradient
gradientUnits="userSpaceOnUse"
</lineargradient>
<lineargradient
gradientunits="userSpaceOnUse"
x1="226.072"
y1="227.9"
x2="226.072"
y2="271.2"
id="gradient-1"
gradientTransform="matrix(1, 0, 0, 1, 160.528366, -227.914734)"
gradienttransform="matrix(1, 0, 0, 1, 160.528366, -227.914734)"
>
<stop offset="0" style="stop-color: var(--colorGradientStart)"></stop>
<stop offset="1" style="stop-color: var(--colorGradientEnd)"></stop>
</linearGradient>
<linearGradient
gradientUnits="userSpaceOnUse"
</lineargradient>
<lineargradient
gradientunits="userSpaceOnUse"
x1="226.072"
y1="227.9"
x2="226.072"
y2="271.2"
id="gradient-5"
gradientTransform="matrix(1, 0, 0, 1.009188, 117.228027, -229.988894)"
gradienttransform="matrix(1, 0, 0, 1.009188, 117.228027, -229.988894)"
>
<stop offset="0" style="stop-color: var(--colorGradientStart)"></stop>
<stop offset="1" style="stop-color: var(--colorGradientEnd)"></stop>
</linearGradient>
<linearGradient
gradientUnits="userSpaceOnUse"
</lineargradient>
<lineargradient
gradientunits="userSpaceOnUse"
x1="226.072"
y1="227.9"
x2="226.072"
y2="271.2"
id="gradient-4"
gradientTransform="matrix(1, 0, 0, 1.01159, 49.560085, -230.512993)"
gradienttransform="matrix(1, 0, 0, 1.01159, 49.560085, -230.512993)"
>
<stop offset="0" style="stop-color: var(--colorGradientStart)"></stop>
<stop offset="1" style="stop-color: var(--colorGradientEnd)"></stop>
</linearGradient>
<linearGradient
gradientUnits="userSpaceOnUse"
</lineargradient>
<lineargradient
gradientunits="userSpaceOnUse"
x1="303.242"
y1="238.21"
x2="303.242"
y2="281.91"
id="gradient-8"
gradientTransform="matrix(1, 0, 0, 1, -97.24678, 8.305309)"
gradienttransform="matrix(1, 0, 0, 1, -97.24678, 8.305309)"
>
<stop offset="0" style="stop-color: var(--colorGradientStart)"></stop>
<stop offset="1" style="stop-color: var(--colorGradientEnd)"></stop>
</linearGradient>
</lineargradient>
</defs>
<path
d="M 44 43.7 L 22 43.7 L 22 21 L 0 21 L 0 0 L 67 0 L 67 20.8 L 44 21 L 44 43.7 Z"
Expand Down Expand Up @@ -173,7 +186,7 @@
<div class="public_scores">
<div class="h2_wrapper">
<h2>all time best</h2>
<svg class="dropIcon" height="24" viewBox="0 -960 960 960" width="24" xmlns="http://www.w3.org/2000/svg">
<svg class="dropIcon" height="24" viewbox="0 -960 960 960" width="24" xmlns="http://www.w3.org/2000/svg">
<defs></defs>
<path
d="M460.808-393.04 334.763-519.084q-2.608-2.608-4.108-5.824-1.5-3.217-1.5-6.893 0-7.352 4.972-12.775 4.971-5.423 13.105-5.423h265.536q8.134 0 13.105 5.475 4.972 5.476 4.972 12.776 0 1.826-5.616 12.672L499.192-393.039q-4.346 4.346-8.985 6.346-4.64 2-10.207 2-5.567 0-10.207-2-4.639-2-8.985-6.347Z"
Expand All @@ -191,7 +204,7 @@ <h2>all time best</h2>
<div class="personal_scores">
<div class="h2_wrapper">
<h2>personal best</h2>
<svg class="resetIcon" id="reset" height="24" viewBox="0 -960 960 960" width="24" xmlns="http://www.w3.org/2000/svg">
<svg class="resetIcon" id="reset" height="24" viewbox="0 -960 960 960" width="24" xmlns="http://www.w3.org/2000/svg">
<defs></defs>
<path
d="M292.309-140.001q-29.827 0-51.067-21.241-21.241-21.24-21.241-51.067V-720h-10q-12.75 0-21.375-8.629-8.625-8.628-8.625-21.384 0-12.755 8.625-21.37 8.625-8.616 21.375-8.616H360q0-14.692 10.346-25.038t25.038-10.346h169.232q14.692 0 25.038 10.346T600-779.999h149.999q12.75 0 21.375 8.629t8.625 21.384q0 12.756-8.625 21.371Q762.749-720 749.999-720h-10v507.691q0 29.827-21.241 51.067-21.24 21.241-51.067 21.241H292.309ZM680-720H280v507.691q0 5.385 3.462 8.847 3.462 3.462 8.847 3.462h375.382q5.385 0 8.847-3.462 3.462-3.462 3.462-8.847V-720ZM406.168-280q12.755 0 21.37-8.625 8.616-8.625 8.616-21.374v-300.002q0-12.749-8.629-21.374Q418.896-640 406.141-640q-12.756 0-21.371 8.625-8.615 8.625-8.615 21.374v300.002q0 12.749 8.629 21.374Q393.412-280 406.168-280Zm147.691 0q12.756 0 21.371-8.625 8.615-8.625 8.615-21.374v-300.002q0-12.749-8.629-21.374Q566.588-640 553.832-640q-12.755 0-21.37 8.625-8.616 8.625-8.616 21.374v300.002q0 12.749 8.629 21.374Q541.104-280 553.859-280ZM280-720v520-520Z"
Expand Down Expand Up @@ -225,7 +238,7 @@ <h2>personal best</h2>
<div class="center column">
<div class="game">
<div class="startScreen">
<svg class="throphy" height="24" viewBox="0 -960 960 960" width="24" xmlns="http://www.w3.org/2000/svg">
<svg class="throphy" height="24" viewbox="0 -960 960 960" width="24" xmlns="http://www.w3.org/2000/svg">
<defs></defs>
<g id="throphy">
<path
Expand Down Expand Up @@ -427,7 +440,7 @@ <h2 class="startText">press any key to start</h2>
id="optionsToggle"
alt="toggle options"
height="24"
viewBox="0 -960 960 960"
viewbox="0 -960 960 960"
width="24"
xmlns="http://www.w3.org/2000/svg"
>
Expand Down Expand Up @@ -466,7 +479,7 @@ <h2 class="startText">press any key to start</h2>
id="light"
fill="grey"
height="24"
viewBox="0 -960 960 960"
viewbox="0 -960 960 960"
width="24"
xmlns="http://www.w3.org/2000/svg"
>
Expand All @@ -480,7 +493,7 @@ <h2 class="startText">press any key to start</h2>
id="dark"
fill="grey"
height="24"
viewBox="0 -960 960 960"
viewbox="0 -960 960 960"
width="24"
xmlns="http://www.w3.org/2000/svg"
>
Expand All @@ -491,7 +504,7 @@ <h2 class="startText">press any key to start</h2>
</svg>
</div>

<svg style="bottom: 0;" class="settingIcon" height="24" viewBox="0 -960 960 960" width="24" xmlns="http://www.w3.org/2000/svg">
<svg style="bottom: 0;" class="settingIcon" height="24" viewbox="0 -960 960 960" width="24" xmlns="http://www.w3.org/2000/svg">
<defs></defs>
<path
d="M479.56-255.386q17.132 0 28.94-11.829 11.807-11.829 11.807-28.961 0-17.132-11.829-28.939-11.829-11.808-28.961-11.808-17.132 0-28.939 11.829-11.808 11.829-11.808 28.961 0 17.132 11.829 28.94 11.829 11.807 28.961 11.807Zm.507 155.385q-78.836 0-148.204-29.92-69.369-29.92-120.682-81.21-51.314-51.291-81.247-120.629-29.933-69.337-29.933-148.173t29.92-148.204q29.92-69.369 81.21-120.682 51.291-51.314 120.629-81.247 69.337-29.933 148.173-29.933t148.204 29.92q69.369 29.92 120.682 81.21 51.314 51.291 81.247 120.629 29.933 69.337 29.933 148.173t-29.92 148.204q-29.92 69.369-81.21 120.682-51.291 51.314-120.629 81.247-69.337 29.933-148.173 29.933ZM480-160q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Zm3.24-171.231q27.683 0 47.914 17.429t20.231 43.572q0 22-12.923 39.384-12.923 17.385-29.538 32.385-21.78 19.321-38.352 42.507-16.571 23.185-17.725 51.647-.385 10.922 7.692 18.307 8.077 7.384 18.846 7.384 11.538 0 19.538-7.692 7.999-7.692 10.23-18.846 4-20.615 17.039-36.73Q539.23-478 554.441-492.532q21.866-21.314 38.173-46.48 16.308-25.167 16.308-56.141 0-47.538-37.461-78.115Q534-703.845 484-703.845q-35.692 0-67.307 15.808-31.615 15.807-49.231 46.115-5.461 9.307-3.506 19.593 1.955 10.285 10.557 15.619 10.949 6.095 22.487 3.479 11.538-2.615 19.615-13.153 12.154-15.77 29.423-25.308 17.269-9.539 37.202-9.539Z"
Expand Down Expand Up @@ -541,6 +554,7 @@ <h2>stored block</h2>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XFR11CZ1ZZ"></script>
<script>
window.dataLayer = window.dataLayer || [];

function gtag() {
dataLayer.push(arguments);
}
Expand Down
2 changes: 2 additions & 0 deletions src/js/setup.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -108,6 +108,8 @@ window.onload = () => {
for (let element of document.querySelectorAll(".darktoggle")) {
element.addEventListener("click", (e) => {
document.body.classList.toggle("dark");

localStorage.setItem("theme", document.body.classList.contains("dark") ? "dark" : "light");
});
}
};
Expand Down

0 comments on commit a889be2

Please sign in to comment.