🌓 sthemer

A lightweight yet powerful solution to support multiple color schemes in your Svelte/SvelteKit application.

Advantages

🐤 lightweight (<1kb)
💪 powerful
👌 easy to use
🏃 fast and efficient
⏱️ supports SSR (Server-Side Rendering)
🦺 best TypeScript support (works with JavaScript project too)
⛔ no external dependencies

Usage

1. ⌨️ Install sthemer as a dependency.

   npm install sthemer

2. 🔧 Add the mixin globally.

   svelte.config.js

   import preprocess from 'svelte-preprocess'
   
   /** @type {import('@sveltejs/kit').Config} */
   const config = {
       preprocess: preprocess({
           scss: {
               prependData: `@import 'sthemer/mixins';`,
           },
       }),
   }
   
   export default config

   This example uses scss as css preprocessor. Other formats are also supported. See the supported CSS preprocessors section for more details.

3. 📁 Wrap your code with the Sthemer.svelte component and define your preferred strategy.

   App.svelte

   <script>
       import Sthemer from 'sthemer'
   </script>
   
   <Sthemer strategy="auto">
       <!-- your application goes here -->
   </Sthemer>
   
   <style lang="scss">
       p {
           @include on-dark {
               color: red;
           }
   
           @include on-light {
               color: green;
           }
       }
   </style>

4. 🎨 Define styles for your components.

   Button.svelte

   <button on:click>
       <slot />
   </button>
   
   <style lang="scss">
       button {
           // styles that apply to both schemes
           font-size: 1.3rem;
           padding: 10px 20px;
           border-radius: 8px;
   
           // theses styles will apply when the component gets rendered on a 'dark' wrapper
           @include on-dark {
               background-color: white;
               color: black;
           }
   
           // theses styles will apply when the component gets rendered on a 'light' wrapper
           @include on-light {
               background-color: black;
               color: white;
           }
       }
   </style>

5. 📖 Thats it. Play around and explore the docs to see some more examples.

6. ⭐ Star this project on GitHub.

   Thanks! This helps the project to grow.

supported CSS preprocessors

• sass
• scss
• less
• css (no preprocessor)

Schemes

• light
• dark

Strategies

• auto
• light
• dark
• inverted

Server-Side Rendering (SSR)

Sponsors

Become a sponsor ❤️ if you want to support my open source contributions.

Thanks for sponsoring my open source work!