Skip to content

Commit e6f9b8c

Browse files
committed
new style
1 parent ce62cfb commit e6f9b8c

File tree

2 files changed

+48
-27
lines changed

2 files changed

+48
-27
lines changed

src/js/toggle.js

Lines changed: 17 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -19,36 +19,44 @@ function calculateSettingAsThemeString({
1919

2020
/* Function to update the button text and aria-label. */
2121
function updateButton({ buttonEl, isDark }) {
22-
// const newCta = isDark ? "Change to light theme" : "Change to dark theme";
23-
const newCta = isDark ? "🌗" : "🌓";
24-
// use an aria-label if you are omitting text on the button
25-
// and using a sun/moon icon, for example
22+
const newCta = isDark ? "Change to light theme" : "Change to dark theme";
23+
const icon = isDark ? "☀️" : "🌙";
2624
buttonEl.setAttribute("aria-label", newCta);
27-
buttonEl.innerText = newCta;
25+
buttonEl.innerHTML = icon;
2826
}
2927

3028
/* Utility function to update the theme setting on the html tag */
3129
function updateThemeOnHtmlEl({ theme }) {
3230
document.querySelector("html").setAttribute("data-theme", theme);
3331
}
3432

33+
// Listen for system theme changes
34+
function handleSystemThemeChange(e) {
35+
if (!localStorage.getItem("theme")) {
36+
const newTheme = e.matches ? "dark" : "light";
37+
updateButton({ buttonEl: button, isDark: newTheme === "dark" });
38+
updateThemeOnHtmlEl({ theme: newTheme });
39+
currentThemeSetting = newTheme;
40+
}
41+
}
42+
3543
/* On page load: */
36-
/* 1. Grab what we need from the DOM and system settings on page load */
3744
const button = document.querySelector("[data-theme-toggle]");
3845
const localStorageTheme = localStorage.getItem("theme");
3946
const systemSettingDark = window.matchMedia("(prefers-color-scheme: dark)");
4047

41-
/* 2. Work out the current site settings */
4248
let currentThemeSetting = calculateSettingAsThemeString({
4349
localStorageTheme,
4450
systemSettingDark,
4551
});
4652

47-
/* 3. Update the theme setting and button text accoridng to current settings */
53+
// Initialize the button and theme
4854
updateButton({ buttonEl: button, isDark: currentThemeSetting === "dark" });
4955
updateThemeOnHtmlEl({ theme: currentThemeSetting });
5056

51-
/* 4. Add an event listener to toggle the theme */
57+
// Add event listeners
58+
systemSettingDark.addListener(handleSystemThemeChange);
59+
5260
button.addEventListener("click", (event) => {
5361
const newTheme = currentThemeSetting === "dark" ? "light" : "dark";
5462

src/styles.css

Lines changed: 31 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
/* Common */
1717
--border-radius: 8px;
1818
--transition-speed: 0.3s;
19-
--max-width: 80ch;
19+
--max-width: 90ch;
2020
--font-sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
2121
}
2222

@@ -39,7 +39,7 @@
3939
textarea,
4040
[data-theme="light"],
4141
[data-theme="dark"] {
42-
transition: all 0.4s ease-in-out;
42+
transition: all var(--transition-speed) ease-in-out;
4343
}
4444

4545
* {
@@ -79,16 +79,19 @@ header {
7979
gap: 0.75rem;
8080
font-size: 1.5rem;
8181
font-weight: 600;
82+
color: var(--text-color);
8283
}
8384

8485
main {
8586
flex: 1;
8687
width: 100%;
88+
display: flex;
89+
flex-direction: column;
8790
}
8891

8992
footer {
9093
margin-top: 2rem;
91-
text-align: center;
94+
/* text-align: center; */
9295
font-size: 0.875rem;
9396
color: var(--text-color);
9497
opacity: 0.8;
@@ -99,12 +102,14 @@ textarea {
99102
color: var(--text-color);
100103
padding: 1.25rem;
101104
width: 100%;
105+
flex: 1;
106+
min-height: 0;
102107
border: 1px solid var(--alt-color);
103108
border-radius: var(--border-radius);
104109
font-family: inherit;
105110
font-size: 1rem;
106111
line-height: 1.6;
107-
resize: vertical;
112+
resize: none;
108113
transition: border-color var(--transition-speed) ease-in-out,
109114
background var(--transition-speed) ease-in-out;
110115
}
@@ -115,16 +120,34 @@ textarea:focus {
115120
}
116121

117122
button[data-theme-toggle] {
118-
background: transparent;
123+
background: var(--alt-color);
119124
border: none;
120125
cursor: pointer;
121126
padding: 0.5rem;
122-
border-radius: var(--border-radius);
123-
transition: background-color var(--transition-speed) ease-in-out;
127+
width: 30px;
128+
height: 30px;
129+
font-size: 1rem;
130+
border-radius: 50%;
131+
display: flex;
132+
align-items: center;
133+
justify-content: center;
134+
position: relative;
135+
transition: all var(--transition-speed) ease-in-out;
136+
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
124137
}
125138

126139
button[data-theme-toggle]:hover {
127-
background-color: var(--alt-color);
140+
transform: scale(1.1);
141+
background-color: var(--accent-color);
142+
color: var(--bg-color);
143+
}
144+
145+
button[data-theme-toggle]:active {
146+
transform: scale(0.95);
147+
}
148+
149+
[data-theme="dark"] button[data-theme-toggle] {
150+
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
128151
}
129152

130153
.heart {
@@ -135,14 +158,4 @@ button[data-theme-toggle]:hover {
135158

136159
.heart:hover {
137160
color: #ff6b6b;
138-
}
139-
140-
@media (max-width: 768px) {
141-
body {
142-
padding: 0.75rem;
143-
}
144-
145-
.nav-title {
146-
font-size: 1.25rem;
147-
}
148161
}

0 commit comments

Comments
 (0)