The words Under construction in black text on a yellow background with diagonal black stipes surrounding it
I'm in the process of moving my site. It's still a work in progress. Please excuse the mess and broken links.

Automatically Switch CSS Colors Between Light And Dark Mode Based On User Preference

TODO: Pull subtitle into page object
Code
:root {
  --text: hsl(167, 89%, 93%);
  --background: hsl(167, 90%, 4%);
}

@media (prefers-color-scheme: light) {
  :root {
    --text: hsl(0, 0%, 2%);
    --background: hsl(0, 0%, 98%);
  }
}

html {
  color-scheme: light dark;
}

body {
  background-color: var(--background);
  color: var(--text);
}


Notes

Debugging Stuff

I'm moving stuff around right now. All this below is helping me figure out where to put stuff

        -- title

Automatically Switch CSS Colors Between Light And Dark Mode Based On User Preference

This is how I'm switching the CSS colors on my site from 
light to dark depending on user preference. 


-- code 
-- css

:root {
  --text: hsl(167, 89%, 93%);
  --background: hsl(167, 90%, 4%);
}

@media (prefers-color-scheme: light) {
  :root {
    --text: hsl(0, 0%, 2%);
    --background: hsl(0, 0%, 98%);
  }
}

html {
  color-scheme: light dark;
}

body {
  background-color: var(--background);
  color: var(--text);
}




-- css 

:root {
  --text: hsl(167, 89%, 93%);
  --background: hsl(167, 90%, 4%);
  --primary: hsl(256, 91%, 79%);
  --secondary: hsl(346, 90%, 15%);
  --accent: hsl(76, 90%, 55%);
}

@media (prefers-color-scheme: light) {
  :root {
    --text: hsl(0, 0%, 2%);
    --background: hsl(0, 0%, 98%);
    --primary: hsl(256, 91%, 79%);
    --secondary: hsl(347, 88%, 90%);
    --accent: hsl(76, 91%, 50%);
  }
}

html {
  color-scheme: light dark;
}

body {
  background-color: var(--background);
  color: var(--primary);
}




-- notes

- The Kevin Powell video shows starting with light mode
then switching to dark. I flipped it around with the 
idea that I pref dark so if someone doesn't have
a setting it's the design I'd prefer to show. There's
no problem with that according to the MDN article.

- The only CSS on this page is what you see in the
code snippet. 


-- todo

[] Add a little more CSS to give at least a little
bit of layout


-- ref
-- title: How to make a nice site with less CSS
-- url: https://www.youtube.com/watch?v=RctP49SwyT0
-- subtitle: from Kevin Powell

-- ref
-- title: CSS prefers-color-scheme
-- url: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme
-- subtitle: (MDN)

-- ref
-- title: CSS color-scheme
-- url: https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme
-- subtitle: (MDN)

-- categories
-- CSS 
-- Accessability


-- metadata
-- date: 2023-07-16 22:41:22
-- id: 2sgie56k
-- site: aws
-- type: css-experiment 
-- status: scratch