https://github.com/huphtur/tailwind-theme-switcher

Basic demo on how to switch styles with Tailwind, handy for dark mode type purposes.
https://github.com/huphtur/tailwind-theme-switcher

dark-mode dark-theme javascript localstorage tailwindcss

Last synced: 2 days ago
JSON representation

Basic demo on how to switch styles with Tailwind, handy for dark mode type purposes.

• Host: GitHub
• URL: https://github.com/huphtur/tailwind-theme-switcher
• Owner: huphtur
• Created: 2019-05-20T23:46:10.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2024-10-11T15:53:21.000Z (4 months ago)
• Last Synced: 2025-01-25T14:07:59.675Z (9 days ago)
• Topics: dark-mode, dark-theme, javascript, localstorage, tailwindcss
• Language: Liquid
• Homepage: https://tailwind-theme-switcher.netlify.app/
• Size: 53.7 KB
• Stars: 189
• Watchers: 2
• Forks: 12
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-tailwindcss - Tailwind Dark Mode Theme Switcher - Switching themes with CSS Custom Properties and Tailwind CSS. (Learning)

README

        
# Tailwind Dark Mode Theme Switcher

Basic demo on how to switch styles with Tailwind, handy for dark mode type purposes. 

Live preview: https://tailwind-theme-switcher.netlify.app/

This is a mashup of Adam Wathan's [Theming Tailwind Demo](https://github.com/adamwathan/theming-tailwind-demo), [Hella Simple Eleventy + Tailwind CSS Starter](https://github.com/huphtur/hella-simple-eleventy-tailwind-starter), and Katie Ball's [Quick switch Themes with javascript](https://gist.github.com/roachhd/698db516c17bb130c495/).

## To get started

1. Clone the repository:

    ```bash

    git clone https://github.com/huphtur/tailwind-theme-switcher

    cd tailwind-theme-switcher

    ```

2. Install the dependencies:

    ```bash

    # Using npm

    npm install

    # Using Yarn

    yarn

    ```

3. Start the development server:

    ```bash

    # Using npm

    npm run serve

    # Using Yarn

    yarn serve

    ```

    Now you should be able to see the project running at localhost:8080

## Building for production

To build an optimized version of your CSS, simply run:

```bash

# Using npm

npm run build

# Using Yarn

yarn build

```

After that's done, check out `./_site/styles.css` to see the optimized output.