Skip to content

Commit 7a362bf

Browse files
CodeWithAlaminCodeWithAlamin
committed
added-dark-mode
1 parent 0584811 commit 7a362bf

File tree

10 files changed

+111
-3
lines changed

10 files changed

+111
-3
lines changed

‎src/images/icon-dark.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎src/images/icon-light.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎src/index.html‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,16 @@
6363
<!-- -->
6464
</head>
6565
<body>
66+
<!-- -->
67+
<div class="dark-mode-container">
68+
<input
69+
type="checkbox"
70+
class="dark-mode-checkbox"
71+
id="dark-mode-checkbox"
72+
/>
73+
<label for="dark-mode-checkbox" class="dark-mode-lebel"></label>
74+
</div>
75+
<!-- -->
6676
<main>
6777
<div class="container">
6878
<div class="all-comments-container"></div>

‎src/js/controller.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
"use strict";
22
import "../sass/main.scss";
3+
import "./darkMode.js";
34
import * as model from "./model.js";
45
import commentView from "./View/commentView.js";
56
import deleteModalView from "./View/deleteModalView.js";

‎src/js/darkMode.js‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
const darkModeToggle = document.getElementById("dark-mode-checkbox");
2+
const root = document.documentElement;
3+
const darkMode = function () {
4+
root.classList.toggle("dark-mode", darkModeToggle.checked);
5+
localStorage.setItem("darkMode", darkModeToggle.checked ? "on" : "off");
6+
};
7+
8+
darkModeToggle.addEventListener("change", darkMode);
9+
window.addEventListener("load", function () {
10+
darkModeToggle.checked = localStorage.getItem("darkMode") === "on";
11+
darkMode();
12+
});

‎src/sass/_base.scss‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,16 @@
22
--moderate-blue: hsl(238, 40%, 52%);
33
--soft-red: hsl(358, 79%, 66%);
44
--light-grayish-blue: hsl(239, 57%, 85%);
5-
--pale-red: hsl(357, 100%, 86%);
65

76
--dark-blue: hsl(212, 24%, 26%);
87
--grayish-blue: hsl(211, 10%, 45%);
98
--light-gray: hsl(223, 19%, 93%);
109
--very-light-gray: hsl(228, 33%, 97%);
1110
--white: hsl(0, 0%, 100%);
11+
--white-pale: white;
1212

1313
--indent-color: hsl(0, 0%, 83%);
14+
--overlay: rgba(0, 0, 0, 0.3);
1415
}
1516

1617
$bp-medium: 700px;

‎src/sass/_components.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@
5656
}
5757

5858
.overlay {
59-
background-color: rgba(0, 0, 0, 0.3);
59+
background-color: var(--overlay);
6060
height: 100vh;
6161
width: 100vw;
6262
position: fixed;

‎src/sass/_dark-mode.scss‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
:root.dark-mode {
2+
--moderate-blue: hsl(238, 72%, 66%);
3+
--soft-red: hsl(358, 55%, 58%);
4+
5+
--dark-blue: hsl(210, 65%, 81%);
6+
--grayish-blue: hsl(211, 26%, 78%);
7+
--light-gray: hsl(228, 7%, 14%);
8+
--white: hsl(240, 3%, 8%);
9+
--white-pale: rgb(22, 21, 26);
10+
11+
--indent-color: hsl(0, 0%, 46%);
12+
--overlay: rgba(88, 88, 88, 0.3);
13+
}
14+
15+
.dark-mode-container {
16+
// position: absolute;
17+
// top: 0.5rem;
18+
// right: 0.5rem;
19+
z-index: 1;
20+
21+
display: block;
22+
margin-left: auto;
23+
margin-bottom: 1rem;
24+
25+
.dark-mode-checkbox {
26+
display: none;
27+
}
28+
29+
.dark-mode-lebel {
30+
--clr-bg: rgb(214, 214, 214);
31+
--clr-border: #ffffff;
32+
--clr-shadow: rgba(24, 27, 48, 0.8);
33+
--sh-height: 1.7rem;
34+
--border: calc(var(--sh-height) / 11);
35+
position: relative;
36+
display: block;
37+
width: calc(var(--sh-height) * 1.7);
38+
height: var(--sh-height);
39+
background: var(--clr-bg);
40+
border-radius: 99999px;
41+
border: var(--border) solid var(--clr-border);
42+
box-shadow: 0 0 10px var(--clr-shadow);
43+
cursor: pointer;
44+
45+
&::before {
46+
content: "";
47+
display: inline-block;
48+
background: url(../images/icon-light.svg) no-repeat center / 80%;
49+
50+
--clr-circle: #4343ff;
51+
--circle: calc(var(--sh-height) - var(--border) * 2);
52+
position: absolute;
53+
top: 50%;
54+
left: 0%;
55+
transform: translateY(-50%) rotate(0deg);
56+
57+
width: var(--circle);
58+
height: var(--circle);
59+
border-radius: 99999px;
60+
background-color: var(--clr-circle);
61+
transition: left 0.2s ease-in-out, transform 0.3s ease-in-out;
62+
}
63+
}
64+
65+
.dark-mode-checkbox:checked ~ .dark-mode-lebel::before {
66+
background-image: url(../images/icon-dark.svg);
67+
68+
--clr-circle: #2c2cd8;
69+
left: calc(100% - var(--circle));
70+
transform: translateY(-50%) rotate(360deg);
71+
}
72+
73+
.dark-mode-checkbox:checked ~ .dark-mode-lebel {
74+
--clr-shadow: rgba(24, 27, 48, 1);
75+
--clr-bg: rgb(74, 76, 90);
76+
--clr-border: #736ba3;
77+
}
78+
}

‎src/sass/_layouts.scss‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -143,7 +143,8 @@ main {
143143
justify-content: flex-end;
144144

145145
.action-btn {
146-
background-color: var(--white);
146+
background-color: transparent;
147+
color: var(--dark-blue);
147148
border: none;
148149
cursor: pointer;
149150

@@ -244,6 +245,7 @@ main {
244245
caret-color: var(--moderate-blue);
245246
color: var(--dark-blue);
246247
width: 100%;
248+
background-color: var(--white-pale);
247249

248250
&:focus,
249251
&:active {
@@ -310,6 +312,7 @@ main {
310312
outline: none;
311313
caret-color: var(--moderate-blue);
312314
color: var(--dark-blue);
315+
background-color: var(--white-pale);
313316

314317
&:focus,
315318
&:active {

‎src/sass/main.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,4 +4,5 @@
44
@import "./base.scss";
55
@import "./layouts.scss";
66
@import "./components.scss";
7+
@import "./dark-mode.scss";
78
@import "./attribution.scss";

0 commit comments

Comments
 (0)