safwan/stdf

Light and dark modes

Configuration

Use the Tailwind CSS dark mode configuration, please make the following @custom-variant configuration in the project entry CSS file, reference Dark Mode.

@custom-variant dark (&:where(.dark, .dark *))

Switching

STDF supports switching between multiple themes. The method of switching themes is placed in the NPM package of STDF, essentially adding or removing the dark class name to the html tag.

// Import darkMode, pass false to switch to light mode, or not pass parameters or pass true to switch to dark mode.
import { darkMode } from 'stdf/theme';

// Switch to light mode
darkMode(false);

// Switch to dark mode
darkMode();

Multiple theme mode

Introduction

STDF supports switching between multiple themes, currently supports switching color system, and will consider switching font, spacing, text size, etc. in the future. The essential principle is to set some attributes as CSS variables, and switch the theme by modifying these variables.

Configuration

Please refer to the theme configuration format generated by the theme generator for the theme configuration, the theme configuration must contain the name and color attributes, name is the theme name, and color is the color system configuration.

Please refer to Theme Generator for the theme configuration format.

Default theme configuration:

{
	name: 'STDF',
	color: {
		primary: {
			50: 'oklch(0.979 0.01 267.36)', // #F5F8FF hsl(222, 100%, 98%)
			100: 'oklch(0.95 0.024 270.343)', // #E8EEFF hsl(224, 100%, 96%)
			200: 'oklch(0.847 0.074 271.188)', // #BBCBFE hsl(226, 97%, 87%)
			300: 'oklch(0.741 0.13 272.232)', // #8FA5FD hsl(228, 97%, 78%)
			400: 'oklch(0.634 0.193 271.595)', // #637CFD hsl(230, 98%, 69%)
			500: 'oklch(0.536 0.252 268.66)', // #3751FC hsl(232, 97%, 60%)
			default: 'oklch(0.467 0.296 264.886)', // #0B24FB hsl(234, 97%, 51%)
			700: 'oklch(0.397 0.26 264.877)', // #0714CF hsl(236, 94%, 42%)
			800: 'oklch(0.331 0.221 264.833)', // #0409A4 hsl(238, 95%, 33%)
			900: 'oklch(0.26 0.178 264.428)', // #010178 hsl(240, 98%, 24%)
			950: 'oklch(0.192 0.13 266.64)' // #03004D hsl(242, 100%, 15%)
		},
		dark: {
			50: 'oklch(0.995 0.012 101.474)', // #FFFEF5 hsl(54, 100%, 98%)
			100: 'oklch(0.986 0.025 97.107)', // #FFFBE8 hsl(50, 100%, 96%)
			200: 'oklch(0.965 0.059 95.884)', // #FFF4C7 hsl(48, 100%, 89%)
			300: 'oklch(0.938 0.089 92.952)', // #FFEAA6 hsl(46, 100%, 83%)
			400: 'oklch(0.91 0.114 89.711)', // #FFDE85 hsl(44, 100%, 76%)
			500: 'oklch(0.88 0.136 86.375)', // #FFD164 hsl(42, 100%, 70%)
			default: 'oklch(0.845 0.153 80.597)', // #FFC043 hsl(40, 100%, 63%)
			700: 'oklch(0.71 0.137 75.734)', // #D29429 hsl(38, 67%, 49%)
			800: 'oklch(0.58 0.118 70.166)', // #A3731F hsl(36, 80%, 45%)
			900: 'oklch(0.45 0.094 64.59)', // #744F14 hsl(34, 80%, 39%)
			950: 'oklch(0.32 0.069 59.014)' // #46300A hsl(32, 80%, 32%)
		},
		primaryBlack: 'oklch(0.116 0.054 267.087)', // #010319 hsl(234, 95%, 5%)
		primaryWhite: 'oklch(0.961 0.001 286.375)', // #F2F2F3 hsl(234, 5%, 95%)
		darkBlack: 'oklch(0.183 0.035 86.634)', // #191101 hsl(40, 95%, 5%)
		darkWhite: 'oklch(0.962 0.001 17.178)', // #F3F2F2 hsl(40, 5%, 95%)
		functional: {
			success: 'oklch(0.704 0.142 167.084)', // #11bb8d hsl(164, 83%, 40%)
			warning: 'oklch(0.558 0.154 47.186)', // #b95000 hsl(26, 100%, 36%)
			error: 'oklch(0.564 0.223 28.46)', // #da1414 hsl(0, 83%, 47%)
			info: 'oklch(0.482 0.14 261.518)' // #2e5aac hsl(219, 58%, 43%)
		},
		extend: [
			{
				color: 'oklch(0.703 0.149 235.059)', // #00acee hsl(197, 100%, 47%)
				alias: 'Twitter'
			},
			{
				color: 'oklch(0.702 0.194 38.137)', // #ff6937 hsl(15, 100%, 61%)
				alias: 'Svelte'
			},
			{
				color: 'oklch(0.482 0.107 161.212)', // #00704a hsl(160, 100%, 22%)
				alias: 'Starbucks'
			}
		]
	}
}

