https://github.com/alexwhitmore/simple-themes

Drop in dark mode in with theme preference and no flashes of unstyled content.
https://github.com/alexwhitmore/simple-themes

astro css dark-mode dark-theme html javascript themes

Last synced: 13 days ago
JSON representation

Drop in dark mode in with theme preference and no flashes of unstyled content.

• Host: GitHub
• URL: https://github.com/alexwhitmore/simple-themes
• Owner: alexwhitmore
• Created: 2023-10-16T23:06:47.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2023-12-05T05:46:26.000Z (12 months ago)
• Last Synced: 2024-04-23T23:05:18.024Z (7 months ago)
• Topics: astro, css, dark-mode, dark-theme, html, javascript, themes
• Language: JavaScript
• Homepage:
• Size: 86.9 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Simple Themes

Drop in dark mode with 2 lines of code with `prefers-color-scheme` and no flash of unstyled content (FOUC)!

> [!WARNING]

> This project is a WIP, and should not be used in a production environment yet.

## HTML Set up

CDN link to be used in your project

```html

```

index.html

```html

  

    

    

    

    

  

  

    Toggle Theme

  

```

styles.css

```css

:root,

html[data-theme='light'] {

  background-color: white;

  color: black;

}

html[data-theme='dark'] {

  background-color: black;

  color: white;

}

```

## [Astro](https://github.com/withastro/astro) Set Up

src/pages/index.astro

```astro

---

import '../styles/globals.css'

---

  

    

  

  

    Toggle Theme

  

```

src/styles/globals.css

```css

:root,

html[data-theme='light'] {

  background-color: white;

  color: black;

}

html[data-theme='dark'] {

  background-color: black;

  color: white;

}

```