properties
changelog

Color Scheme

Apply browser's native dark/light theme to elements.

Usage:

  • @layout theme-*;

Reference

shilp.config.js
/** @type {import('shilpcss/types').ShilpConfig} */
const shilpConfig = {
  source: "react",

  properties: {
    layout: {
      theme: {
        property: "color-scheme: <v><i>;",
        values: {
          normal: "normal",
          auto: "light dark",
          dark: "dark",
          light: "light",
          only: {
            light: "only light",
            dark: "only dark",
          },
        },
      },
    },
  },
};

export default shilpConfig;

Published at:

Last updated at: