Nuns Practicing Misanthropy

    pagestick

    1.0.13 • Public • Published

    Pagestick

    Theme switcher for sites, respecting user system settings

    Features

    • Can automatically pick dark or light theme based on system settings
      • Instantly updates theme when user is changing their system settings
      • This feature is disabled when actively choosing a certain theme
      • This feature can be re-enabled if the visitor switches back to automatic theme
    • Remembers your preferred theme for next visit

    Tests

    • Run npm install
    • Run npm run tests

    Try it in a browser

    • Run npm install
    • Run npm run serve
    • Visit localhost:4444

    Usage

    HTML

    • Setup a default theme attached to the html tag in case the visitor has disabled JavaScript.
    <html data-theme="light">
        ...
        <button class="js-changeTheme" data-theme="light">Light</button>
        <button class="js-changeTheme" data-theme="dark">Dark</button>
        <button class="js-changeTheme">Automatic</button>

    JavaScript

    • Initialize the functionality and attach event listeners
    import { Pagestick } from "dist/pagestick.js";
     
    var pagestick = new Pagestick();
    window.matchMedia('(prefers-color-scheme: dark)').addListener(function (_) { return pagestick.changeTheme('system'); });
    document.querySelectorAll('.js-changeTheme').forEach(function (element) {
            return element.addEventListener('click', function (event) {
            var theme = event.currentTarget.dataset.theme;
            pagestick.changeTheme(theme ? theme : 'automatic');
        });
    });
    • In the example above, buttons that has the classes js-changeTheme will trigger theme switching on click
      • If there is a data-theme attribute on the button, it'll switch to that theme. Eg; data-theme="dark"
      • If the button lacks a data-theme attribute, it'll switch back to automatic theme

    CSS

    • Setup your theme colors and attributes as custom properties in CSS
    :root[data-theme="dark"] {
        --color-background: hsl(00%0%);
        --color-font: hsl(00%100%);
    }
    :root[data-theme="light"] {
        --color-background: hsl(00%100%);
        --color-font: hsl(00%0%);
    }
    • Use your CSS custom properties
    html {
        background-color: var(--color-background);
        color: var(--color-font);
    }

    Install

    npm i pagestick

    DownloadsWeekly Downloads

    14

    Version

    1.0.13

    License

    MIT

    Unpacked Size

    13.9 kB

    Total Files

    13

    Last publish

    Collaborators

    • ljungmark