+
+
+
+
+
+
+
+
diff --git a/js/main.js b/js/main.js
index fa19c0c..1f47c88 100644
--- a/js/main.js
+++ b/js/main.js
@@ -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);
});
@@ -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;
+});
+
/* ************** ************** ************** */
diff --git a/partials/head.html b/partials/head.html
index c6a7299..45ab0c9 100644
--- a/partials/head.html
+++ b/partials/head.html
@@ -61,5 +61,30 @@
-
+
+
\ No newline at end of file
diff --git a/public/images/icons/moon.svg b/public/images/icons/moon.svg
new file mode 100644
index 0000000..15e2918
--- /dev/null
+++ b/public/images/icons/moon.svg
@@ -0,0 +1,5 @@
+
\ No newline at end of file
diff --git a/public/images/icons/sun.svg b/public/images/icons/sun.svg
new file mode 100644
index 0000000..d196a8a
--- /dev/null
+++ b/public/images/icons/sun.svg
@@ -0,0 +1,5 @@
+
\ No newline at end of file
diff --git a/styles/main.scss b/styles/main.scss
index a58078b..4944444 100644
--- a/styles/main.scss
+++ b/styles/main.scss
@@ -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 {
@@ -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 {
@@ -251,7 +294,7 @@ button {
display: flex;
justify-content: center;
align-items: center;
-
+
img {
width: 30px;
transition: all ease 500ms;
diff --git a/styles/modals.scss b/styles/modals.scss
index b3e6ca9..c4cd1e6 100644
--- a/styles/modals.scss
+++ b/styles/modals.scss
@@ -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;
@@ -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);
}
diff --git a/styles/tabs.scss b/styles/tabs.scss
index 70c1a1a..c401402 100644
--- a/styles/tabs.scss
+++ b/styles/tabs.scss
@@ -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;
}
diff --git a/styles/variables.scss b/styles/variables.scss
index ef070df..e1a4fab 100644
--- a/styles/variables.scss
+++ b/styles/variables.scss
@@ -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;
}
-}
+}
\ No newline at end of file