psynt/index.html

## index.html
<head>
    <title>Theme Chooser CSS</title>
    <link rel="stylesheet" href="themes.css">
    <link rel="stylesheet" href="main.css">
    <script src="themes.js" defer></script>
</head>
<body>
    <form class="color-picker" action="">
    <fieldset>
        <legend class="visually-hidden">Pick a color scheme</legend>
        <label for="light" class="visually-hidden">Light</label>
        <input type="radio" name="theme" value="light" checked>

        <label for="dark" class="visually-hidden">Dark theme</label>
        <input type="radio" value="dark" name="theme">
    </fieldset>
    </form>

    <main>
    <div class="wrapper">
        <h1>Color theme's the easy way</h1>
        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Obcaecati natus error quam suscipit architecto enim
        nobis vero eaque. Repudiandae quisquam impedit fugiat neque delectus doloremque!</p>
        <p>Rem neque inventore necessitatibus totam incidunt eius reprehenderit quis ipsam officia praesentium, quod vero
        soluta maxime iure nobis dolorum a quibusdam officiis ratione debitis? Ipsam.</p>
        <h2>Something interesting</h2>
        <div class="auto-grid">
        <div class="card">
            <h3 class="card__title">A medium-length title</h3>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellendus, atque.</p>
        </div>
        <div class="card">
            <h3 class="card__title">A short title</h3>
            <p>Voluptatem excepturi tempore quo recusandae sunt ullam earum optio cum?</p>
        </div>
        <div class="card">
            <h3 class="card__title">A medium-length title</h3>
            <p>Nam laudantium voluptas, tenetur repellendus numquam rem incidunt deleniti veritatis?</p>
        </div>
        <div class="card">
            <h3 class="card__title">A much longer title than the others</h3>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellendus, atque.</p>
        </div>
        <div class="card">
            <h3 class="card__title">A medium-legth title</h3>
            <p>Voluptatem excepturi tempore quo recusandae sunt ullam earum optio cum?</p>
        </div>
        <div class="card">
            <h3 class="card__title">A short title</h3>
            <p>Nam laudantium voluptas, tenetur repellendus numquam rem incidunt deleniti veritatis?</p>
        </div>
        </div>
        <p>Rerum, neque! Consequuntur obcaecati beatae dolorum, fuga itaque iusto dicta et corporis facere ea
        necessitatibus
        odit cum, voluptates harum, dolore maiores aliquid distinctio repellendus nesciunt!</p>
        <p>Unde dolor quod delectus obcaecati labore laboriosam optio sit eligendi. Excepturi explicabo quod obcaecati
        pariatur error, in, accusantium eum omnis repellat qui, aliquid magnam odit?</p>
    </div>
    </main>
</body>

## main.css
body {
  margin: 0;
  font-family: system-ui, sans-serif;
  font-size: 1.25rem;
  line-height: 1.5;
  background: var(--clr-body-bg);
  color: var(--clr-text);
}

h1,
h2,
h3 {
  color: var(--clr-heading);
  line-height: 1.1;
}

.auto-grid {
  --min-column-size: 225px;

  display: grid;
  gap: clamp(1rem, 5vmax, 1.625rem);
  grid-template-columns: repeat(
    auto-fit,
    minmax(min(100%, var(--min-column-size)), 1fr)
  );
}

.wrapper {
  --max-width: 55rem;
  width: min(100% - 2rem, var(--max-width));
  margin-inline: auto;
}

.card {
  padding: 1rem;
  background-color: var(--clr-card-bg);
  border-block-start: 0.5rem solid;
  border-radius: 0.5rem;
}

.card > * {
  margin: 0;
}

.card > *:not(:last-child) {
  margin-bottom: 0.75rem;
}

## themes.css
:root {
  --clr-body-bg: hsl(0 0% 90%);
  --clr-card-bg: hsl(0 0% 100%);
  --clr-text: hsl(0 0% 15%);
  --clr-heading: hsl(0 0% 25%);
}

.dark,
:root:has([value="dark"]:checked) {
  --clr-body-bg: hsl(209 50% 10%);
  --clr-card-bg: hsl(209 50% 5%);
  --clr-text: hsl(209 50% 90%);
  --clr-heading: hsl(209 50% 80%);
}

.visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.color-picker > fieldset {
  border: 0;
  display: flex;
  gap: 2rem;
  width: fit-content;
  background: #fff;
  padding: 1rem 3rem;
  margin-inline: auto;
  border-radius: 0 0 1rem 1rem;
}

.color-picker input[type="radio"] {
  appearance: none;
  width: 1.5rem;
  height: 1.5rem;
  outline: 3px solid var(--radio-color, currentColor);
  outline-offset: 3px;
  border-radius: 50%;
}

.color-picker input[type="radio"]:checked {
  background-color: var(--radio-color);
}

.color-picker input[value="light"]{
  --radio-color: gray;
}

.color-picker input[value="dark"]{
  --radio-color: #232323;
}

## themes.js
const themes = document.querySelectorAll('[name="theme"]');

const storeTheme = theme => {
    localStorage.setItem("theme", theme);
};

themes.forEach( choice => {
    choice.addEventListener('click', () => {
        storeTheme(choice.value)
    });
} );


const setTheme = function () {
    const active = localStorage.getItem("theme");
    themes.forEach( choice => {
        if (choice.value === active) {
            choice.checked = true;
        }
    });
};

