Qtheme

Hello

USE IT ONLY FOR SPA APPLICATION, WITH LOADER AT THE BEGINNING OR SOMETHING.

For regular website simply copy CSS from https://quak.com.pl/instant-light-dark/ (opens in a new tab) styles generator.

~5kb.js, 0 dependencies, always backwards-compatible, fast, fully typed and production-ready css-in-js library for managing themes in your app. Create multiple themes and switch between them with Qtheme.setTheme(theme)

Qtheme lets you:

Create infinite number of themes
Switch between them easily
Set common theme atoms for all themes
Initialize already chosen theme on app start
Generate CSS classes for you, so you don't have to write it by yourself

Requirements

None, works with any framework and plain JS/TS with HTML.

Install

npm install @quak.lib/qtheme

Usage

Qtheme allows you to use global CSS classes in your HTML or variables in CSS/JS. You can use it with any framework or plain JS/TS with HTML.

Init theme

Init lightTheme at the beginning of your app.

import { Qtheme } from "@quak.lib/qtheme";
 
Qtheme.setTheme({
    name: "light",
    atoms: [
        ["primary", "dodgerblue"],
        ["bg-color", "background-color:#fefefe"],
        ["text-color", "color:black"]
    ]
});
Qtheme.setCommonAtoms([
    ["text-primary", "color:var(--primary)"],
    ["btn", {backgroundColor: "var(--primary)", color: "var(--primary-content)", fontWeight: 900}],
    ["btn:hover", {borderStyle: "inset", cursor: "pointer"}]
])

Init from localstorage

Init theme from localstorage if exists else lightTheme.

Qtheme will save theme in localstorage.

import { Qtheme } from "@quak.lib/qtheme";
import { lightTheme, commonThemeAtoms } from "./your-themes";
 
Qtheme.init(lightTheme);
Qtheme.init(lightTheme, {commonAtoms: commonThemeAtoms}); // or with common atoms

Change theme

Change theme to darkTheme with Qtheme.setTheme(theme).

import { Qtheme } from "@quak.lib/qtheme";
 
Qtheme.setTheme({
    name: "dark",
    atoms: [
        ["primary", "red"],
        ["bg-color", "background-color:rgba(0, 0, 0, 0.8)"],
        ["text-color", "color:white"]
    ]
});

Use theme

<body class="bg-color text-color">
  <h1 class="text-primary">Hello world!</h1>
  <p>This is regular text color</p>
</body>

Documentation

Documentation (opens in a new tab) with getting started, examples and API reference.

Examples repository

Qtheme has separate GitHub repo with examples (opens in a new tab) for each framework/compiler/library/vanilla JS/TS.

Will work with vanilla JS if supports import/export.

API

You will find all information about Qtheme theming API in Qtheme Docs - API (opens in a new tab)

License

MIT LICENSE (opens in a new tab)

Made & maintained with ❤️ by QUAK (opens in a new tab)