ztimson/css-utils
1
0
Fork 0
generated from ztimson/template
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Color scheme theme variables

Browse Source
This commit is contained in:
Zakary Timson
2026-08-01 03:23:18 -04:00
parent c2e6aca07d
commit 47e5f7b752
2 changed files with 12 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@@ -1,6 +1,6 @@
{ {
"name": "@ztimson/css-utils", "name": "@ztimson/css-utils",
"version": "2.0.4", "version": "2.1.0",
"description": "CSS Utility Classes", "description": "CSS Utility Classes",
"readme": "README.md", "readme": "README.md",
"scripts": { "scripts": {

33
src/main.scss
View File

@@ -2,7 +2,6 @@
// Theme settings =========================================================================================== // Theme settings ===========================================================================================
// Colors
:root { :root {
// Theme colors -- what ever you like // Theme colors -- what ever you like
--theme-background: #fafafa; --theme-background: #fafafa;
@@ -24,29 +23,19 @@
--theme-content-width: 1100px; --theme-content-width: 1100px;
--theme-font: Arial, sans-serif; --theme-font: Arial, sans-serif;
// Light theme // Theme dependant (light/dark)
&, .theme-light { color-scheme: light dark;
--theme-surface: #ffffff; --theme-surface: light-dark(#ffffff, #2e2e2e);
--theme-border: #E5E7EB; --theme-border: light-dark(#E5E7EB, #374151);
--theme-muted: #6c757d; --theme-muted: light-dark(#6c757d, #cccccc);
--theme-text: #000000; --theme-text: light-dark(#000000, #ffffff);
--theme-lighter: light-dark(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.1));
--theme-lighter: rgba(255, 255, 255, 0.05); --theme-darker: light-dark(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.1));
--theme-darker: rgba(0, 0, 0, 0.05);
}
// Dark theme
.theme-dark {
--theme-surface: #2e2e2e;
--theme-border: #374151;
--theme-muted: #cccccc;
--theme-text: #ffffff;
--theme-lighter: rgba(255, 255, 255, 0.1);
--theme-darker: rgba(0, 0, 0, 0.1);
}
} }
.theme-light { color-scheme: light !important; }
.theme-dark { color-scheme: dark !important; }
$breakpoints: (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px); $breakpoints: (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px);
$sizes: (0: 0, 1: 0.25rem, 2: 0.5rem, 3: 1rem, 4: 1.5rem, 5: 2.5rem); $sizes: (0: 0, 1: 0.25rem, 2: 0.5rem, 3: 1rem, 4: 1.5rem, 5: 2.5rem);