Style-Forge.Themes
Style-Forge.Themes package is a powerful and flexible tool designed for managing and applying themes to your web applications. It provides a streamlined way to handle theme customization, allowing developers to create, switch, and maintain multiple themes effortlessly.
Installation
shell
npm i style-forge.themesUsage
After installation, you can import the CSS file into your project or, if you are using Webpack or another module bundler:
css
@import 'style-forge.themes';Example
There are three standard modes dark / light / auto (system)
auto - this is the system color theme selection
html
<html data-theme="auto">html
<html data-theme="light">html
<html data-theme="dark">Variables
css
:root {
--sf-c-link: 225 73% 57%;
--sf-c-txt: 0 0% 10%;
--sf-c-bg: 0 0% 100%;
--sf-c-bd: 0 0% 75%;
--sf-c-shape-bg: 0 0% 90%;
/* colors for dark theme */
--sf-dark-c-link: 225 73% 57%;
--sf-dark-c-txt: 0 0% 90%;
--sf-dark-c-bg: 0 0% 10%;
--sf-dark-c-bd: 0 0% 50%;
--sf-dark-c-shape-bg: 0 0% 20%;
}
::backdrop {
--sf-c-backdrop: 0 0% 10%;
--sf-dark-c-backdrop: 0 0% 100%;
}