Skip to content

Commit c93c549

Browse files
mazenAliRushdimazenAliRushdi
committed
Feat: Implement light and dark mode theming
1 parent 031647f commit c93c549

File tree

3 files changed

+152
-33
lines changed

3 files changed

+152
-33
lines changed

‎index.html‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,12 @@
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66
<title>Weight Converter</title>
7+
<link rel="stylesheet" href="style.css">
78
</head>
89
<body>
10+
<div class="theme-toggle">
11+
<input type="checkbox" id="darkModeToggle">
12+
<label for="darkModeToggle" class="theme-toggle-label"></label> </div>
913
<h1>Weight Converter</h1>
1014

1115
<div class="container">
@@ -25,11 +29,12 @@ <h1>Weight Converter</h1>
2529
<label for="milligrams">Milligrams (mg):</label>
2630
<input type="number" id="milligrams">
2731
</div>
28-
<button id="convertButton">Convert</button>
29-
<button id="clearButton">Clear</button>
32+
<div class="buttons-container">
33+
<button id="convertButton">Convert</button>
34+
<button id="clearButton">Clear</button>
35+
</div>
3036
</div>
3137

3238
<script src="script.js"></script>
33-
<link rel="stylesheet" href="style.css">
3439
</body>
3540
</html>

‎script.js‎

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,34 @@
11
// script.js
22
document.addEventListener('DOMContentLoaded', function() {
3+
const body = document.body;
4+
const darkModeToggle = document.getElementById('darkModeToggle');
35
const kilogramsInput = document.getElementById('kilograms');
46
const gramsInput = document.getElementById('grams');
57
const poundsInput = document.getElementById('pounds');
68
const milligramsInput = document.getElementById('milligrams');
79
const convertButton = document.getElementById('convertButton');
810
const clearButton = document.getElementById('clearButton');
9-
const highlightDuration = 300; // milliseconds
11+
const highlightDuration = 300;
1012

1113
function saveConversion() {
1214
localStorage.setItem('lastKilograms', kilogramsInput.value);
1315
localStorage.setItem('lastGrams', gramsInput.value);
1416
localStorage.setItem('lastPounds', poundsInput.value);
1517
localStorage.setItem('lastMilligrams', milligramsInput.value);
18+
localStorage.setItem('darkMode', body.classList.contains('dark-mode'));
1619
}
1720

1821
function loadLastConversion() {
1922
const lastKilograms = localStorage.getItem('lastKilograms');
2023
const lastGrams = localStorage.getItem('lastGrams');
2124
const lastPounds = localStorage.getItem('lastPounds');
2225
const lastMilligrams = localStorage.getItem('lastMilligrams');
26+
const darkModeEnabled = localStorage.getItem('darkMode') === 'true';
27+
28+
if (darkModeEnabled) {
29+
body.classList.add('dark-mode');
30+
darkModeToggle.checked = true;
31+
}
2332

2433
if (lastKilograms !== null) kilogramsInput.value = lastKilograms;
2534
if (lastGrams !== null) gramsInput.value = lastGrams;
@@ -46,6 +55,11 @@ document.addEventListener('DOMContentLoaded', function() {
4655
}, highlightDuration);
4756
}
4857

58+
darkModeToggle.addEventListener('change', function() {
59+
body.classList.toggle('dark-mode');
60+
saveConversion();
61+
});
62+
4963
kilogramsInput.addEventListener('input', function() {
5064
clearAllInputsExcept(kilogramsInput);
5165
const kg = parseFloat(kilogramsInput.value);

‎style.css‎

Lines changed: 129 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -4,38 +4,91 @@ body {
44
display: flex;
55
flex-direction: column;
66
align-items: center;
7-
padding-top: 5px;
7+
padding-top: 40px;
88
background-color: #f8f9fa;
9+
color: #343a40;
10+
transition: background-color 0.3s ease, color 0.3s ease;
11+
}
12+
13+
body.dark-mode {
14+
background-color: #212529;
15+
color: #f8f9fa;
16+
}
17+
18+
body.dark-mode h1 {
19+
color: #f8f9fa;
20+
}
21+
22+
.theme-toggle {
23+
position: absolute;
24+
top: 20px;
25+
right: 20px;
26+
}
27+
28+
.theme-toggle-label {
29+
display: inline-block;
30+
width: 50px;
31+
height: 25px;
32+
background: #ccc;
33+
border-radius: 15px;
34+
position: relative;
35+
transition: background-color 0.3s ease;
36+
cursor: pointer;
37+
}
38+
39+
.theme-toggle-label:after {
40+
content: '';
41+
position: absolute;
42+
top: 3px;
43+
left: 3px;
44+
width: 19px;
45+
height: 19px;
46+
background: #fff;
47+
border-radius: 50%;
48+
transition: 0.3s ease;
49+
}
50+
51+
.theme-toggle input[type="checkbox"] {
52+
height: 0;
53+
width: 0;
54+
visibility: hidden;
55+
}
56+
57+
.theme-toggle input:checked + .theme-toggle-label {
58+
background: #6c757d;
59+
}
60+
61+
.theme-toggle input:checked + .theme-toggle-label:after {
62+
left: calc(100% - 22px);
963
}
1064

1165
h1 {
12-
margin-bottom: 40px;
66+
margin-bottom: 50px;
1367
color: #343a40;
1468
text-align: center;
15-
font-size: 2.5em;
69+
font-size: 2.7em;
70+
}
71+
72+
body.dark-mode h1 {
73+
color: #f8f9fa;
1674
}
1775

1876
.container {
1977
background-color: #ffffff;
20-
padding: 50px;
21-
border-radius: 12px;
22-
box-shadow: 0 0 25px rgba(0, 0, 0, 0.2);
78+
padding: 40px;
79+
border-radius: 15px;
80+
box-shadow: 0 0 30px rgba(0, 0, 0, 0.15);
2381
display: flex;
2482
flex-direction: column;
25-
gap: 20px;
26-
width: 400px;
83+
gap: 25px;
84+
width: 450px;
2785
animation: fadeIn 0.5s ease-out;
86+
transition: background-color 0.3s ease, box-shadow 0.3s ease;
2887
}
2988

30-
@keyframes fadeIn {
31-
from {
32-
opacity: 0;
33-
transform: translateY(-20px);
34-
}
35-
to {
36-
opacity: 1;
37-
transform: translateY(0);
38-
}
89+
body.dark-mode .container {
90+
background-color: #343a40;
91+
box-shadow: 0 0 30px rgba(255, 255, 255, 0.2);
3992
}
4093

4194
.container > div {
@@ -47,17 +100,28 @@ h1 {
47100
label {
48101
font-weight: 500;
49102
color: #495057;
50-
font-size: 1.1em;
51-
width: 150px;
103+
font-size: 1.15em;
104+
width: 160px;
105+
transition: color 0.3s ease;
106+
}
107+
108+
body.dark-mode label {
109+
color: #ced4da;
52110
}
53111

54112
input[type="number"] {
55-
padding: 12px;
113+
padding: 14px;
56114
border: 1px solid #ced4da;
57-
border-radius: 8px;
58-
width: 220px;
59-
font-size: 1.1em;
60-
transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out; /* Added transition for smoother highlight */
115+
border-radius: 10px;
116+
width: 250px;
117+
font-size: 1.15em;
118+
transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.3s ease;
119+
}
120+
121+
body.dark-mode input[type="number"] {
122+
background-color: #495057;
123+
color: #f8f9fa;
124+
border-color: #6c757d;
61125
}
62126

63127
input[type="number"]:focus {
@@ -66,30 +130,66 @@ input[type="number"]:focus {
66130
box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
67131
}
68132

133+
body.dark-mode input[type="number"]:focus {
134+
border-color: #007bff;
135+
box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5);
136+
}
137+
69138
.conversion-highlight {
70-
background-color: #e9ecef; /* Light gray background for highlight */
71-
border-color: #007bff !important; /* Highlight border color */
139+
background-color: #e9ecef;
140+
border-color: #007bff !important;
141+
}
142+
143+
body.dark-mode .conversion-highlight {
144+
background-color: #6c757d;
145+
border-color: #007bff !important;
146+
color: #f8f9fa;
147+
}
148+
149+
.buttons-container {
150+
display: flex;
151+
gap: 15px;
152+
justify-content: flex-end;
153+
margin-top: 30px;
72154
}
73155

74156
button {
75-
padding: 14px 28px;
157+
padding: 16px 32px;
76158
background-color: #007bff;
77159
color: white;
78160
border: none;
79-
border-radius: 8px;
161+
border-radius: 10px;
80162
cursor: pointer;
81-
font-size: 1.1em;
163+
font-size: 1.2em;
82164
transition: background-color 0.3s ease;
83165
}
84166

167+
body.dark-mode button {
168+
background-color: #007bff;
169+
color: #fff;
170+
}
171+
85172
button:hover {
86173
background-color: #0056b3;
87174
}
88175

176+
body.dark-mode button:hover {
177+
background-color: #0056b3;
178+
}
179+
89180
#clearButton {
90181
background-color: #6c757d;
91182
}
92183

184+
body.dark-mode #clearButton {
185+
background-color: #6c757d;
186+
color: #fff;
187+
}
188+
93189
#clearButton:hover {
94190
background-color: #545b62;
191+
}
192+
193+
body.dark-mode #clearButton:hover {
194+
background-color: #545b62;
95195
}

0 commit comments

Comments
 (0)