Napoleonic Political Magnificence

    @julian_cataldo/astro-color-mode

    0.11.6 • Public • Published

    🚀  Astro — Color mode, with user override

    Provides system or user-defined color scheme preference, with a toggle mechanism.
    Settings are persisted, component is progressively enhanced and flash of mis-styled content avoided.
    Also, this provides an easier way to target theme with CSS selector / SCSS mixins / JS DOM selector.

    Features

    • Detects user current color mode
    • Apply a data-color-mode="dark|light" attribute on root document
    • Provides a toggle mechanism for overriding system preference
    • Persists user preference in browser local storage
    • Inject saved setting critically, avoiding a blinding flash of mis-styled content.
    • Provides SCSS mixins for easy theme targeting
    • Supports JS / No-JS, with a fallback to user system preference

    📦  Installation

    pnpm i @julian_cataldo/astro-color-mode

    🛠  Usage

    ---
    import ColorMode from '@julian_cataldo/astro-color-mode/ColorMode.astro';
    // ...
    ---
    <!-- ... -->
    <head>
      <!-- Place component inside `HEAD` tag -->
    
      <ColorMode />
    
      <!-- ... -->
    </head>

    Use data-color-mode-switch where you want to toggle theme setting, on an any element, somewhere inside BODY tag:

    <!-- ... -->
    <body>
      <!-- ... -->
    
      <button data-color-mode-switch>Toggle COLOR MODE 💡</button>
    
      <!-- ... -->
    </body>

    🎉  Result

    <html data-color-mode="light|dark">
      <!-- ... -->
    </html>

    With SCSS

    SCSS mixins registration in astro.config.mjs:

    export default defineConfig({
      // ...
      vite: {
        css: {
          preprocessorOptions: {
            scss: {
              additionalData: `
                @use "@julian_cataldo/astro-color-mode/use-color-mode.scss" as *;
              `,
            },
          },
        },
      },
    });

    Then, use it like this in your stylesheets:

    span {
      @include color-mode(light) {
        color: black;
        background-color: white;
        // ...
      }
      @include color-mode(dark) {
        color: white;
        background-color: black;
        // ...
      }
    }

    To do

    • [ ] Fix no JS support (SCSS mixin…)
    • [ ] Full JS independant @media query support for SCSS mixins
    • [ ] SCSS mixins demo usage
    • [ ] Thorough demo video for all user scenarios
      • [ ] With JS, system pref.
      • [ ] With JS, persisted user pref.
      • [ ] No JS, system pref.

    Install

    npm i @julian_cataldo/astro-color-mode

    DownloadsWeekly Downloads

    75

    Version

    0.11.6

    License

    ISC

    Unpacked Size

    9.65 kB

    Total Files

    7

    Last publish

    Collaborators

    • julian.cataldo