Qtheme
Quick links:
~5kb.js, 0 dependencies, 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
React Quick example:
import {Qtheme} from '@quak.lib/qtheme'
import {darkTheme, lightTheme} from './your-themes'
function App() {
useEffect(() => {
// Try to initialize theme from localStorage else lightTheme
Qtheme.init(lightTheme)
}, [])
return (
<div class="bg-color text-color">
<h1 class="text-primary">Hello world!</h1>
<p>This is regular text color</p>
<button onclick={() => Qtheme.setTheme(darkTheme)}>Dark theme</button>
</div>
)
}Angular Quick example:
import {Qtheme} from '@quak.lib/qtheme'
import {darkTheme, lightTheme} from './your-themes'
@Component({
..., // selector, stylesUrl,
template: `<div class="bg-color text-color">
<h1 class="text-primary">Hello world!</h1>
<p>This is regular text color</p>
<button (click)="setDarkTheme()">Dark theme</button>
</div>`
})
class AppComponent {
constructor() {
// Try to initialize theme from localStorage else lightTheme
Qtheme.init(lightTheme)
}
setDarkTheme() {
Qtheme.setTheme(darkTheme)
}
}Requirements
None, works with any framework and plain JS/TS with HTML.
Install
npm install @quak.lib/qthemeWebsite / DEMO
Check out website to see Qtheme in action.
Theme selector - top-right corner
Documentation & Examples
Documentation with getting started, examples and API reference.
Examples repository
Will work with vanilla JS if supports import/export. (eg. with Vite builder)
Qtheme has separate GitHub repo with examples for:
What is Qtheme?
Import Qtheme
import {Qtheme, Theme, CSSProps} from '@quak.lib/qtheme'Declare light theme (override atoms in dark/each theme)
const lightTheme: Theme = {
name: 'light',
atoms: [
// SIMPLE ATOMS
// generates --primary: dodgerblue
['primary', 'dodgerblue'],
// COMPOUND ATOMS
// generates CSS class .btn + .btn:hover
// can be ::after, ::before, :focus, etc.
['btn', btn],
['btn:hover', btnHover],
// ATOMS WITH CSS CLASSES
// generates --bg-color: hsl(0, 0%, 100%)
// + .bg-color { background-color: var(--bg-color) }
['bg-color', 'background-color:hsl(0, 0%, 100%)'],
['text-color', 'color:black'],
['text-primary', 'color:var(--primary)']
]
}Initialize lightTheme at app start
Qtheme.setTheme(lightTheme)
// Try to initialize theme from localStorage else lightTheme
Qtheme.init(lightTheme)Once you initialized atoms you can use class="bg-color" to set background color or class="text-primary" to set primary text color, etc.
<body class="bg-color text-color">
<h1 class="text-primary">Hello world!</h1>
<p>This is regular text color</p>
<btn class="btn">Action</btn>
</body>Change theme with Qtheme.setTheme(theme).
// btn, btnHover from previous examples
const darkTheme: Theme = {
name: 'dark',
atoms: [
['primary', 'red'],
['btn', btn],
['btn:hover', btnHover],
['bg-color', 'background-color:hsl(0, 0%, 0%)'],
['text-color', 'color:white'],
['text-primary', 'color:var(--primary)']
]
}
Qtheme.setTheme(darkTheme)How to declare CSSProps for .btn and .btn:hover
const btn: CSSProps = {
'text-align': 'center', // simple strings for any CSS you need
backgroundColor: 'var(--primary)', // or use intelisense
color: 'var(--primary-content)',
fontWeight: 900
}
const btnHover: CSSProps = {
borderStyle: 'inset',
cursor: 'pointer'
}API
You will find all information about Qtheme theming API in Qtheme Docs - API
License
Made & maintained with ❤️ by QUAK