All Projects → huphtur → tailwind-theme-switcher

huphtur / tailwind-theme-switcher

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

Programming Languages

HTML
75241 projects
javascript
184084 projects - #8 most used programming language
CSS
56736 projects

Projects that are alternatives of or similar to tailwind-theme-switcher

Deep-DarkFantasy
Global Dark Mode for ALL apps on ANY platforms.
Stars: ✭ 16 (-90.24%)
Mutual labels:  dark-theme, dark-mode
hash-dark-vscode
A minimal dark vscode theme inspired by Hashnode blog syntax highlighting.
Stars: ✭ 12 (-92.68%)
Mutual labels:  dark-theme, dark-mode
vuejs-tailwindcss-portfolio
A simple multipage and responsive Vue.js & Tailwind CSS portfolio theme with dark mode.
Stars: ✭ 100 (-39.02%)
Mutual labels:  dark-mode, tailwindcss
bootstrap-darkmode
Stylesheet and scripts for implementing dark mode with Bootstrap 4
Stars: ✭ 38 (-76.83%)
Mutual labels:  dark-theme, dark-mode
tailwindcss-variables
Easily create css variables without the need for a css file!
Stars: ✭ 47 (-71.34%)
Mutual labels:  dark-mode, tailwindcss
Paper
A minimal notes application in Jetpack Compose with MVVM architecture. Built with components like DataStore, Coroutines, ViewModel, LiveData, Room, Navigation-Compose, Coil, koin etc.
Stars: ✭ 122 (-25.61%)
Mutual labels:  dark-theme, localstorage
CustomTkinter
A modern and customizable python UI-library based on Tkinter
Stars: ✭ 1,626 (+891.46%)
Mutual labels:  dark-theme, dark-mode
222
222. Dark mode. Everywhere. 222 bytes of js to make any website dark
Stars: ✭ 58 (-64.63%)
Mutual labels:  dark-theme, dark-mode
sketch-dark-mode
Generate a dark mode version of any Sketch document, the right way.
Stars: ✭ 58 (-64.63%)
Mutual labels:  dark-theme, dark-mode
wagtail-react-blog
SPA built with React, Tailwind CSS and Wagtail Rest API
Stars: ✭ 66 (-59.76%)
Mutual labels:  dark-mode, tailwindcss
dark-mode
Dark Mode - Chrome extension. Relax your eyes at night and day.
Stars: ✭ 63 (-61.59%)
Mutual labels:  dark-theme, dark-mode
gridsome-starter-liebling
Gridsome starter based on the Liebling theme for Ghost. Content is added via markdown, while Tailwind CSS is used for the layout/styling.
Stars: ✭ 21 (-87.2%)
Mutual labels:  dark-theme, tailwindcss
Raspberry-Pi-Dashboard
Web-based dashboard interface to inspect Raspberry Pi hardware and software with no extra software required.
Stars: ✭ 131 (-20.12%)
Mutual labels:  dark-theme, dark-mode
Nozha-rtl-Dashboard
Nozha is a rtl / ltr Admin Panel with Dark Mode
Stars: ✭ 31 (-81.1%)
Mutual labels:  dark-theme, dark-mode
VS2019-Dark-Npp
Visual Studio 2019 Dark Theme for Notepad++
Stars: ✭ 146 (-10.98%)
Mutual labels:  dark-theme, dark-mode
laravel-micro-spa-boilerplate
An "Advanced" SPA Boilerplate featuring a dark themed UI that's integrated with LaravelMicro.js, Vue.js, TailwindCSS & Laravel PHP Framework.
Stars: ✭ 23 (-85.98%)
Mutual labels:  dark-theme, tailwindcss
dark-mode-example
Simple and fun dark-mode detection. JavaScript with a user mode toggle.
Stars: ✭ 27 (-83.54%)
Mutual labels:  dark-theme, dark-mode
Light-Switch
Easily switch from light to dark theme, or the other way around, in Windows 10/11.
Stars: ✭ 25 (-84.76%)
Mutual labels:  dark-theme, dark-mode
DarkModeSplashScreen
A sample app for iOS and Android written in Xamarin.Forms showing how to implement a Splash Page for Dark Mode
Stars: ✭ 28 (-82.93%)
Mutual labels:  dark-theme, dark-mode
next.js-tailwindcss-template
Opinionated Next.js and TailwindCSS template.
Stars: ✭ 15 (-90.85%)
Mutual labels:  dark-mode, tailwindcss

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, Tailwind CSS Playground, and Katie Ball's Quick switch Themes with javascript.

To get started

  1. Clone the repository:

    git clone https://github.com/huphtur/tailwind-theme-switcher
    
    cd tailwind-theme-switcher
  2. Install the dependencies:

    # Using npm
    npm install
    
    # Using Yarn
    yarn
  3. Start the development server:

    # 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

cssnano included to optimize your CSS for production. PurgeCSS is handled by Tailwind!

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

# Using npm
npm run production

# Using Yarn
yarn production

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

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].