Created
May 24, 2023 14:52
-
-
Save psynt/5620f3e381947d135c5bbe0d1d5fede1 to your computer and use it in GitHub Desktop.
Theme chooser using only HTML and CSS
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| :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; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!Doctype html> | |
| <html lang="en"> | |
| <head> | |
| <title>Theme Chooser CSS</title> | |
| <link rel="stylesheet" href="themes.css"> | |
| <link rel="stylesheet" href="main.css"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| </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> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment