Skip to content

Dark mode #19

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
leviarista merged 1 commit into from
Sep 13, 2025
Merged

Dark mode #19

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 9 additions & 1 deletion index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,16 @@

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

<body class="main-container">
<body class="main-container dark-mode">
<div class="left-container scrollable">
<div class="toogle-dark-mode">
<div id="light-mode-btn">
<img src="/images/icons/sun.svg" alt="light-mode-btn">
</div>
<div id="dark-mode-btn">
<img src="/images/icons/moon.svg" alt="dark-mode-btn">
</div>
</div>
<load src="partials/header.html" />
<load src="partials/how-to.html" />
<load src="partials/footer.html" />
Expand Down
28 changes: 28 additions & 0 deletions js/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -149,7 +149,9 @@ document.querySelector('.randomize-button')

document.querySelector('.reset-button')
.addEventListener('click', (e) => {
const darkMode = localStorage.getItem('darkMode');
localStorage.clear();
localStorage.setItem('darkMode', darkMode);
setPreset(initialTheme);
});

Expand Down Expand Up @@ -191,4 +193,30 @@ document.addEventListener("DOMContentLoaded", (event) => {
}
});

/* ************** Dark Mode ************** */

function setLightMode() {
localStorage.setItem('darkMode', 0);
document.documentElement.setAttribute("data-theme", "light");
document.querySelector('#light-mode-btn').classList.add('selected');
document.querySelector('#dark-mode-btn').classList.remove('selected');
}
function setDarkMode() {
localStorage.setItem('darkMode', 1);
document.documentElement.setAttribute("data-theme", "dark");
document.querySelector('#light-mode-btn').classList.remove('selected');
document.querySelector('#dark-mode-btn').classList.add('selected');
}

document.addEventListener("DOMContentLoaded", (event) => {
const localDarkMode = localStorage.getItem('darkMode');
if (localDarkMode && localDarkMode == 1){
document.querySelector('#dark-mode-btn').classList.add('selected');
} else {
document.querySelector('#light-mode-btn').classList.add('selected');
}
document.querySelector('#light-mode-btn').onclick = setLightMode;
document.querySelector('#dark-mode-btn').onclick = setDarkMode;
});

/* ************** ************** ************** */
27 changes: 26 additions & 1 deletion partials/head.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,5 +61,30 @@
<script src="https://cdn.counter.dev/script.js" data-id="4c163d75-71a1-43ff-adea-40e6a4f56cfe"
data-utcoffset="-5"></script>
<script data-goatcounter="https://levi-gphg.goatcounter.com/count" async src="//gc.zgo.at/count.js"></script>
</head>

<script>
/* ************** Dark Mode ************** */
function detectColorScheme() {
let darkMode = 0;
if (localStorage.getItem("darkMode")) {
if (localStorage.getItem("darkMode") == 1) {
darkMode = 1;
}
} else if (!window.matchMedia) {
return false;
} else if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
darkMode = 1;
}

if (darkMode == 1) {
localStorage.setItem('darkMode', 1);
document.documentElement.setAttribute("data-theme", "dark");
} else {
localStorage.setItem('darkMode', 0);
document.documentElement.setAttribute("data-theme", "light");

}
}
detectColorScheme();
</script>
</head>
5 changes: 5 additions & 0 deletions public/images/icons/moon.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
5 changes: 5 additions & 0 deletions public/images/icons/sun.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
49 changes: 46 additions & 3 deletions styles/main.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,8 @@ body {
display: flex;
color: var(--text-color);
font-family: var(--main-font-familiy);
background: #446BAF;
background: linear-gradient(180deg, #675494 0%, #605fa1 32.6%, #4e6db3 68.54%, #4078c0 100%);
// background: #446BAF;
background: var(--background-color);
}

.left-container {
Expand All @@ -22,6 +22,49 @@ body {
background: rgba(0, 0, 0, .05);
box-shadow: 0px 0px 10px 5px rgb(255, 255, 255, .25);
z-index: 30;

.toogle-dark-mode {
position: absolute;
float: right;
height: 30px;
padding: 0px;
display: flex;
align-items: center;
justify-content: center;
background-color: #949494;
border-radius: 15px;

>div {
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
box-shadow: none;
transition: all .25s ease;
cursor: pointer;
z-index: 100;
border: solid 1px #949494;

&:hover {
box-shadow: 0px 0px 7px rgba(0, 0, 0, 0.5);
}
}

img {
width: 15px;
filter: brightness(0)
}

.selected {
background-color: rgb(33, 30, 30);

img {
filter: none;
}
}
}
}

.toolbox-container {
Expand Down Expand Up @@ -251,7 +294,7 @@ button {
display: flex;
justify-content: center;
align-items: center;

img {
width: 30px;
transition: all ease 500ms;
Expand Down
4 changes: 2 additions & 2 deletions styles/modals.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
.modal {
position: fixed;
background-color: rgba(0, 0, 0, 0.25);
background-color: rgba(0, 0, 0, 0.7);
top: 0;
right: 0;
bottom: 0;
Expand All @@ -26,7 +26,7 @@
left: 50%;
transform: translate(-50%, -50%);
padding: 2em;
background: #4e6db3;
background: var(--background-color);
box-shadow: 0px 0px 5px rgba(255, 255, 255, 0.5), 0px 0px 10px rgba(0, 0, 0, 0.25);
border-radius: var(--button-border-radius);
}
Expand Down
2 changes: 1 addition & 1 deletion styles/tabs.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@
cursor: pointer;
padding: 1rem 2rem;
transition: 0.3s;
color: white;
color: rgb(240, 240, 240);
border-radius: 0 0 9px 9px;
}

Expand Down
20 changes: 18 additions & 2 deletions styles/variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,31 @@
:root {
--button-border-radius: 7px;
--input-border-radius: 7px;
--background-color: linear-gradient(180deg,
#675494 0%,
#605fa1 32.6%,
#4e6db3 68.54%,
#4078c0 100%);
--text-color: white;
--paddings: 3rem;
--github-dark-mode-color: #0d1117;
--github-light-mode-color: white;
--main-font-familiy: "Red Hat Display", Arial, Helvetica, sans-serif;
--main-font-familiy: "Red Hat Display", Arial, Helvetica, sans-serif;


}

[data-theme="dark"] {
--background-color: linear-gradient(180deg, #2A2142 0%, #2F3E6F 50%, #1A2A54 100%);
--background-color: linear-gradient(180deg, #201932 0%, #222c50 50%, #131e3c 100%);
// --background-color: linear-gradient(180deg, #1B1B2F 0%, #121224 60%, #0A0A1A 100%);
// --background-color: linear-gradient(180deg, #111110 0%, #1A1A1A 40%, #2E2E3A 100%);
// --text-color: white;
--text-color: #e4e4e4;
}

@media (max-width: 768px) {
:root {
--paddings: 1rem;
}
}
}
Loading