@tame-your-theme/css-style-declaration
v0.1.3
Published
native css style declarations api helper to change theme in run time and to tame your theme
Downloads
33
Maintainers
Readme
Tame Your Theme
Overview
For the full and interactive documentation go here.
The main idea of this lib is to help creating themes by using CSS custom variables alongside with HSL colors and the CSS Object Model to change the css variables in runtime.
To achieve that, this lib is split in two packages:
@tame-your-theme/scss
- scss helper functions to create themed css variable colors, themed color harmonies@tame-your-theme/css-style-declaration
- native css style declarations api helper to change theme in run time
Each package can be used independently.
If you don't need to change in run time, you can just use the @tame-your-theme/scss
to create your variables and play with its colors easily.
Installation
Using npm:
npm install @tame-your-theme/css-style-declaration
npm install @tame-your-theme/scss
Using yarn:
yarn add @tame-your-theme/css-style-declaration
yarn add @tame-your-theme/scss
TL;DR
How to use in just a few steps:
- create the themed colors by using the mixin
create-theme-color
from the@tame-your-theme/scss
- create the themes using a list of names and values in your javascript preferred language (typescript, vanilla, react, angular...)
- call the
setTheme
from the@tame-your-theme/css-style-declaration
with the desired theme
The package @tame-your-theme/css-style-declaration
setTheme
Changes the theme according to the given variables. This method uses the native css set property method to change the css variable.
This method accepts two arguments:
export interface Theme {
variables: ThemeAttribute[]
getHueSaturationAndLightness: GetHueSaturationAndLightnessType
}
Following some principles from the Clean Architecture this lib aims to be dependencyless and this can be seen particularly in the parameter getHueSaturationAndLightness
.
The idea of this method is basically avoid an extra dependency, so it receives a function which needs to return the specific values used in the lib.
export type GetHueSaturationAndLightnessType = (value: string) => {
hue: number
saturation: number
lightness: number
}
In the example shown in the the documentation the lib being used to get these values is hex-to-hsl, but one can use any lib or even create the logic to get the values from a hexadecimal color. The following example uses the setTheme
function to change the theme dynamically. To achieve this change, it's necessary to have a proper css set in place in the components.
Using only this package
:root {
--primary-color-h: 39deg;
--primary-color-s: 100%;
--primary-color-l: 50%;
--primary-color: hsl(var(--primary-color-h), var(--primary-color-s), var(--primary-color-l));
--background-color-h: 0deg;
--background-color-s: 0%;
--background-color-l: 100%;
--background-color: hsl(var(--background-color-h), var(--background-color-s), var(--background-color-l));
--background-contrast-color-h: 0deg;
--background-contrast-color-s: 0%;
--background-contrast-color-l: 13%;
--background-contrast-color: hsl(
var(--background-contrast-color-h),
var(--background-contrast-color-s),
var(--background-contrast-color-l)
);
}
After creating these variables, it's just a matter of calling the setThemes
.