Skip to content

Commit 707dead

Browse files
leviaristaleviarista
committed
Dark mode
1 parent 0fc67bb commit 707dead

File tree

9 files changed

+140
-10
lines changed

9 files changed

+140
-10
lines changed

‎index.html‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,16 @@
33

44
<load src="partials/head.html" />
55

6-
<body class="main-container">
6+
<body class="main-container dark-mode">
77
<div class="left-container scrollable">
8+
<div class="toogle-dark-mode">
9+
<div id="light-mode-btn">
10+
<img src="/images/icons/sun.svg" alt="light-mode-btn">
11+
</div>
12+
<div id="dark-mode-btn">
13+
<img src="/images/icons/moon.svg" alt="dark-mode-btn">
14+
</div>
15+
</div>
816
<load src="partials/header.html" />
917
<load src="partials/how-to.html" />
1018
<load src="partials/footer.html" />

‎js/main.js‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -149,7 +149,9 @@ document.querySelector('.randomize-button')
149149

150150
document.querySelector('.reset-button')
151151
.addEventListener('click', (e) => {
152+
const darkMode = localStorage.getItem('darkMode');
152153
localStorage.clear();
154+
localStorage.setItem('darkMode', darkMode);
153155
setPreset(initialTheme);
154156
});
155157

@@ -191,4 +193,30 @@ document.addEventListener("DOMContentLoaded", (event) => {
191193
}
192194
});
193195

196+
/* ************** Dark Mode ************** */
197+
198+
function setLightMode() {
199+
localStorage.setItem('darkMode', 0);
200+
document.documentElement.setAttribute("data-theme", "light");
201+
document.querySelector('#light-mode-btn').classList.add('selected');
202+
document.querySelector('#dark-mode-btn').classList.remove('selected');
203+
}
204+
function setDarkMode() {
205+
localStorage.setItem('darkMode', 1);
206+
document.documentElement.setAttribute("data-theme", "dark");
207+
document.querySelector('#light-mode-btn').classList.remove('selected');
208+
document.querySelector('#dark-mode-btn').classList.add('selected');
209+
}
210+
211+
document.addEventListener("DOMContentLoaded", (event) => {
212+
const localDarkMode = localStorage.getItem('darkMode');
213+
if (localDarkMode && localDarkMode == 1){
214+
document.querySelector('#dark-mode-btn').classList.add('selected');
215+
} else {
216+
document.querySelector('#light-mode-btn').classList.add('selected');
217+
}
218+
document.querySelector('#light-mode-btn').onclick = setLightMode;
219+
document.querySelector('#dark-mode-btn').onclick = setDarkMode;
220+
});
221+
194222
/* ************** ************** ************** */

‎partials/head.html‎

Lines changed: 26 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -61,5 +61,30 @@
6161
<script src="https://cdn.counter.dev/script.js" data-id="4c163d75-71a1-43ff-adea-40e6a4f56cfe"
6262
data-utcoffset="-5"></script>
6363
<script data-goatcounter="https://levi-gphg.goatcounter.com/count" async src="//gc.zgo.at/count.js"></script>
64-
</head>
6564

65+
<script>
66+
/* ************** Dark Mode ************** */
67+
function detectColorScheme() {
68+
let darkMode = 0;
69+
if (localStorage.getItem("darkMode")) {
70+
if (localStorage.getItem("darkMode") == 1) {
71+
darkMode = 1;
72+
}
73+
} else if (!window.matchMedia) {
74+
return false;
75+
} else if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
76+
darkMode = 1;
77+
}
78+
79+
if (darkMode == 1) {
80+
localStorage.setItem('darkMode', 1);
81+
document.documentElement.setAttribute("data-theme", "dark");
82+
} else {
83+
localStorage.setItem('darkMode', 0);
84+
document.documentElement.setAttribute("data-theme", "light");
85+
86+
}
87+
}
88+
detectColorScheme();
89+
</script>
90+
</head>

‎public/images/icons/moon.svg‎

Lines changed: 5 additions & 0 deletions
Loading

‎public/images/icons/sun.svg‎

Lines changed: 5 additions & 0 deletions
Loading

‎styles/main.scss‎