document.onLoad = setTheme();
	<head>
	<title>Theme Chooser CSS</title>
	<link rel="stylesheet" href="themes.css">
	<link rel="stylesheet" href="main.css">
	<script src="themes.js" defer></script>
	</head>
	<body>
	<form class="color-picker" action="">
	<fieldset>
	<legend class="visually-hidden">Pick a color scheme</legend>
	<label for="light" class="visually-hidden">Light</label>
	<input type="radio" name="theme" value="light" checked>

	<label for="dark" class="visually-hidden">Dark theme</label>
	<input type="radio" value="dark" name="theme">
	</fieldset>
	</form>

	<main>
	<div class="wrapper">
	<h1>Color theme's the easy way</h1>
	<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Obcaecati natus error quam suscipit architecto enim
	nobis vero eaque. Repudiandae quisquam impedit fugiat neque delectus doloremque!</p>
	<p>Rem neque inventore necessitatibus totam incidunt eius reprehenderit quis ipsam officia praesentium, quod vero
	soluta maxime iure nobis dolorum a quibusdam officiis ratione debitis? Ipsam.</p>
	<h2>Something interesting</h2>
	<div class="auto-grid">
	<div class="card">
	<h3 class="card__title">A medium-length title</h3>
	<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellendus, atque.</p>
	</div>
	<div class="card">
	<h3 class="card__title">A short title</h3>
	<p>Voluptatem excepturi tempore quo recusandae sunt ullam earum optio cum?</p>
	</div>
	<div class="card">
	<h3 class="card__title">A medium-length title</h3>
	<p>Nam laudantium voluptas, tenetur repellendus numquam rem incidunt deleniti veritatis?</p>
	</div>
	<div class="card">
	<h3 class="card__title">A much longer title than the others</h3>
	<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellendus, atque.</p>
	</div>
	<div class="card">
	<h3 class="card__title">A medium-legth title</h3>
	<p>Voluptatem excepturi tempore quo recusandae sunt ullam earum optio cum?</p>
	</div>
	<div class="card">
	<h3 class="card__title">A short title</h3>
	<p>Nam laudantium voluptas, tenetur repellendus numquam rem incidunt deleniti veritatis?</p>
	</div>
	</div>
	<p>Rerum, neque! Consequuntur obcaecati beatae dolorum, fuga itaque iusto dicta et corporis facere ea
	necessitatibus
	odit cum, voluptates harum, dolore maiores aliquid distinctio repellendus nesciunt!</p>
	<p>Unde dolor quod delectus obcaecati labore laboriosam optio sit eligendi. Excepturi explicabo quod obcaecati
	pariatur error, in, accusantium eum omnis repellat qui, aliquid magnam odit?</p>
	</div>
	</main>
	</body>
	body {
	margin: 0;
	font-family: system-ui, sans-serif;
	font-size: 1.25rem;
	line-height: 1.5;
	background: var(--clr-body-bg);
	color: var(--clr-text);
	}

	h1,
	h2,
	h3 {
	color: var(--clr-heading);
	line-height: 1.1;
	}

	.auto-grid {
	--min-column-size: 225px;

	display: grid;
	gap: clamp(1rem, 5vmax, 1.625rem);
	grid-template-columns: repeat(
	auto-fit,
	minmax(min(100%, var(--min-column-size)), 1fr)
	);
	}

	.wrapper {
	--max-width: 55rem;
	width: min(100% - 2rem, var(--max-width));
	margin-inline: auto;
	}

	.card {
	padding: 1rem;
	background-color: var(--clr-card-bg);
	border-block-start: 0.5rem solid;
	border-radius: 0.5rem;
	}

	.card > * {
	margin: 0;
	}

	.card > *:not(:last-child) {
	margin-bottom: 0.75rem;
	}
	:root {
	--clr-body-bg: hsl(0 0% 90%);
	--clr-card-bg: hsl(0 0% 100%);
	--clr-text: hsl(0 0% 15%);
	--clr-heading: hsl(0 0% 25%);
	}

	.dark,
	:root:has([value="dark"]:checked) {
	--clr-body-bg: hsl(209 50% 10%);
	--clr-card-bg: hsl(209 50% 5%);
	--clr-text: hsl(209 50% 90%);
	--clr-heading: hsl(209 50% 80%);
	}

	.visually-hidden {
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
	}

	.color-picker > fieldset {
	border: 0;
	display: flex;
	gap: 2rem;
	width: fit-content;
	background: #fff;
	padding: 1rem 3rem;
	margin-inline: auto;
	border-radius: 0 0 1rem 1rem;
	}

	.color-picker input[type="radio"] {
	appearance: none;
	width: 1.5rem;
	height: 1.5rem;
	outline: 3px solid var(--radio-color, currentColor);
	outline-offset: 3px;
	border-radius: 50%;
	}

	.color-picker input[type="radio"]:checked {
	background-color: var(--radio-color);
	}

	.color-picker input[value="light"]{
	--radio-color: gray;
	}

	.color-picker input[value="dark"]{
	--radio-color: #232323;
	}
	const themes = document.querySelectorAll('[name="theme"]');

	const storeTheme = theme => {
	localStorage.setItem("theme", theme);
	};

	themes.forEach( choice => {
	choice.addEventListener('click', () => {
	storeTheme(choice.value)
	});
	} );


	const setTheme = function () {
	const active = localStorage.getItem("theme");
	themes.forEach( choice => {
	if (choice.value === active) {
	choice.checked = true;
	}
	});
	};

	document.onLoad = setTheme();