🚀  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.

Components

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

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.

Warning
🚧  Work in progress

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

Warning
The SCSS part is still a work in progress towards full no-JS support (progressive enhancement).

📦  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>
<!-- ... -->
<body>
  <!-- Use 'data-color-mode-switch' where you want to -->
  <!-- toggle theme setting, on an element inside BODY tag -->

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

  <!-- ... -->
</body>

SCSS mixins registration in astro.config.mjs:

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

🎉  Result

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

To do

  • 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.

LIVE DEMO  🎭  DOCUMENTATION WEBSITE ⎋

Live demo website

code.juliancataldo.com

🔗  JulianCataldo.com

Changelog

Change Log

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

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)
...