🌓 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!