new style

Author: semanticdata

src/js/toggle.js

@@ -19,36 +19,44 @@ function calculateSettingAsThemeString({
 
 /* Function to update the button text and aria-label. */
 function updateButton({ buttonEl, isDark }) {
-  // const newCta = isDark ? "Change to light theme" : "Change to dark theme";
-  const newCta = isDark ? "🌗" : "🌓";
-  // use an aria-label if you are omitting text on the button
-  // and using a sun/moon icon, for example
+  const newCta = isDark ? "Change to light theme" : "Change to dark theme";
+  const icon = isDark ? "☀️" : "🌙";
   buttonEl.setAttribute("aria-label", newCta);
-  buttonEl.innerText = newCta;
+  buttonEl.innerHTML = icon;
 }
 
 /* Utility function to update the theme setting on the html tag */
 function updateThemeOnHtmlEl({ theme }) {
   document.querySelector("html").setAttribute("data-theme", theme);
 }
 
+// Listen for system theme changes
+function handleSystemThemeChange(e) {
+  if (!localStorage.getItem("theme")) {
+    const newTheme = e.matches ? "dark" : "light";
+    updateButton({ buttonEl: button, isDark: newTheme === "dark" });
+    updateThemeOnHtmlEl({ theme: newTheme });
+    currentThemeSetting = newTheme;
+  }
+}
+
 /* On page load: */
-/* 1. Grab what we need from the DOM and system settings on page load */
 const button = document.querySelector("[data-theme-toggle]");
 const localStorageTheme = localStorage.getItem("theme");
 const systemSettingDark = window.matchMedia("(prefers-color-scheme: dark)");
 
-/* 2. Work out the current site settings */
 let currentThemeSetting = calculateSettingAsThemeString({
   localStorageTheme,
   systemSettingDark,
 });
 
-/* 3. Update the theme setting and button text accoridng to current settings */
+// Initialize the button and theme
 updateButton({ buttonEl: button, isDark: currentThemeSetting === "dark" });
 updateThemeOnHtmlEl({ theme: currentThemeSetting });
 
-/* 4. Add an event listener to toggle the theme */
+// Add event listeners
+systemSettingDark.addListener(handleSystemThemeChange);
+
 button.addEventListener("click", (event) => {
   const newTheme = currentThemeSetting === "dark" ? "light" : "dark";
 

src/styles.css

@@ -16,7 +16,7 @@
   /* Common */
   --border-radius: 8px;
   --transition-speed: 0.3s;
-  --max-width: 80ch;
+  --max-width: 90ch;
   --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
 }
 
@@ -39,7 +39,7 @@
 textarea,
 [data-theme="light"],
 [data-theme="dark"] {
-  transition: all 0.4s ease-in-out;
+  transition: all var(--transition-speed) ease-in-out;
 }
 
 * {
@@ -79,16 +79,19 @@ header {
   gap: 0.75rem;
   font-size: 1.5rem;
   font-weight: 600;
+  color: var(--text-color);
 }
 
 main {
   flex: 1;
   width: 100%;
+  display: flex;
+  flex-direction: column;
 }
 
 footer {
   margin-top: 2rem;
-  text-align: center;
+  /* text-align: center; */
   font-size: 0.875rem;
   color: var(--text-color);
   opacity: 0.8;
@@ -99,12 +102,14 @@ textarea {
   color: var(--text-color);
   padding: 1.25rem;
   width: 100%;
+  flex: 1;
+  min-height: 0;
   border: 1px solid var(--alt-color);
   border-radius: var(--border-radius);
   font-family: inherit;
   font-size: 1rem;
   line-height: 1.6;
-  resize: vertical;
+  resize: none;
   transition: border-color var(--transition-speed) ease-in-out,
     background var(--transition-speed) ease-in-out;
 }
@@ -115,16 +120,34 @@ textarea:focus {
 }
 
 button[data-theme-toggle] {
-  background: transparent;
+  background: var(--alt-color);
   border: none;
   cursor: pointer;
   padding: 0.5rem;
-  border-radius: var(--border-radius);
-  transition: background-color var(--transition-speed) ease-in-out;
+  width: 30px;
+  height: 30px;
+  font-size: 1rem;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  transition: all var(--transition-speed) ease-in-out;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
 }
 
 button[data-theme-toggle]:hover {
-  background-color: var(--alt-color);
+  transform: scale(1.1);
+  background-color: var(--accent-color);
+  color: var(--bg-color);
+}
+
+button[data-theme-toggle]:active {
+  transform: scale(0.95);
+}
+
+[data-theme="dark"] button[data-theme-toggle] {
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
 }
 
 .heart {
@@ -135,14 +158,4 @@ button[data-theme-toggle]:hover {
 
 .heart:hover {
   color: #ff6b6b;
-}
-
-@media (max-width: 768px) {
-  body {
-    padding: 0.75rem;
-  }
-
-  .nav-title {
-    font-size: 1.25rem;
-  }
 }