Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision		Previous revision
blog:2025:0917astro_attempt [2025/09/18 01:00] – [NEXT!! MAKING THE SITE] scumsuckblog:2025:0917astro_attempt [2025/09/21 00:22] (current) – [Color toggle] scumsuck
Line 5: Line 5:
   - Opened up VS Codium   - Opened up VS Codium
   - Opened up terminal   - Opened up terminal
-  - ran ``npm create astro@latest`` as per tutorial+  - ran ''npm create astro@latest'' as per tutorial
   - gave it a folder to build in ``Z:\sites\big-mountain-fudgecake``   - gave it a folder to build in ``Z:\sites\big-mountain-fudgecake``
   - said yes to everything like installing dependencies and initializing git   - said yes to everything like installing dependencies and initializing git
Line 13: Line 13:
 =====NEXT!! MAKING THE SITE===== =====NEXT!! MAKING THE SITE=====
  
-  - run ``npm run dev`` in the terminal to preview your gay site +  - run ''npm run dev'' in the terminal to preview your gay site 
-  - your site preview should be on ``http://localhost:4321/`` by default +  - your site preview should be on ''http://localhost:4321/''` by default 
-  - find ``src/pages/index.astro`` to edit your front page+  - find ''src/pages/index.astro'' to edit your front page
   - edit it   - edit it
   - save   - save
Line 24: Line 24:
   - wait for it to generate SSL certificate   - wait for it to generate SSL certificate
   - ok it's live: https://fudgecak.scumsuck.com/   - ok it's live: https://fudgecak.scumsuck.com/
-  - make a new page in ``pages`` called ``about.astro`` +  - make a new page in ''pages'' called ''about.astro'' 
-  - type some shit in there, copy/paste what was in index.astro+  - type some shit in there, copy/paste what was in ''index.astro''
   - Did the markdown tutorial i already know that   - Did the markdown tutorial i already know that
   - on the [[https://docs.astro.build/en/tutorial/2-pages/3/|"dynamic content"]] part so I can add their band roles...   - on the [[https://docs.astro.build/en/tutorial/2-pages/3/|"dynamic content"]] part so I can add their band roles...
Line 39: Line 39:
 Stylize it tomorrow Stylize it tomorrow
  
 +===== Color toggle =====
 +
 +I'm copying this guide: [[https://www.smashingmagazine.com/2024/03/setting-persisting-color-scheme-preferences-css-javascript/|Setting And Persisting Color Scheme Preferences With CSS And A “Touch” Of JavaScript]] by Henry Bley-Vroman
 +
 +I am specifically using this guide because it uses the default light/dark css themes that don't require any CSS, and allows the user to override it if they want to choose another theme.
 +
 +I specifically want the ability to change background images, not just background color.  I want the default mode to be "dark mode" so there's no "FART"(([[https://css-tricks.com/flash-of-inaccurate-color-theme-fart/|Flash of inAccurate coloR Theme]])).  And I want the ease-in-ease-out color transitions to be optional.  So this is in my ''global.CSS'':
 +
 +<code>
 +:root {
 +  /* dark style, dark = default */
 +  color-scheme: var(--color-scheme, dark);
 +  --bg: url('/img/bg.jpg');
 +  transition-duration: 200ms;
 +  transition-property: background, background-color, color;
 +
 +  /* page preference is "dark" */
 +  &:has(#color-scheme option[value="light"]:checked) {
 +    --color-scheme: light;
 +    /* any additional dark styles */
 +    --bg: url('/img/bg-light.jpg');
 +  }
 +    
 +  /* page preference is "system", and system preference is "dark" */
 +  @media (prefers-color-scheme: light) {
 +    &:has(#color-scheme option[value="system"]:checked) {
 +      --color-scheme: light;
 +      /* any additional dark styles, again */
 +    }
 +  }
 +
 + @media screen and (prefers-reduced-motion: reduce), (update: slow) {
 +    transition-duration: 0s;
 +  }
 +}
 +</code>
 +
 +And this is in my ''Toggle.astro'', which is contained in my ''SidebarLeft.astro'' component and makes up my navigation.
 +
 +<code>
 +
 +
 +/*
 + * If a color scheme preference was previously stored,
 + * select the corresponding option in the color scheme preference UI
 + * unless it is already selected.
 + */
 +function restoreColorSchemePreference() {
 +  const colorScheme = localStorage.getItem(colorSchemeStorageItemName);
 +
 +  if (!colorScheme) {
 +    return;
 +  }
 +
 +  const option = colorSchemeSelectorEl.querySelector(`[value=${colorScheme}]`);
 +
 +  if (!option) {
 +    localStorage.removeItem(colorSchemeStorageItemName);
 +    return;
 +  }
 +
 +  if (option.selected) {
 +    return;
 +  }
 +
 +  option.selected = true;
 +}
 +
 +/*
 + * Store an event target's value in localStorage under colorSchemeStorageItemName
 + */
 +function storeColorSchemePreference({ target }) {
 +  const colorScheme = target.querySelector(":checked").value;
 +  localStorage.setItem(colorSchemeStorageItemName, colorScheme);
 +}
 +
 +const colorSchemeStorageItemName = "preferredColorScheme";
 +
 +const colorSchemeSelectorEl = document.querySelector("#color-scheme");
 +
 +if (colorSchemeSelectorEl) {
 +  restoreColorSchemePreference();
 +
 +  colorSchemeSelectorEl.addEventListener("input", storeColorSchemePreference);
 +}
 +
 +
 +</code>
 +
 +Don't ask me what any of this means LOL I just copy/pasted someone else's code in the places that make it work on my site...