Skip to content

Commit 39a2738

Browse files
CohPholCohPhol
committed
Added Mode Preferences
1 parent b6b662a commit 39a2738

File tree

4 files changed

+110
-34
lines changed

4 files changed

+110
-34
lines changed

‎assets/css/colormode.css

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
body {
2+
background-color: var(--light-bg);
3+
color: var(--light-text);
4+
transition: background-color 0.3s ease, color 0.3s ease;
5+
}
6+
7+
body .dark-mode {
8+
background-color: var(--dark-bg);
9+
color: var(--dark-text);
10+
}
11+
12+
.theme-toggle {
13+
display: flex;
14+
justify-content: center;
15+
align-items: center;
16+
height: 100%;
17+
}
18+
19+
.switch {
20+
position: relative;
21+
width: 60px;
22+
height: 30px;
23+
background-color: var(--switch-light-bg);
24+
border-radius: 30px;
25+
cursor: pointer;
26+
transition: background-color 0.3s ease;
27+
}
28+
29+
.switch::before {
30+
content: "";
31+
position: absolute;
32+
width: 26px;
33+
height: 26px;
34+
background-color: var(--switch-knob-bg);
35+
border-radius: 50%;
36+
top: 2px;
37+
left: 2px;
38+
transition: all 0.3s ease;
39+
box-shadow: 0 2px 4px var(--switch-knob-shadow);
40+
}
41+
42+
input[type="checkbox"] {
43+
display: none;
44+
}
45+
46+
input[type="checkbox"]:checked+.switch {
47+
background-color: var(--switch-dark-bg);
48+
}
49+
50+
input[type="checkbox"]:checked+.switch::before {
51+
transform: translateX(30px);
52+
}
53+
54+
.card {
55+
background-color: var(--light-bg);
56+
color: var(--light-text);
57+
transition: background-color 0.3s ease, color 0.3s ease;
58+
}
59+
60+
body.dark-mode .card {
61+
background-color: var(--dark-bg);
62+
color: var(--dark-text);
63+
}

‎assets/css/root.css

Lines changed: 8 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,10 @@
11
:root {
2-
--bg-pink: rgb(232, 219, 212);
3-
--bg-light-pink: rgb(245, 240, 236);
4-
--container-shadow: rgba(0, 0, 0, 0.3);
5-
6-
--navbar-underline: rgb(251, 235, 226);
7-
--navbar-on-hover: rgb(236, 220, 217);
8-
9-
--about-me-bg-light-pink: rgb(247, 247, 245);
10-
--about-me-bg-pink: rgb(246, 236, 227);
11-
--about-me-header-text: rgb(228, 216, 126);
12-
--about-me-bg-header-text: rgb(255, 255, 255);
13-
14-
--started-bg-light-pink: rgb(247, 247, 245);
15-
--started-underline: rgb(251, 235, 226);
16-
17-
--fun-facts-bg-light-pink: rgb(246, 243, 236);
18-
--fun-facts-underline: rgb(241, 213, 101);
19-
--fun-facts-bg-white: rgb(255, 255, 255);
20-
--fun-facts-bg-pink: rgb(251, 235, 226);
21-
--fun-facts-black: rgb(0, 0, 0);
22-
23-
--advertisement-underline: rgb(251, 235, 226);
2+
--light-bg: #fff;
3+
--light-text: #000;
4+
--dark-bg: #333;
5+
--dark-text: #fff;
6+
--switch-light-bg: #ddd;
7+
--switch-dark-bg: #555;
8+
--switch-knob-bg: white;
9+
--switch-knob-shadow: rgba(0, 0, 0, 0.2);
2410
}

‎assets/js/color-mode.js

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
const themeSwitch = document.getElementById('theme-switch');
2+
const body = document.body;
3+
4+
themeSwitch.addEventListener('change', function () {
5+
if (themeSwitch.checked) {
6+
7+
body.classList.remove('light-mode');
8+
body.classList.add('dark-mode');
9+
body.style.backgroundColor = '#333333';
10+
cards.forEach(card => {
11+
card.classList.remove('light-mode');
12+
card.classList.add('dark-mode');
13+
});
14+
} else {
15+
16+
body.classList.remove('dark-mode');
17+
body.classList.add('light-mode');
18+
body.style.backgroundColor = '#ffffff';
19+
cards.forEach(card => {
20+
card.classList.remove('dark-mode');
21+
card.classList.add('light-mode');
22+
});
23+
}
24+
});

‎index.html

Lines changed: 15 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -12,71 +12,74 @@
1212
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
1313
<link rel="stylesheet" href="./assets/css/root.css">
1414
<link rel="stylesheet" href="./assets/css/style.css">
15+
<link rel="stylesheet" href="./assets/css/colormode.css">
1516

1617
<title>Surprise</title>
1718
</head>
1819

19-
<body>
20+
<body class="light-mode">
21+
2022
<!-- <div class="nav-container">
2123
<button>All</button>
2224
<button>About</button>
2325
<button>Projects</button>
26+
2427
</div> -->
2528

2629
<div class="container" id="cardContainer">
27-
<div class="card" draggable="true">
30+
<div class="card light-mode" draggable="true">
2831
<div class="card-body">
2932
<h5 class="card-title">Card 1</h5>
3033
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's
3134
content.</p>
3235
</div>
3336
</div>
34-
<div class="card" draggable="true">
37+
<div class="card light-mode" draggable="true">
3538
<div class="card-body">
3639
<h5 class="card-title">Card 2</h5>
3740
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's
3841
content.</p>
3942
</div>
4043
</div>
41-
<div class="card" draggable="true">
44+
<div class="card light-mode" draggable="true">
4245
<div class="card-body">
4346
<h5 class="card-title">Card 3</h5>
4447
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's
4548
content.</p>
4649
</div>
4750
</div>
48-
<div class="card" draggable="true">
51+
<div class="card light-mode" draggable="true">
4952
<div class="card-body">
5053
<h5 class="card-title">Card 4</h5>
5154
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's
5255
content.</p>
5356
</div>
5457
</div>
55-
<div class="card" draggable="true">
58+
<div class="card light-mode" draggable="true">
5659
<div class="card-body">
5760
<h5 class="card-title">Card 5</h5>
5861
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's
5962
content.</p>
6063
</div>
6164
</div>
62-
<div class="card" draggable="true">
65+
<div class="card light-mode" draggable="true">
6366
<div class="card-body">
6467
<h5 class="card-title">Card 6</h5>
6568
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's
6669
content.</p>
6770
</div>
6871
</div>
69-
<div class="card" draggable="true">
70-
<div class="card-body">
71-
<h5 class="card-title">Card 7</h5>
72-
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's
73-
content.</p>
72+
<div class="card light-mode" draggable="true">
73+
<div class="theme-toggle">
74+
<input type="checkbox" id="theme-switch">
75+
<label for="theme-switch" class="switch"></label>
7476
</div>
7577
</div>
7678
</div>
7779

7880

7981
<script src="./assets/js/main.js"></script>
82+
<script src="./assets/js/color-mode.js"></script>
8083
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
8184
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
8285
crossorigin="anonymous"></script>

0 commit comments

Comments
 (0)