πŸš€Β Β 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 unstyled content avoided. Also, it will provide an easier way to target theme with CSS / SCSS / JS.

Keywords:

  • astro
  • astro-component
  • color
  • theme
  • switch
  • toggle
  • dark
  • light
  • mode
  • progressive
  • no-js
  • scheme
  • native
  • prefers-color-scheme
  • javascript
  • vanilla

Component live demo


↑ Click me!

πŸš€Β Β Astro β€” Color mode, with user override

NPM Downloads ISC License PRs Welcome
Astro TypeScript Prettier EditorConfig ESLint

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 astro-color-mode

πŸ› Β Β Usage

---
import { ColorMode } from 'astro-color-mode';
// ...
---
<!-- ... -->
<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 "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.

Changelog

Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

0.6.0 (2022-10-17)

Features

  • generic color mode mixin (fb39fb0)
  • init color mode component (1a8fb81)

Bug Fixes

  • remove package prefix, simplify import method (73bd31b)
  • remove unused dependency (0c0537e)
  • temporary no js fallback defaults (3b889d1)
  • wrap global script in scoped function (edf9be5)

0.11.6 (2022-09-22)

Note: Version bump only for package @julian_cataldo/astro-color-mode

0.11.5 (2022-08-20)

Note: Version bump only for package @julian_cataldo/astro-color-mode

0.11.4 (2022-08-06)

Bug Fixes

  • temporary no js fallback defaults (3b889d1)

0.11.3 (2022-07-31)

Note: Version bump only for package @julian_cataldo/astro-color-mode

0.11.2 (2022-07-26)

Note: Version bump only for package @julian_cataldo/astro-color-mode

0.11.1 (2022-07-24)

Note: Version bump only for package @julian_cataldo/astro-color-mode

0.11.0 (2022-07-18)

Features

  • generic color mode mixin (fb39fb0)

0.10.3 (2022-06-28)

Bug Fixes

  • remove unused dependency (0c0537e)

0.10.2 (2022-06-26)

Bug Fixes

  • wrap global script in scoped function (edf9be5)

0.10.1 (2022-06-26)

Note: Version bump only for package @julian_cataldo/astro-color-mode

0.10.0 (2022-06-25)

Features

  • init color mode component (1a8fb81)
...

⚠️  Having an issue? / πŸ—£   Wanna share feedback or suggestion?

✍️  Open an Issue or a Pull Request   on GitHub -or-   Contact me   on my Website.