capytal/comicverse
1
0
Fork 0
Code Issues Pull Requests Activity

feat(ui,theme): dynamic theme css

Browse Source
This commit is contained in:
Guz
2024-10-15 01:04:18 -03:00
parent bfd24e0dc7
commit 8a44e0821d
3 changed files with 224 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

146
assets/css/theme.css Normal file
View File

@@ -0,0 +1,146 @@
:root * {
--theme-accent-hue: var(--user-theme-accent-hue, 280);
--theme-accent-saturation: var(--user-theme-accent-saturation, 95%);
--theme-accent-10: hsl(var(--theme-accent-hue), var(--theme-accent-saturation), 7%);
--theme-accent-20: hsl(var(--theme-accent-hue), var(--theme-accent-saturation), 10%);
--theme-accent-30: hsl(var(--theme-accent-hue), var(--theme-accent-saturation), 13%);
--theme-accent-40: hsl(var(--theme-accent-hue), var(--theme-accent-saturation), 16%);
--theme-accent-50: hsl(var(--theme-accent-hue), var(--theme-accent-saturation), 19%);
--theme-accent-60: hsl(var(--theme-accent-hue), var(--theme-accent-saturation), 23%);
--theme-accent-70: hsl(var(--theme-accent-hue), var(--theme-accent-saturation), 28%);
--theme-accent-80: hsl(var(--theme-accent-hue), var(--theme-accent-saturation), 38%);
--theme-accent-90: hsl(var(--theme-accent-hue), var(--theme-accent-saturation), 43%);
--theme-accent-100: hsl(var(--theme-accent-hue), var(--theme-accent-saturation), 48%);
--theme-accent-110: hsl(var(--theme-accent-hue), var(--theme-accent-saturation), 71%);
--theme-accent-120: hsl(var(--theme-accent-hue), var(--theme-accent-saturation), 93%);
--theme-neutral-hue: var(--user-theme-neutral-hue, 0);
--theme-neutral-saturation: var(--user-theme-neutral-saturation, 0%);
--theme-neutral-10: hsl(var(--theme-neutral-hue), var(--theme-neutral-saturation), 7%);
--theme-neutral-20: hsl(var(--theme-neutral-hue), var(--theme-neutral-saturation), 10%);
--theme-neutral-30: hsl(var(--theme-neutral-hue), var(--theme-neutral-saturation), 13%);
--theme-neutral-40: hsl(var(--theme-neutral-hue), var(--theme-neutral-saturation), 16%);
--theme-neutral-50: hsl(var(--theme-neutral-hue), var(--theme-neutral-saturation), 19%);
--theme-neutral-60: hsl(var(--theme-neutral-hue), var(--theme-neutral-saturation), 23%);
--theme-neutral-70: hsl(var(--theme-neutral-hue), var(--theme-neutral-saturation), 28%);
--theme-neutral-80: hsl(var(--theme-neutral-hue), var(--theme-neutral-saturation), 38%);
--theme-neutral-90: hsl(var(--theme-neutral-hue), var(--theme-neutral-saturation), 43%);
--theme-neutral-100: hsl(var(--theme-neutral-hue), var(--theme-neutral-saturation), 48%);
--theme-neutral-110: hsl(var(--theme-neutral-hue), var(--theme-neutral-saturation), 71%);
--theme-neutral-120: hsl(var(--theme-neutral-hue), var(--theme-neutral-saturation), 93%);
--theme-success-hue: var(--user-theme-sucesss-hue, 120);
--theme-success-saturation: var(--user-theme-sucesss-saturation, 95%);
--theme-success-10: hsl(var(--theme-success-hue), var(--theme-success-saturation), 7%);
--theme-success-20: hsl(var(--theme-success-hue), var(--theme-success-saturation), 10%);
--theme-success-30: hsl(var(--theme-success-hue), var(--theme-success-saturation), 13%);
--theme-success-40: hsl(var(--theme-success-hue), var(--theme-success-saturation), 16%);
--theme-success-50: hsl(var(--theme-success-hue), var(--theme-success-saturation), 19%);
--theme-success-60: hsl(var(--theme-success-hue), var(--theme-success-saturation), 23%);
--theme-success-70: hsl(var(--theme-success-hue), var(--theme-success-saturation), 28%);
--theme-success-80: hsl(var(--theme-success-hue), var(--theme-success-saturation), 38%);
--theme-success-90: hsl(var(--theme-success-hue), var(--theme-success-saturation), 43%);
--theme-success-100: hsl(var(--theme-success-hue), var(--theme-success-saturation), 48%);
--theme-success-110: hsl(var(--theme-success-hue), var(--theme-success-saturation), 71%);
--theme-success-120: hsl(var(--theme-success-hue), var(--theme-success-saturation), 93%);
--theme-danger-hue: var(--user-theme-danger-hue, 10);
--theme-danger-saturation: var(--user-theme-danger-saturation, 95%);
--theme-danger-10: hsl(var(--theme-danger-hue), var(--theme-danger-saturation), 7%);
--theme-danger-20: hsl(var(--theme-danger-hue), var(--theme-danger-saturation), 10%);
--theme-danger-30: hsl(var(--theme-danger-hue), var(--theme-danger-saturation), 13%);
--theme-danger-40: hsl(var(--theme-danger-hue), var(--theme-danger-saturation), 16%);
--theme-danger-50: hsl(var(--theme-danger-hue), var(--theme-danger-saturation), 19%);
--theme-danger-60: hsl(var(--theme-danger-hue), var(--theme-danger-saturation), 23%);
--theme-danger-70: hsl(var(--theme-danger-hue), var(--theme-danger-saturation), 28%);
--theme-danger-80: hsl(var(--theme-danger-hue), var(--theme-danger-saturation), 38%);
--theme-danger-90: hsl(var(--theme-danger-hue), var(--theme-danger-saturation), 43%);
--theme-danger-100: hsl(var(--theme-danger-hue), var(--theme-danger-saturation), 48%);
--theme-danger-110: hsl(var(--theme-danger-hue), var(--theme-danger-saturation), 71%);
--theme-danger-120: hsl(var(--theme-danger-hue), var(--theme-danger-saturation), 93%);
--theme-warn-hue: var(--user-theme-warn-hue, 60);
--theme-warn-saturation: var(--user-theme-warn-saturation, 95%);
--theme-warn-10: hsl(var(--theme-warn-hue), var(--theme-warn-saturation), 7%);
--theme-warn-20: hsl(var(--theme-warn-hue), var(--theme-warn-saturation), 10%);
--theme-warn-30: hsl(var(--theme-warn-hue), var(--theme-warn-saturation), 13%);
--theme-warn-40: hsl(var(--theme-warn-hue), var(--theme-warn-saturation), 16%);
--theme-warn-50: hsl(var(--theme-warn-hue), var(--theme-warn-saturation), 19%);
--theme-warn-60: hsl(var(--theme-warn-hue), var(--theme-warn-saturation), 23%);
--theme-warn-70: hsl(var(--theme-warn-hue), var(--theme-warn-saturation), 28%);
--theme-warn-80: hsl(var(--theme-warn-hue), var(--theme-warn-saturation), 38%);
--theme-warn-90: hsl(var(--theme-warn-hue), var(--theme-warn-saturation), 43%);
--theme-warn-100: hsl(var(--theme-warn-hue), var(--theme-warn-saturation), 48%);
--theme-warn-110: hsl(var(--theme-warn-hue), var(--theme-warn-saturation), 71%);
--theme-warn-120: hsl(var(--theme-warn-hue), var(--theme-warn-saturation), 93%);
}
@media (prefers-color-scheme: light) {
:root * {
--theme-accent-10: hsl(var(--theme-accent-hue), var(--theme-accent-saturation), 99%);
--theme-accent-20: hsl(var(--theme-accent-hue), var(--theme-accent-saturation), 98%);
--theme-accent-30: hsl(var(--theme-accent-hue), var(--theme-accent-saturation), 94%);
--theme-accent-40: hsl(var(--theme-accent-hue), var(--theme-accent-saturation), 91%);
--theme-accent-50: hsl(var(--theme-accent-hue), var(--theme-accent-saturation), 88%);
--theme-accent-60: hsl(var(--theme-accent-hue), var(--theme-accent-saturation), 85%);
--theme-accent-70: hsl(var(--theme-accent-hue), var(--theme-accent-saturation), 81%);
--theme-accent-80: hsl(var(--theme-accent-hue), var(--theme-accent-saturation), 73%);
--theme-accent-90: hsl(var(--theme-accent-hue), var(--theme-accent-saturation), 55%);
--theme-accent-100: hsl(var(--theme-accent-hue), var(--theme-accent-saturation), 51%);
--theme-accent-110: hsl(var(--theme-accent-hue), var(--theme-accent-saturation), 39%);
--theme-accent-120: hsl(var(--theme-accent-hue), var(--theme-accent-saturation), 13%);
--theme-neutral-10: hsl(var(--theme-neutral-hue), var(--theme-neutral-saturation), 99%);
--theme-neutral-20: hsl(var(--theme-neutral-hue), var(--theme-neutral-saturation), 98%);
--theme-neutral-30: hsl(var(--theme-neutral-hue), var(--theme-neutral-saturation), 94%);
--theme-neutral-40: hsl(var(--theme-neutral-hue), var(--theme-neutral-saturation), 91%);
--theme-neutral-50: hsl(var(--theme-neutral-hue), var(--theme-neutral-saturation), 88%);
--theme-neutral-60: hsl(var(--theme-neutral-hue), var(--theme-neutral-saturation), 85%);
--theme-neutral-70: hsl(var(--theme-neutral-hue), var(--theme-neutral-saturation), 81%);
--theme-neutral-80: hsl(var(--theme-neutral-hue), var(--theme-neutral-saturation), 73%);
--theme-neutral-90: hsl(var(--theme-neutral-hue), var(--theme-neutral-saturation), 55%);
--theme-neutral-100: hsl(var(--theme-neutral-hue), var(--theme-neutral-saturation), 51%);
--theme-neutral-110: hsl(var(--theme-neutral-hue), var(--theme-neutral-saturation), 39%);
--theme-neutral-120: hsl(var(--theme-neutral-hue), var(--theme-neutral-saturation), 13%);
--theme-success-10: hsl(var(--theme-success-hue), var(--theme-success-saturation), 99%);
--theme-success-20: hsl(var(--theme-success-hue), var(--theme-success-saturation), 98%);
--theme-success-30: hsl(var(--theme-success-hue), var(--theme-success-saturation), 94%);
--theme-success-40: hsl(var(--theme-success-hue), var(--theme-success-saturation), 91%);
--theme-success-50: hsl(var(--theme-success-hue), var(--theme-success-saturation), 88%);
--theme-success-60: hsl(var(--theme-success-hue), var(--theme-success-saturation), 85%);
--theme-success-70: hsl(var(--theme-success-hue), var(--theme-success-saturation), 81%);
--theme-success-80: hsl(var(--theme-success-hue), var(--theme-success-saturation), 73%);
--theme-success-90: hsl(var(--theme-success-hue), var(--theme-success-saturation), 55%);
--theme-success-100: hsl(var(--theme-success-hue), var(--theme-success-saturation), 51%);
--theme-success-110: hsl(var(--theme-success-hue), var(--theme-success-saturation), 39%);
--theme-success-120: hsl(var(--theme-success-hue), var(--theme-success-saturation), 13%);
--theme-danger-10: hsl(var(--theme-danger-hue), var(--theme-danger-saturation), 99%);
--theme-danger-20: hsl(var(--theme-danger-hue), var(--theme-danger-saturation), 98%);
--theme-danger-30: hsl(var(--theme-danger-hue), var(--theme-danger-saturation), 94%);
--theme-danger-40: hsl(var(--theme-danger-hue), var(--theme-danger-saturation), 91%);
--theme-danger-50: hsl(var(--theme-danger-hue), var(--theme-danger-saturation), 88%);
--theme-danger-60: hsl(var(--theme-danger-hue), var(--theme-danger-saturation), 85%);
--theme-danger-70: hsl(var(--theme-danger-hue), var(--theme-danger-saturation), 81%);
--theme-danger-80: hsl(var(--theme-danger-hue), var(--theme-danger-saturation), 73%);
--theme-danger-90: hsl(var(--theme-danger-hue), var(--theme-danger-saturation), 55%);
--theme-danger-100: hsl(var(--theme-danger-hue), var(--theme-danger-saturation), 51%);
--theme-danger-110: hsl(var(--theme-danger-hue), var(--theme-danger-saturation), 39%);
--theme-danger-120: hsl(var(--theme-danger-hue), var(--theme-danger-saturation), 13%);
--theme-warn-10: hsl(var(--theme-warn-hue), var(--theme-warn-saturation), 99%);
--theme-warn-20: hsl(var(--theme-warn-hue), var(--theme-warn-saturation), 98%);
--theme-warn-30: hsl(var(--theme-warn-hue), var(--theme-warn-saturation), 94%);
--theme-warn-40: hsl(var(--theme-warn-hue), var(--theme-warn-saturation), 91%);
--theme-warn-50: hsl(var(--theme-warn-hue), var(--theme-warn-saturation), 88%);
--theme-warn-60: hsl(var(--theme-warn-hue), var(--theme-warn-saturation), 85%);
--theme-warn-70: hsl(var(--theme-warn-hue), var(--theme-warn-saturation), 81%);
--theme-warn-80: hsl(var(--theme-warn-hue), var(--theme-warn-saturation), 73%);
--theme-warn-90: hsl(var(--theme-warn-hue), var(--theme-warn-saturation), 55%);
--theme-warn-100: hsl(var(--theme-warn-hue), var(--theme-warn-saturation), 51%);
--theme-warn-110: hsl(var(--theme-warn-hue), var(--theme-warn-saturation), 39%);
--theme-warn-120: hsl(var(--theme-warn-hue), var(--theme-warn-saturation), 13%);
}
}