Tailwind v4 recommends using the oklch color mode, reference Using CSS variables.

According to the color system configuration, plus the basic black, white, gray, and transparent, the default color system configuration in the entry CSS file must contain the following content:

@theme {
	/* Theme color */
	--color-primary-50: oklch(0.979 0.01 267.36);
	--color-primary-100: oklch(0.95 0.024 270.343);
	--color-primary-200: oklch(0.847 0.074 271.188);
	--color-primary-300: oklch(0.741 0.13 272.232);
	--color-primary-400: oklch(0.634 0.193 271.595);
	--color-primary-500: oklch(0.536 0.252 268.66);
	--color-primary: oklch(0.467 0.296 264.886);
	--color-primary-700: oklch(0.397 0.26 264.877);
	--color-primary-800: oklch(0.331 0.221 264.833);
	--color-primary-900: oklch(0.26 0.178 264.428);
	--color-primary-950: oklch(0.192 0.13 266.64);

	--color-dark-50: oklch(0.995 0.012 101.474);
	--color-dark-100: oklch(0.986 0.025 97.107);
	--color-dark-200: oklch(0.965 0.059 95.884);
	--color-dark-300: oklch(0.938 0.089 92.952);
	--color-dark-400: oklch(0.91 0.114 89.711);
	--color-dark-500: oklch(0.88 0.136 86.375);
	--color-dark: oklch(0.845 0.153 80.597);
	--color-dark-700: oklch(0.71 0.137 75.734);
	--color-dark-800: oklch(0.58 0.118 70.166);
	--color-dark-900: oklch(0.449 0.097 65.209);
	--color-dark-950: oklch(0.321 0.074 62.379);

	--color-primaryBlack: oklch(0.116 0.054 267.087);
	--color-primaryWhite: oklch(0.961 0.001 286.375);
	--color-darkBlack: oklch(0.183 0.035 86.634);
	--color-darkWhite: oklch(0.962 0.001 17.178);

	/* Functional color */
	--color-success: oklch(0.704 0.142 167.084);
	--color-warning: oklch(0.558 0.154 47.186);
	--color-error: oklch(0.564 0.223 28.46);
	--color-info: oklch(0.482 0.14 261.518);

	/* Extended color */
	--color-extend0: oklch(0.703 0.149 235.059);
	--color-Twitter: oklch(0.703 0.149 235.059);
	--color-extend1: oklch(0.702 0.194 38.137);
	--color-Svelte: oklch(0.702 0.194 38.137);
	--color-extend2: oklch(0.482 0.107 161.212);
	--color-Starbucks: oklch(0.482 0.107 161.212);

	/* Neutral color */
	--color-black: oklch(0 0 0);
	--color-white: oklch(1 0 0);
	--color-gray-50: oklch(0.961 0 0);
	--color-gray-100: oklch(0.925 0 0);
	--color-gray-200: oklch(0.845 0 0);
	--color-gray-300: oklch(0.767 0 0);
	--color-gray-400: oklch(0.683 0 0);
	--color-gray-500: oklch(0.6 0 0);
	--color-gray-600: oklch(0.51 0 0);
	--color-gray-700: oklch(0.42 0 0);
	--color-gray-800: oklch(0.321 0 0);
	--color-gray-900: oklch(0.218 0 0);
	--color-gray-950: oklch(0.159 0 0);
	--color-transparent: transparent;
	/* ... */
}

Switching

Import the theme configuration file and the switch theme method in the NPM package of STDF, and call the switch theme method.

// Import the theme configuration file and the switch theme method (the NPM package of STDF contains a STDF theme configuration file)
import { stdfTheme, switchTheme } from 'stdf/theme';
// Import the custom theme configuration file, assume customTheme is the custom theme configuration file
import customTheme from './customTheme';

// Switch to STDF theme
switchTheme(stdfTheme);

// Switch to custom theme
switchTheme(customTheme);

Detailed usage can refer to STDF Demo.

Summary

Light and dark modes

Directly use the darkMode method in the NPM package of STDF.

Multiple theme mode

Configure the default theme CSS variables in the entry CSS file, such as src/app.css.
Configure the color system in the theme generator and generate the theme configuration file.
Import the theme configuration file and the switch theme method in the NPM package of STDF, and call the switch theme method.

Of course, if you don't need to switch themes, you only need to configure the initial CSS variables.

theme_en.md 7.6 KB Verlauf Originalformat

Light and dark modes

Configuration

Switching

Multiple theme mode

Introduction

Configuration

Switching

Summary

Light and dark modes

Multiple theme mode

theme_en.md 7.6 KB

Verlauf Originalformat