astro-color-mode

0.7.1 • Public • Published

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

.my-layout {
  :is(.my-link, body) {
    @include color-mode(light) {
      color: black;
      background-color: white;
      // ...
    }
    @include color-mode(dark) {
      color: white;
      background-color: black;
      // ...
    }
  }
}

.some-class {
  @include color-mode(light) {
    color: blue;
    background-color: yellow;
    // ...
  }
  @include color-mode(dark) {
    color: yellow;
    background-color: blue;
    // ...
  }
}

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.

Package Sidebar

Install

npm i astro-color-mode

Weekly Downloads

1

Version

0.7.1

License

ISC

Unpacked Size

12.6 kB

Total Files

7

Last publish

Collaborators

  • julian.cataldo