Lines changed: 46 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,8 @@ body {
77
display: flex;
88
color: var(--text-color);
99
font-family: var(--main-font-familiy);
10-
background: #446BAF;
11-
background: linear-gradient(180deg, #675494 0%, #605fa1 32.6%, #4e6db3 68.54%, #4078c0 100%);
10+
// background: #446BAF;
11+
background: var(--background-color);
1212
}
1313

1414
.left-container {
@@ -22,6 +22,49 @@ body {
2222
background: rgba(0, 0, 0, .05);
2323
box-shadow: 0px 0px 10px 5px rgb(255, 255, 255, .25);
2424
z-index: 30;
25+
26+
.toogle-dark-mode {
27+
position: absolute;
28+
float: right;
29+
height: 30px;
30+
padding: 0px;
31+
display: flex;
32+
align-items: center;
33+
justify-content: center;
34+
background-color: #949494;
35+
border-radius: 15px;
36+
37+
>div {
38+
width: 30px;
39+
height: 30px;
40+
display: flex;
41+
align-items: center;
42+
justify-content: center;
43+
border-radius: 50%;
44+
box-shadow: none;
45+
transition: all .25s ease;
46+
cursor: pointer;
47+
z-index: 100;
48+
border: solid 1px #949494;
49+
50+
&:hover {
51+
box-shadow: 0px 0px 7px rgba(0, 0, 0, 0.5);
52+
}
53+
}
54+
55+
img {
56+
width: 15px;
57+
filter: brightness(0)
58+
}
59+
60+
.selected {
61+
background-color: rgb(33, 30, 30);
62+
63+
img {
64+
filter: none;
65+
}
66+
}
67+
}
2568
}
2669

2770
.toolbox-container {
@@ -251,7 +294,7 @@ button {
251294
display: flex;
252295
justify-content: center;
253296
align-items: center;
254-
297+
255298
img {
256299
width: 30px;
257300
transition: all ease 500ms;

‎styles/modals.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
.modal {
22
position: fixed;
3-
background-color: rgba(0, 0, 0, 0.25);
3+
background-color: rgba(0, 0, 0, 0.7);
44
top: 0;
55
right: 0;
66
bottom: 0;
@@ -26,7 +26,7 @@
2626
left: 50%;
2727
transform: translate(-50%, -50%);
2828
padding: 2em;
29-
background: #4e6db3;
29+
background: var(--background-color);
3030
box-shadow: 0px 0px 5px rgba(255, 255, 255, 0.5), 0px 0px 10px rgba(0, 0, 0, 0.25);
3131
border-radius: var(--button-border-radius);
3232
}

‎styles/tabs.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@
2727
cursor: pointer;
2828
padding: 1rem 2rem;
2929
transition: 0.3s;
30-
color: white;
30+
color: rgb(240, 240, 240);
3131
border-radius: 0 0 9px 9px;
3232
}
3333

‎styles/variables.scss‎

Lines changed: 18 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,31 @@
11
:root {
22
--button-border-radius: 7px;
33
--input-border-radius: 7px;
4+
--background-color: linear-gradient(180deg,
5+
#675494 0%,
6+
#605fa1 32.6%,
7+
#4e6db3 68.54%,
8+
#4078c0 100%);
49
--text-color: white;
510
--paddings: 3rem;
611
--github-dark-mode-color: #0d1117;
712
--github-light-mode-color: white;
8-
--main-font-familiy: "Red Hat Display", Arial, Helvetica, sans-serif;
13+
--main-font-familiy: "Red Hat Display", Arial, Helvetica, sans-serif;
14+
15+
16+
}
17+
18+
[data-theme="dark"] {
19+
--background-color: linear-gradient(180deg, #2A2142 0%, #2F3E6F 50%, #1A2A54 100%);
20+
--background-color: linear-gradient(180deg, #201932 0%, #222c50 50%, #131e3c 100%);
21+
// --background-color: linear-gradient(180deg, #1B1B2F 0%, #121224 60%, #0A0A1A 100%);
22+
// --background-color: linear-gradient(180deg, #111110 0%, #1A1A1A 40%, #2E2E3A 100%);
23+
// --text-color: white;
24+
--text-color: #e4e4e4;
925
}
1026

1127
@media (max-width: 768px) {
1228
:root {
1329
--paddings: 1rem;
1430
}
15-
}
31+
}

0 commit comments

Comments
 (0)