1
templates/layouts/page.templ
View File

@@ -46,6 +46,7 @@ templ Page(i ...PageInfo) {
<meta name="theme-color" content={ pageInfo(i).ThemeColor }/>
}
// Global styles
<link href="/assets/css/theme.css" rel="stylesheet"/>
<link href="/assets/css/uno.css" rel="stylesheet"/>
// Global scripts
<script type="module" src="/assets/js/entry.js" defer></script>

80
uno.config.js
View File

@@ -22,7 +22,9 @@ export default defineConfig({
presets: [
presetIcons(),
presetTypography(),
presetUno(),
presetUno({
dark: 'media',
}),
presetWebFonts({
fonts: {
cal: {
@@ -31,15 +33,87 @@ export default defineConfig({
},
mono: {
name: 'Fira Code',
provider: 'none',
},
sans: {
name: 'Inter',
provider: 'none',
},
},
provider: 'bunny',
}),
],
theme: {
colors: {
accent: {
'10': 'var(--theme-accent-10)',
'20': 'var(--theme-accent-20)',
'30': 'var(--theme-accent-30)',
'40': 'var(--theme-accent-40)',
'50': 'var(--theme-accent-50)',
'60': 'var(--theme-accent-60)',
'70': 'var(--theme-accent-70)',
'80': 'var(--theme-accent-80)',
'90': 'var(--theme-accent-90)',
'100': 'var(--theme-accent-100)',
'110': 'var(--theme-accent-110)',
'120': 'var(--theme-accent-120)',
},
danger: {
'10': 'var(--theme-danger-10)',
'20': 'var(--theme-danger-20)',
'30': 'var(--theme-danger-30)',
'40': 'var(--theme-danger-40)',
'50': 'var(--theme-danger-50)',
'60': 'var(--theme-danger-60)',
'70': 'var(--theme-danger-70)',
'80': 'var(--theme-danger-80)',
'90': 'var(--theme-danger-90)',
'100': 'var(--theme-danger-100)',
'110': 'var(--theme-danger-110)',
'120': 'var(--theme-danger-120)',
},
neutral: {
'10': 'var(--theme-neutral-10)',
'20': 'var(--theme-neutral-20)',
'30': 'var(--theme-neutral-30)',
'40': 'var(--theme-neutral-40)',
'50': 'var(--theme-neutral-50)',
'60': 'var(--theme-neutral-60)',
'70': 'var(--theme-neutral-70)',
'80': 'var(--theme-neutral-80)',
'90': 'var(--theme-neutral-90)',
'100': 'var(--theme-neutral-100)',
'110': 'var(--theme-neutral-110)',
'120': 'var(--theme-neutral-120)',
},
success: {
'10': 'var(--theme-success-10)',
'20': 'var(--theme-success-20)',
'30': 'var(--theme-success-30)',
'40': 'var(--theme-success-40)',
'50': 'var(--theme-success-50)',
'60': 'var(--theme-success-60)',
'70': 'var(--theme-success-70)',
'80': 'var(--theme-success-80)',
'90': 'var(--theme-success-90)',
'100': 'var(--theme-success-100)',
'110': 'var(--theme-success-110)',
'120': 'var(--theme-success-120)',
},
warn: {
'10': 'var(--theme-warn-10)',
'20': 'var(--theme-warn-20)',
'30': 'var(--theme-warn-30)',
'40': 'var(--theme-warn-40)',
'50': 'var(--theme-warn-50)',
'60': 'var(--theme-warn-60)',
'70': 'var(--theme-warn-70)',
'80': 'var(--theme-warn-80)',
'90': 'var(--theme-warn-90)',
'100': 'var(--theme-warn-100)',
'110': 'var(--theme-warn-110)',
'120': 'var(--theme-warn-120)',
},
},
},
transformers: [transformerDirectives(), transformerVariantGroup()],
});