Skip to content

Commit 33d5ddb

Browse files
harshitrwtharshitrwt
committed
theme-btn
1 parent c118ea6 commit 33d5ddb

3 files changed

Lines changed: 246 additions & 103 deletions

File tree

‎docs/css/style.css‎

Lines changed: 134 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -106,16 +106,74 @@ body.dark-theme {
106106
--card-bg-color: #222121;
107107
}
108108

109-
110-
.theme-toggle-btn {
111-
background-color: #1ADBFF;
112-
padding: 0.5em;
113-
border-radius: 0.5em;
114-
display: inline-flex;
109+
#theme-toggle-button {
110+
font-size: 7px;
111+
position: relative;
112+
display: inline-block;
113+
width: 7em;
115114
cursor: pointer;
116115
}
117116

118-
/* SVG uses currentColor for fill */
117+
#toggle {
118+
opacity: 0;
119+
width: 0;
120+
height: 0;
121+
}
122+
123+
#container,
124+
#patches,
125+
#stars,
126+
#button,
127+
#sun,
128+
#moon,
129+
#cloud {
130+
transition-property: all;
131+
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
132+
transition-duration: 0.25s;
133+
}
134+
135+
#toggle:checked+svg #container {
136+
fill: #2b4360;
137+
}
138+
139+
#toggle:checked+svg #button {
140+
transform: translate(28px, 2.333px);
141+
}
142+
143+
144+
#sun {
145+
opacity: 1;
146+
}
147+
148+
#toggle:checked+svg #sun {
149+
opacity: 0;
150+
}
151+
152+
#moon {
153+
opacity: 0;
154+
}
155+
156+
#toggle:checked+svg #moon {
157+
opacity: 1;
158+
}
159+
160+
#cloud {
161+
opacity: 1;
162+
}
163+
164+
#toggle:checked+svg #cloud {
165+
opacity: 0;
166+
}
167+
168+
#stars {
169+
opacity: 0;
170+
}
171+
172+
#toggle:checked+svg #stars {
173+
opacity: 1;
174+
}
175+
176+
119177
.theme-toggle-btn svg {
120178
color: var(--bg-color);
121179
fill: currentColor;
@@ -186,16 +244,14 @@ body.dark-theme {
186244
}
187245

188246
.logo {
189-
width: 55px;
190-
height: 50px;
191-
border-radius: 40%;
247+
width: 60px;
248+
height: 55px;
192249
transition: all 0.3s ease;
193250
}
194251

195252
.navbar.scrolled .logo {
196253
width: 55px;
197254
height: 50px;
198-
border-radius: 50%;
199255
}
200256

201257
.brand-text {
@@ -1068,28 +1124,29 @@ body.dark-theme {
10681124
}
10691125

10701126
.download-buttons .btn {
1071-
display: inline-flex;
1072-
align-items: center;
1073-
gap: var(--space-1);
1127+
display: inline-flex;
1128+
align-items: center;
1129+
gap: var(--space-1);
10741130
}
10751131

10761132
.download-info {
1077-
display: flex;
1078-
justify-content: center;
1079-
margin-bottom: var(--space-8);
1080-
margin-top: var(--space-4);
1081-
font-size: var(--font-size-sm);
1133+
display: flex;
1134+
justify-content: center;
1135+
margin-bottom: var(--space-8);
1136+
margin-top: var(--space-4);
1137+
font-size: var(--font-size-sm);
10821138
}
1139+
10831140
.download .btn-primary.btn-large {
1084-
background: linear-gradient(135deg, #1e293b 0%, #3b82f6 50%, #7c3aed 100%);
1085-
color: #f8fafc;
1086-
font-size: 1.1rem;
1087-
font-weight: 700;
1088-
padding: 1.2rem 2.5rem;
1089-
border-radius: 1rem;
1090-
box-shadow: 0 10px 25px rgba(0, 114, 255, 0.35);
1091-
transition: all 0.3s ease;
1092-
margin-bottom: 20px;
1141+
background: linear-gradient(135deg, #1e293b 0%, #3b82f6 50%, #7c3aed 100%);
1142+
color: #f8fafc;
1143+
font-size: 1.1rem;
1144+
font-weight: 700;
1145+
padding: 1.2rem 2.5rem;
1146+
border-radius: 1rem;
1147+
box-shadow: 0 10px 25px rgba(0, 114, 255, 0.35);
1148+
transition: all 0.3s ease;
1149+
margin-bottom: 20px;
10931150
}
10941151

10951152
.info-item {
@@ -1166,78 +1223,78 @@ body.dark-theme {
11661223
}
11671224

11681225
.btn-icon {
1169-
display: flex;
1170-
align-items: center;
1171-
justify-content: center;
1172-
margin-right: 8px;
1226+
display: flex;
1227+
align-items: center;
1228+
justify-content: center;
1229+
margin-right: 8px;
11731230
}
11741231

11751232
.icon {
1176-
--arrow-y: 0;
1177-
--arrow-rotate: 135;
1178-
--arrow-top: 10px;
1179-
width: 24px;
1180-
height: 24px;
1181-
position: relative;
1182-
display: inline-block;
1183-
vertical-align: top;
1184-
pointer-events: none;
1233+
--arrow-y: 0;
1234+
--arrow-rotate: 135;
1235+
--arrow-top: 10px;
1236+
width: 24px;
1237+
height: 24px;
1238+
position: relative;
1239+
display: inline-block;
1240+
vertical-align: top;
1241+
pointer-events: none;
11851242
}
11861243

11871244
.icon .dot {
1188-
border-radius: 50%;
1189-
background: #fff;
1190-
position: absolute;
1191-
left: 0;
1192-
top: 0;
1193-
width: 4px;
1194-
height: 4px;
1245+
border-radius: 50%;
1246+
background: #fff;
1247+
position: absolute;
1248+
left: 0;
1249+
top: 0;
1250+
width: 4px;
1251+
height: 4px;
11951252
}
11961253

11971254
.icon .arrow,
11981255
.icon .line {
1199-
position: absolute;
1200-
z-index: 1;
1256+
position: absolute;
1257+
z-index: 1;
12011258
}
12021259

12031260
.icon .arrow {
1204-
left: 11px;
1205-
top: 4px;
1206-
width: 2px;
1207-
height: 12px;
1208-
border-radius: 1px;
1209-
background: #fff;
1210-
transform: translateY(calc(var(--arrow-y) * 1px)) translateZ(0);
1261+
left: 11px;
1262+
top: 4px;
1263+
width: 2px;
1264+
height: 12px;
1265+
border-radius: 1px;
1266+
background: #fff;
1267+
transform: translateY(calc(var(--arrow-y) * 1px)) translateZ(0);
12111268
}
12121269

12131270
.icon .arrow:before,
12141271
.icon .arrow:after {
1215-
content: "";
1216-
width: 2px;
1217-
height: 7px;
1218-
position: absolute;
1219-
left: 0;
1220-
top: var(--arrow-top);
1221-
border-radius: 1px;
1222-
background: inherit;
1223-
transform-origin: 1px 1px;
1224-
transform: rotate(var(--r, calc(var(--arrow-rotate) * 1deg)));
1272+
content: "";
1273+
width: 2px;
1274+
height: 7px;
1275+
position: absolute;
1276+
left: 0;
1277+
top: var(--arrow-top);
1278+
border-radius: 1px;
1279+
background: inherit;
1280+
transform-origin: 1px 1px;
1281+
transform: rotate(var(--r, calc(var(--arrow-rotate) * 1deg)));
12251282
}
12261283

12271284
.icon .arrow:after {
1228-
--r: calc(var(--arrow-rotate) * -1deg);
1285+
--r: calc(var(--arrow-rotate) * -1deg);
12291286
}
12301287

12311288
.icon .line {
1232-
width: 24px;
1233-
height: 24px;
1234-
left: 0;
1235-
top: 7px;
1236-
fill: none;
1237-
stroke: #fff;
1238-
stroke-width: 2;
1239-
stroke-linejoin: round;
1240-
stroke-linecap: round;
1289+
width: 24px;
1290+
height: 24px;
1291+
left: 0;
1292+
top: 7px;
1293+
fill: none;
1294+
stroke: #fff;
1295+
stroke-width: 2;
1296+
stroke-linejoin: round;
1297+
stroke-linecap: round;
12411298
}
12421299

12431300

‎docs/index.html‎

Lines changed: 86 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -48,14 +48,93 @@
4848
<a href="#download" class="nav-link">Download</a>
4949
<a href="https://github.com/HarshDev625/TimeMachine" class="nav-link" target="_blank">GitHub</a>
5050
</div>
51-
<div id="themeToggleBtn" class="theme-toggle-btn" aria-label="Toggle theme">
52-
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="1.5em" height="1.5em"
53-
fill="currentColor" class="theme-toggle__inner-moon" viewBox="0 0 32 32">
54-
<path
55-
d="M27.5 11.5v-7h-7L16 0l-4.5 4.5h-7v7L0 16l4.5 4.5v7h7L16 32l4.5-4.5h7v-7L32 16l-4.5-4.5zM16 25.4a9.39 9.39 0 1 1 0-18.8 9.39 9.39 0 1 1 0 18.8z" />
56-
<circle cx="16" cy="16" r="8.1" />
51+
<label id="theme-toggle-button">
52+
<input type="checkbox" id="toggle">
53+
<svg viewBox="0 0 69.667 44" xmlns:xlink="http://www.w3.org/1999/xlink"
54+
xmlns="http://www.w3.org/2000/svg">
55+
<g transform="translate(3.5 3.5)" data-name="Component 15 – 1" id="Component_15_1">
56+
57+
58+
<g filter="url(#container)" transform="matrix(1, 0, 0, 1, -3.5, -3.5)">
59+
<rect fill="#83cbd8" transform="translate(3.5 3.5)" rx="17.5" height="35" width="60.667"
60+
data-name="container" id="container"></rect>
61+
</g>
62+
63+
<g transform="translate(2.333 2.333)" id="button">
64+
65+
<g data-name="sun" id="sun">
66+
<g filter="url(#sun-outer)" transform="matrix(1, 0, 0, 1, -5.83, -5.83)">
67+
<circle fill="#f8e664" transform="translate(5.83 5.83)" r="15.167" cy="15.167"
68+
cx="15.167" data-name="sun-outer" id="sun-outer-2"></circle>
69+
</g>
70+
<g filter="url(#sun)" transform="matrix(1, 0, 0, 1, -5.83, -5.83)">
71+
<path fill="rgba(246,254,247,0.29)" transform="translate(9.33 9.33)"
72+
d="M11.667,0A11.667,11.667,0,1,1,0,11.667,11.667,11.667,0,0,1,11.667,0Z"
73+
data-name="sun" id="sun-3"></path>
74+
</g>
75+
<circle fill="#fcf4b9" transform="translate(8.167 8.167)" r="7" cy="7" cx="7"
76+
id="sun-inner"></circle>
77+
</g>
78+
79+
80+
<g data-name="moon" id="moon">
81+
<g filter="url(#moon)" transform="matrix(1, 0, 0, 1, -31.5, -5.83)">
82+
<circle fill="#cce6ee" transform="translate(31.5 5.83)" r="15.167" cy="15.167"
83+
cx="15.167" data-name="moon" id="moon-3"></circle>
84+
</g>
85+
<g fill="#a6cad0" transform="translate(-24.415 -1.009)" id="patches">
86+
<circle transform="translate(43.009 4.496)" r="2" cy="2" cx="2"></circle>
87+
<circle transform="translate(39.366 17.952)" r="2" cy="2" cx="2" data-name="patch">
88+
</circle>
89+
<circle transform="translate(33.016 8.044)" r="1" cy="1" cx="1" data-name="patch">
90+
</circle>
91+
<circle transform="translate(51.081 18.888)" r="1" cy="1" cx="1" data-name="patch">
92+
</circle>
93+
<circle transform="translate(33.016 22.503)" r="1" cy="1" cx="1" data-name="patch">
94+
</circle>
95+
<circle transform="translate(50.081 10.53)" r="1.5" cy="1.5" cx="1.5"
96+
data-name="patch"></circle>
97+
</g>
98+
</g>
99+
</g>
100+
101+
102+
<g filter="url(#cloud)" transform="matrix(1, 0, 0, 1, -3.5, -3.5)">
103+
<path fill="#fff" transform="translate(-3466.47 -160.94)"
104+
d="M3512.81,173.815a4.463,4.463,0,0,1,2.243.62.95.95,0,0,1,.72-1.281,4.852,4.852,0,0,1,2.623.519c.034.02-.5-1.968.281-2.716a2.117,2.117,0,0,1,2.829-.274,1.821,1.821,0,0,1,.854,1.858c.063.037,2.594-.049,3.285,1.273s-.865,2.544-.807,2.626a12.192,12.192,0,0,1,2.278.892c.553.448,1.106,1.992-1.62,2.927a7.742,7.742,0,0,1-3.762-.3c-1.28-.49-1.181-2.65-1.137-2.624s-1.417,2.2-2.623,2.2a4.172,4.172,0,0,1-2.394-1.206,3.825,3.825,0,0,1-2.771.774c-3.429-.46-2.333-3.267-2.2-3.55A3.721,3.721,0,0,1,3512.81,173.815Z"
105+
data-name="cloud" id="cloud"></path>
106+
</g>
107+
108+
109+
<g fill="#def8ff" transform="translate(3.585 1.325)" id="stars">
110+
<path transform="matrix(-1, 0.017, -0.017, -1, 24.231, 3.055)"
111+
d="M.774,0,.566.559,0,.539.458.933.25,1.492l.485-.361.458.394L1.024.953,1.509.592.943.572Z">
112+
</path>
113+
<path transform="matrix(-0.777, 0.629, -0.629, -0.777, 23.185, 12.358)"
114+
d="M1.341.529.836.472.736,0,.505.46,0,.4.4.729l-.231.46L.605.932l.4.326L.9.786Z"
115+
data-name="star"></path>
116+
<path transform="matrix(0.438, 0.899, -0.899, 0.438, 23.177, 29.735)"
117+
d="M.015,1.065.475.9l.285.365L.766.772l.46-.164L.745.494.751,0,.481.407,0,.293.285.658Z"
118+
data-name="star"></path>
119+
<path transform="translate(12.677 0.388) rotate(104)"
120+
d="M1.161,1.6,1.059,1,1.574.722.962.607.86,0,.613.572,0,.457.446.881.2,1.454l.516-.274Z"
121+
data-name="star"></path>
122+
<path transform="matrix(-0.07, 0.998, -0.998, -0.07, 11.066, 15.457)"
123+
d="M.873,1.648l.114-.62L1.579.945,1.03.62,1.144,0,.706.464.157.139.438.7,0,1.167l.592-.083Z"
124+
data-name="star"></path>
125+
<path transform="translate(8.326 28.061) rotate(11)"
126+
d="M.593,0,.638.724,0,.982l.7.211.045.724.36-.64.7.211L1.342.935,1.7.294,1.063.552Z"
127+
data-name="star"></path>
128+
<path transform="translate(5.012 5.962) rotate(172)"
129+
d="M.816,0,.5.455,0,.311.323.767l-.312.455.516-.215.323.456L.827.911,1.343.7.839.552Z"
130+
data-name="star"></path>
131+
<path transform="translate(2.218 14.616) rotate(169)"
132+
d="M1.261,0,.774.571.114.3.487.967,0,1.538.728,1.32l.372.662.047-.749.728-.218L1.215.749Z"
133+
data-name="star"></path>
134+
</g>
135+
</g>
57136
</svg>
58-
</div>
137+
</label>
59138

60139

61140
<button class="mobile-menu-btn" aria-label="Menu">

0 commit comments

Comments
 (0)