unpreset / unocss-preset-theme Goto Github PK
View Code? Open in Web Editor NEWThe dynamic theme presets for UnoCSS.
Home Page: https://unocss-preset-theme.todev.cc
unocss-preset-theme's People
Contributors
![renovate[bot] avatar](https://avatars.githubusercontent.com/in/2740?v=4 "renovate[bot]")
Stargazers
Watchers
unocss-preset-theme's Issues
Not worked with 'dark' or 'light' class on html attribute
If you set the theme class ('dark' or 'light') to the html attribute, then the theme is not applied. At the same time, when setting the class to the body attribute, everything works as expected.
Due to this problem, the plugin does not work correctly in the nuxt + nuxt-color-mode bundle, since nuxt-color-mode sets the theme class to the html attribute.
Upd: This is due to the fact that the html contains :root with theme variables declared. These variables overwrite variables that are in the class of the selected theme (dark, for example), because of this, changing themes does not work.
Wrong Generated Variables
Hi
I am trying to setup this preset but when I use .dark theme it seems that there is an issue with generating global variables as you can see
This is my unocss.config.ts
Context
"nuxt": "^3.4.3",
"@unocss/nuxt": "^0.51.12",
Also I am using definePreset instead of defineConfig
type definition errors on presetTheme
Tried using this plugin, but vscode keeps shouting at me about this
cannot use with hsl colors from v4
Thanks for the preset and freeing us from writing "dark:..." 😅
I used to use this with radix colors ("@radix-ui/colors") and those where defined in hsl. and since radix came with it's own opacity levels, I didn't need to use text-opacity, ...
in version 4 and 5 it removes the hsl wrapper, concats the opcity var and put it inside a rgba() wrapper which won't work for hsl colors.
I'm not sure hsl can be used in unocss itself or not but it would be nice there could be an option to use hsl colors with your preset.
cannot use in sveltekit
[help](https://stackblitz.com/edit/github-skdj5x?file=src/routes/+layout.svelte)
can u try this in ur machine too ? somehow works in stackbltz but not on local
windows 11 , nvm node 18
Can not use color variables
When I set a HEX color string, it works well, but when I set it use color variables, It's not work
import {
defineConfig,
presetIcons,
presetTypography,
presetUno,
transformerDirectives,
transformerVariantGroup,
} from 'unocss'
import presetTheme from 'unocss-preset-theme'
const colors = presetUno().theme.colors
export default defineConfig({
theme: {
colors: {
base: {
DEFAULT: colors.light[5],
foreground: colors.dark[5],
},
},
},
presets: [
presetUno(),
presetIcons(),
presetTypography(),
presetTheme({
theme: {
dark: {
colors: {
base: {
DEFAULT: colors.dark[5],
foreground: colors.light[5],
},
},
},
},
}),
],
transformers: [
transformerDirectives(),
transformerVariantGroup(),
],
})v0.9.0 generates wrong CSS
Expected:
/* layer: theme */
:root{--un-preset-theme-colors-primary:var(--el-color-primary);}
.dark{--un-preset-theme-colors-primary:var(--el-color-primary);}
/* layer: default */
.text-primary{color:var(--un-preset-theme-colors-primary);}Or
/* layer: theme */
:root, .dark {--un-preset-theme-colors-primary:var(--el-color-primary);}
/* layer: default */
.text-primary{color:var(--un-preset-theme-colors-primary);}Or
/* v0.8.1 behavior */
/* layer: default */
.text-primary{color:var(--el-color-primary);}border color variables doesnt work
first I loved really this preset, I moved to unocss after find this, I use tailwindcss variables in all of my projects, but this preset more better
I tried it today, it work very well but I have a problem, see this is my uno.config.js
import { presetForms } from '@julr/unocss-preset-forms'
import { defineConfig, presetUno } from 'unocss'
import { colors } from 'unocss/preset-mini'
import { presetTheme } from 'unocss-preset-theme'
export default defineConfig({
theme: {
colors: {
color: {
50: colors.blue['50'],
100: colors.blue['100'],
200: colors.blue['200'],
300: colors.blue['300'],
400: colors.blue['400'],
500: colors.blue['500'],
600: colors.blue['600'],
700: colors.blue['700'],
800: colors.blue['800'],
900: colors.blue['900'],
}
},
},
rules: [
// ['custom-rule', { color: 'red' }]
],
shortcuts: {
// 'custom-shortcut': 'text-lg text-orange hover:text-teal'
},
presets: [
presetUno({
dark: 'class'
}),
presetForms(),
presetTheme({
prefix: '--',
theme: {
primary: {
colors: {
color: {
50: colors.blue['50'],
100: colors.blue['100'],
200: colors.blue['200'],
300: colors.blue['300'],
400: colors.blue['400'],
500: colors.blue['500'],
600: colors.blue['600'],
700: colors.blue['700'],
800: colors.blue['800'],
900: colors.blue['900'],
}
}
},
secondary: {
colors: {
color: {
50: colors.green['50'],
100: colors.green['100'],
200: colors.green['200'],
300: colors.green['300'],
400: colors.green['400'],
500: colors.green['500'],
600: colors.green['600'],
700: colors.green['700'],
800: colors.green['800'],
900: colors.green['900'],
}
}
},
tertinary: {
colors: {
color: {
50: colors.yellow['50'],
100: colors.yellow['100'],
200: colors.yellow['200'],
300: colors.yellow['300'],
400: colors.yellow['400'],
500: colors.yellow['500'],
600: colors.yellow['600'],
700: colors.yellow['700'],
800: colors.yellow['800'],
900: colors.yellow['900'],
}
}
},
danger: {
colors: {
color: {
50: colors.red['50'],
100: colors.red['100'],
200: colors.red['200'],
300: colors.red['300'],
400: colors.red['400'],
500: colors.red['500'],
600: colors.red['600'],
700: colors.red['700'],
800: colors.red['800'],
900: colors.red['900'],
}
}
}
}
})
]
})
when I use things like text-color-500 border-color-500 it work but with border border-color-500 does'nt work, and by the way border-green-500 work
I used it today with version 0.4.0
FYI: Your dependencies are out of date, npm install does not work for users
npm i -D unocss-preset-theme
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: @prodkt-cloud/[email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/unocss
npm ERR! dev unocss@"^0.46.5" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer unocss@"^0.45.25" from [email protected]
npm ERR! node_modules/unocss-preset-theme
npm ERR! dev unocss-preset-theme@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See /Users/prodkt/.npm/eresolve-report.txt for a full report.
Not working, theme values directly applied
I have the following config:
// uno.config.ts
import { defineConfig, presetUno } from 'unocss'
import presetTheme from 'unocss-preset-theme'
export default defineConfig({
theme: {
colors: {
mycolor: 'red'
}
},
presets: [
presetUno(),
presetTheme({
theme: {
mytheme: {
colors: {
mycolor: 'blue'
}
},
}
})
],
})
it putputs this css:
/* layer: default */
.text-mycolor{color:blue;}
Am I missing something?
Typescript error in config
I have the following config but I get this error:
// uno.config.ts
import { defineConfig } from "unocss";
import presetUno from "@unocss/preset-uno";
import type { Theme } from "unocss/preset-uno";
import presetTheme from "unocss-preset-theme";
export default defineConfig({
// default theme
theme: {},
presets: [
presetUno(),
// custom themes
presetTheme<Theme>({
theme: {
dark: {},
},
}),
],
});
Type 'Preset<Theme>' is not assignable to type 'Preset<any> | Preset<any>[]'. Type 'Preset<Theme>' is not assignable to type 'Preset<any>'. Types of property 'rules' are incompatible. Type 'Rule<Theme>[] | undefined' is not assignable to type 'Rule<any>[] | undefined'. Type 'Rule<Theme>[]' is not assignable to type 'Rule<any>[]'. Type 'Rule<Theme>' is not assignable to type 'Rule<any>'. Type '[RegExp, DynamicMatcher<Theme>]' is not assignable to type 'Rule<any>'. Type '[RegExp, DynamicMatcher<Theme>]' is not assignable to type '[string, CSSObject | CSSEntries] | [RegExp, DynamicMatcher<any>]'. Type '[RegExp, DynamicMatcher<Theme>]' is not assignable to type '[string, CSSObject | CSSEntries]'. Type at position 0 in source is not compatible with type at position 0 in target. Type 'RegExp' is not assignable to type 'string'.ts(2322)
v0.9.1 generates wrong css?
It seems that v0.9.1 hasn't generated the css var --un-preset-theme-breakpoints-xs but used it.
Am I doing wrong or is this a bug?
Apply theme based on media query
Awesome plugin!
Is it possible to apply a theme based on a mediaquery? So a different theme for mobile vs desktop.
Issue with generated prefers-color-scheme @media queries
Hi! 👋
Firstly, thanks for your work on this project! 🙂
Today I used patch-package to patch [email protected] for the project I'm working on.
If setting dark:'media' this preset spits out invalid css for the prefers-color-scheme @media queries. They need to be in a rule like :root
Here is the diff that solved my problem:
diff --git a/node_modules/unocss-preset-theme/dist/index.cjs b/node_modules/unocss-preset-theme/dist/index.cjs
index e7730b2..558503b 100644
--- a/node_modules/unocss-preset-theme/dist/index.cjs
+++ b/node_modules/unocss-preset-theme/dist/index.cjs
@@ -96,7 +96,7 @@ const presetTheme = (options) => {
return css.replace(/\/\* layer: .* \*\/\n/, "").replace(new RegExp(`(?:\\.(?:dark|light))?.*${PRESET_THEME_RULE}\\\\\\:(${keys.join("|")})\\\\\\:\\d+({(.*)})?`, "gm"), (full, kind, targetCSS, cleanCode) => {
if (isMedia) {
if (kind === "dark" || kind === "light")
- return cleanCode;
+ return `:root{${cleanCode}}`;
}
return `${selectors[kind] || `.${kind}`}${targetCSS || ""}`;
});
diff --git a/node_modules/unocss-preset-theme/dist/index.mjs b/node_modules/unocss-preset-theme/dist/index.mjs
index 0ace6fb..be5e948 100644
--- a/node_modules/unocss-preset-theme/dist/index.mjs
+++ b/node_modules/unocss-preset-theme/dist/index.mjs
@@ -92,7 +92,7 @@ const presetTheme = (options) => {
return css.replace(/\/\* layer: .* \*\/\n/, "").replace(new RegExp(`(?:\\.(?:dark|light))?.*${PRESET_THEME_RULE}\\\\\\:(${keys.join("|")})\\\\\\:\\d+({(.*)})?`, "gm"), (full, kind, targetCSS, cleanCode) => {
if (isMedia) {
if (kind === "dark" || kind === "light")
- return cleanCode;
+ return `:root{${cleanCode}}`;
}
return `${selectors[kind] || `.${kind}`}${targetCSS || ""}`;
});This issue body was partially generated by patch-package.
media query in config `safelist` got wrong output `:root` css
uno.config.ts
import { defineConfig, presetUno } from 'unocss'
import presetTheme from 'unocss-preset-theme'
export default defineConfig({
presets: [
presetUno(),
presetTheme({
theme: {
dark: {
colors: {
foreground: '#FFF',
background: '#0D0D0D',
},
},
},
}),
],
theme: {
colors: {
foreground: '#000',
background: '#FFF',
},
},
safelist: ['md:text-sm']
})The output css is:
/* layer: theme */
@media (min-width: 768px){
:root{font-size:0.875rem;line-height:1.25rem;}
}
/* layer: default */
@media (min-width: 768px){
.md\:text-sm{font-size:0.875rem;line-height:1.25rem;}
}:root{font-size:0.875rem;line-height:1.25rem;} should't be generated.
Typescript Issues
presetTheme({
theme: {
dark: {
richblue: {
100: '#7da6ff',
200: '#598dff',
300: '#446bc1',
400: '#37569b',
500: '#2a4175',
600: '#243967',
700: '#1c2c4f',
800: '#0f1729',
900: '#090e1a',
},
},
},
}),
TS ERROR
Type 'Preset<{ richblue: { 100: string; 200: string; 300: string; 400: string; 500: string; 600: string; 700: string; 800: string; 900: string; }; }>' is not assignable to type 'Preset<any> | Preset<any>[]'.
Type 'Preset<{ richblue: { 100: string; 200: string; 300: string; 400: string; 500: string; 600: string; 700: string; 800: string; 900: string; }; }>' is not assignable to type 'Preset<any>'.
Types of property 'rules' are incompatible.
Type 'Rule<{ richblue: { 100: string; 200: string; 300: string; 400: string; 500: string; 600: string; 700: string; 800: string; 900: string; }; }>[] | undefined' is not assignable to type 'Rule<any>[] | undefined'.
Type 'Rule<{ richblue: { 100: string; 200: string; 300: string; 400: string; 500: string; 600: string; 700: string; 800: string; 900: string; }; }>[]' is not assignable to type 'Rule<any>[]'.
Type 'Rule<{ richblue: { 100: string; 200: string; 300: string; 400: string; 500: string; 600: string; 700: string; 800: string; 900: string; }; }>' is not assignable to type 'Rule<any>'.
Type '[RegExp, DynamicMatcher<{ richblue: { 100: string; 200: string; 300: string; 400: string; 500: string; 600: string; 700: string; 800: string; 900: string; }; }>]' is not assignable to type 'Rule<any>'.
Type '[RegExp, DynamicMatcher<{ richblue: { 100: string; 200: string; 300: string; 400: string; 500: string; 600: string; 700: string; 800: string; 900: string; }; }>]' is not assignable to type '[string, CSSObject | CSSEntries]'.
Type at position 0 in source is not compatible with type at position 0 in target.
Type 'RegExp' is not assignable to type 'string'.
Dark color variables used but not defined
Using this plugin with Sveltekit. UnoCSS v0.53.4 and unocss-preset-theme v0.9.3
Expected behaviour:
CSS variables must be generated for specified dark colors
Current behaviour:
CSS variables are used but they are not defined. This plugin does not generate the required CSS variables for the specified dark theme.
Support [email protected]
Hi. Thanks for your great work!
I am developing unocss-preset-element-plus and unocss-preset-antd based on this preset. After I update to unocss 0.52, some type issues come out. Similar to #7.
Some ideas: How about update package.json?
To
{
"peerDependencies": {
"@unocss/core": ">=0.51"
},
"dependencies": {
"@unocss/core": ">=0.51",
"@unocss/preset-mini": ">=0.51"
}
}type definition errors on presetTheme
My code -
import { defineConfig, presetUno } from 'unocss';
import presetTheme from 'unocss-preset-theme';
import type { Theme } from 'unocss/preset-uno';
export default defineConfig({
theme: {
colors: {
primary: '#1677ff',
'primary-border': '#1677ff',
text: 'rgba(0, 0, 0, 0.88)',
container: '#ffffff',
border: '#d9d9d9',
},
spacing: {
xss: '4px',
xs: '8px',
sm: '12px',
base: '16px',
lg: '24px',
xl: '32px',
},
},
presets: [
presetUno(),
presetTheme<Theme>({
theme: {
dark: {
colors: {
primary: '#1668dc',
'primary-border': '#1668dc',
border: '#424242',
container: '#141414',
text: 'rgba(255, 255, 255, 0.85)',
},
},
compact: {
spacing: {
xss: '2px',
xs: '4px',
sm: '6px',
base: '8px',
lg: '12px',
xl: '16px',
},
},
},
}),
],
});Reproduction - https://codesandbox.io/p/sandbox/distracted-wilson-tydk5g?welcome=true
I saw you already have this issue, but for some reason it is not fixed. #4
【Feature】Skip the load on demand detection and generate all variables
Examples include the following presets and uses
{
theme:{
colors:{
red: 'red',
green: 'green'
}
},
presets: [
presetUno(),
presetTheme({
prefix: '--theme',
theme: {
light: {
red: 'red',
green: 'green'
}
}
})
]
}<button class="text-red">按钮</button>presetTheme generates the associated style variable
:root:{
--theme-colors-red:255, 0, 0
}The current desired build result
:root:{
--theme-colors-red:255, 0, 0,
--theme-colors-green:0, 255, 0
}Regardless of whether the corresponding css variable is used in the source code, it is directly generated. Add a configuration switch?
unocss-preset-theme not playing nice with svelte-preprocess "external files"
I'm primarily a back-end developer only now starting out on my frontend journey so it's possible I've inadvertently made a mistake somewhere.
I have two Svelte components I am using to learn what is going on with npm, typescript, css, Svelte, Unocss, pre-processors, presets, variants, etc:
Checkbox.svelte
which uses the external files approach provided by svelte-preprocess:
<script lang="ts" src="./Checkbox.ts"></script>
<style lang="css" src="./Checkbox.css" uno:preflights uno:safelist></style>
<template lang="html" src="./Checkbox.html"></template>
Newbox.svelte
which doesn't use external files but instead places each of the template, styling and logic in the same Svelte file.
<script lang="ts">
export let name = 'NEWBOX';
export let textColor = '#ff3e00';
function reset() {
name = 'NEWBOX';
textColor = '#ff3e00';
}
</script>
<style lang="css" uno:preflights uno:safelist>
h1 {
margin: auto;
font-family: Arial, Helvetica, sans-serif;
font-size: 5rem;
font-weight: lighter;
text-align: center;
}
h2 {
margin: auto;
font-family: Arial, Helvetica, sans-serif;
font-size: 5rem;
font-weight: lighter;
}
</style>
<template lang="html">
<h1 style="color: {textColor}" on:dblclick={reset}>Hello {name}!</h1>
<h1 style="color: {textColor}" class="spring" on:dblclick={reset}>SPR Hello {name}!</h1>
<p class="ml-10">ML10 para</p>
<p class="ml-20">ML20 para</p>
<p class="bg-red-100">BG red</p>
<p class="bg-blue-100">BG blue</p>
<p class="bg-red-100 spring">SPR BG red</p>
<p class="bg-blue-100 spring">SPR BG blue</p>
<p class="bg-red-100 winter">WIN BG red</p>
<p class="bg-blue-100 winter">WIN BG blue</p>
<p class="bg-red-100 text-primary">BG TP red</p>
<p class="bg-blue-100 text-primary">BG TP blue</p>
<p class="text-primary">TP red</p>
<p class="text-primary autumn">AUT TP</p>
<p class="text-primary spring">SPR TP</p>
<p class="text-primary summer">SUM TP</p>
<p class="text-primary winter">WIN TP</p>
<div class="logo1"></div>
<div class="logo2"></div>
</template>
THE PROBLEM
After npm run build has finished:
- Checkbox.svelte doesn't appear to know anything about the themes I have defined.
- Newbox.svelte does appear to know about the themes and references them in the generated CSS.
The only real difference between these components are their names and this External vs. non-External files usage.
GENERATED FILES (dist folder)
Checkbox.svelte
<style src=./Checkbox.css uno:preflights uno:safelist>/* layer: preflights */
*,::before,::after{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom:
;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing:
;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgba(0,0,0,0);--un-ring-shadow:0
0 rgba(0,0,0,0);--un-shadow-inset: ;--un-shadow:0 0
rgba(0,0,0,0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgba(147,197,253,0.5);--un-blur: ;--un-brightness: ;--un-contrast:
;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert:
;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness:
;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert:
;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: ;}::backdrop{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x:
;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero:
;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0
0 rgba(0,0,0,0);--un-ring-shadow:0 0 rgba(0,0,0,0);--un-shadow-inset:
;--un-shadow:0 0 rgba(0,0,0,0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgba(147,197,253,0.5);--un-blur:
;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale:
;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia:
;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale:
;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate:
;--un-backdrop-sepia: ;}:global(.logo1){background:url(data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 308' display='inline-block' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%23FF3E00' d='M239.682 40.707C211.113-.182 154.69-12.301 113.895 13.69L42.247 59.356a82.198 82.198 0 0 0-37.135 55.056a86.566 86.566 0 0 0 8.536 55.576a82.425 82.425 0 0 0-12.296 30.719a87.596 87.596 0 0 0 14.964 66.244c28.574 40.893 84.997 53.007 125.787 27.016l71.648-45.664a82.182 82.182 0 0 0 37.135-55.057a86.601 86.601 0 0 0-8.53-55.577a82.409 82.409 0 0 0 12.29-30.718a87.573 87.573 0 0 0-14.963-66.244'/%3E%3Cpath fill='%23FFF' d='M106.889 270.841c-23.102 6.007-47.497-3.036-61.103-22.648a52.685 52.685 0 0 1-9.003-39.85a49.978 49.978 0 0 1 1.713-6.693l1.35-4.115l3.671 2.697a92.447 92.447 0 0 0 28.036 14.007l2.663.808l-.245 2.659a16.067 16.067 0 0 0 2.89 10.656a17.143 17.143 0 0 0 18.397 6.828a15.786 15.786 0 0 0 4.403-1.935l71.67-45.672a14.922 14.922 0 0 0 6.734-9.977a15.923 15.923 0 0 0-2.713-12.011a17.156 17.156 0 0 0-18.404-6.832a15.78 15.78 0 0 0-4.396 1.933l-27.35 17.434a52.298 52.298 0 0 1-14.553 6.391c-23.101 6.007-47.497-3.036-61.101-22.649a52.681 52.681 0 0 1-9.004-39.849a49.428 49.428 0 0 1 22.34-33.114l71.664-45.677a52.218 52.218 0 0 1 14.563-6.398c23.101-6.007 47.497 3.036 61.101 22.648a52.685 52.685 0 0 1 9.004 39.85a50.559 50.559 0 0 1-1.713 6.692l-1.35 4.116l-3.67-2.693a92.373 92.373 0 0 0-28.037-14.013l-2.664-.809l.246-2.658a16.099 16.099 0 0 0-2.89-10.656a17.143 17.143 0 0 0-18.398-6.828a15.786 15.786 0 0 0-4.402 1.935l-71.67 45.674a14.898 14.898 0 0 0-6.73 9.975a15.9 15.9 0 0 0 2.709 12.012a17.156 17.156 0 0 0 18.404 6.832a15.841 15.841 0 0 0 4.402-1.935l27.345-17.427a52.147 52.147 0 0 1 14.552-6.397c23.101-6.006 47.497 3.037 61.102 22.65a52.681 52.681 0 0 1 9.003 39.848a49.453 49.453 0 0 1-22.34 33.12l-71.664 45.673a52.218 52.218 0 0 1-14.563 6.398'/%3E%3C/svg%3E) no-repeat;background-size:100% 100%;background-color:transparent;display:inline-block;width:1em;height:1em;width:6em;height:6em;transform:translateX(var(--un-translate-x))
translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x))
rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y))
scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0,
0.2, 1);transition-duration:800ms;}:global(.logo2){background:url(data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 308' display='inline-block' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%23FF3E00' d='M239.682 40.707C211.113-.182 154.69-12.301 113.895 13.69L42.247 59.356a82.198 82.198 0 0 0-37.135 55.056a86.566 86.566 0 0 0 8.536 55.576a82.425 82.425 0 0 0-12.296 30.719a87.596 87.596 0 0 0 14.964 66.244c28.574 40.893 84.997 53.007 125.787 27.016l71.648-45.664a82.182 82.182 0 0 0 37.135-55.057a86.601 86.601 0 0 0-8.53-55.577a82.409 82.409 0 0 0 12.29-30.718a87.573 87.573 0 0 0-14.963-66.244'/%3E%3Cpath fill='%23FFF' d='M106.889 270.841c-23.102 6.007-47.497-3.036-61.103-22.648a52.685 52.685 0 0 1-9.003-39.85a49.978 49.978 0 0 1 1.713-6.693l1.35-4.115l3.671 2.697a92.447 92.447 0 0 0 28.036 14.007l2.663.808l-.245 2.659a16.067 16.067 0 0 0 2.89 10.656a17.143 17.143 0 0 0 18.397 6.828a15.786 15.786 0 0 0 4.403-1.935l71.67-45.672a14.922 14.922 0 0 0 6.734-9.977a15.923 15.923 0 0 0-2.713-12.011a17.156 17.156 0 0 0-18.404-6.832a15.78 15.78 0 0 0-4.396 1.933l-27.35 17.434a52.298 52.298 0 0 1-14.553 6.391c-23.101 6.007-47.497-3.036-61.101-22.649a52.681 52.681 0 0 1-9.004-39.849a49.428 49.428 0 0 1 22.34-33.114l71.664-45.677a52.218 52.218 0 0 1 14.563-6.398c23.101-6.007 47.497 3.036 61.101 22.648a52.685 52.685 0 0 1 9.004 39.85a50.559 50.559 0 0 1-1.713 6.692l-1.35 4.116l-3.67-2.693a92.373 92.373 0 0 0-28.037-14.013l-2.664-.809l.246-2.658a16.099 16.099 0 0 0-2.89-10.656a17.143 17.143 0 0 0-18.398-6.828a15.786 15.786 0 0 0-4.402 1.935l-71.67 45.674a14.898 14.898 0 0 0-6.73 9.975a15.9 15.9 0 0 0 2.709 12.012a17.156 17.156 0 0 0 18.404 6.832a15.841 15.841 0 0 0 4.402-1.935l27.345-17.427a52.147 52.147 0 0 1 14.552-6.397c23.101-6.006 47.497 3.037 61.102 22.65a52.681 52.681 0 0 1 9.003 39.848a49.453 49.453 0 0 1-22.34 33.12l-71.664 45.673a52.218 52.218 0 0 1-14.563 6.398'/%3E%3C/svg%3E) no-repeat;background-size:100% 100%;background-color:transparent;display:inline-block;width:1em;height:1em;width:4em;height:4em;transform:translateX(var(--un-translate-x))
translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x))
rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y))
scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0,
0.2, 1);transition-duration:300ms;}:global(.uxi-v93l9f){margin-left:2.5rem;}:global(.uxi-yd928i){margin-left:5rem;}:global(.logo1:hover){--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-rotate:90deg;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z))
rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z))
skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y))
scaleZ(var(--un-scale-z));}:global(.logo2:hover){--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-rotate:180deg;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate))
rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x))
skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}:global(.uxi-bnio77){--un-bg-opacity:1;background-color:rgba(254,226,226,var(--un-bg-opacity));}:global(.uxi-f3dqqn){--un-bg-opacity:1;background-color:rgba(254,226,226,var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--un-preset-theme-colors-primary),var(--un-text-opacity));}:global(.uxi-gchwb0){--un-bg-opacity:1;background-color:rgba(219,234,254,var(--un-bg-opacity));}:global(.uxi-huxlha){--un-bg-opacity:1;background-color:rgba(219,234,254,var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--un-preset-theme-colors-primary),var(--un-text-opacity));}:global(.uxi-ib965a){--un-text-opacity:1;color:rgba(var(--un-preset-theme-colors-primary),var(--un-text-opacity));}</style>
<h1 style="color: {textColor}" on:dblclick={reset}>Hello {name}!</h1>
<h1 style="color: {textColor}" class="spring" on:dblclick={reset}>SPR Hello {name}!</h1>
<p class="uxi-v93l9f">ML10 para</p>
<p class="uxi-yd928i">ML20 para</p>
<p class="uxi-bnio77">BG red</p>
<p class="uxi-gchwb0">BG blue</p>
<p class="uxi-bnio77 spring">SPR BG red</p>
<p class="uxi-gchwb0 spring">SPR BG blue</p>
<p class="uxi-bnio77 winter">WIN BG red</p>
<p class="uxi-gchwb0 winter">WIN BG blue</p>
<p class="uxi-f3dqqn">BG TP red</p>
<p class="uxi-huxlha">BG TP blue</p>
<p class="uxi-ib965a">TP red</p>
<p class="uxi-ib965a autumn">AUT TP</p>
<p class="uxi-ib965a spring">SPR TP</p>
<p class="uxi-ib965a summer">SUM TP</p>
<p class="uxi-ib965a winter">WIN TP</p>
<div class="logo1"></div>
<div class="logo2"></div>
Newbox.svelte
<style uno:preflights uno:safelist>/* layer: preflights */
*,::before,::after{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x:
;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero:
;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0
0 rgba(0,0,0,0);--un-ring-shadow:0 0 rgba(0,0,0,0);--un-shadow-inset:
;--un-shadow:0 0 rgba(0,0,0,0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgba(147,197,253,0.5);--un-blur:
;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale:
;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia:
;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale:
;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate:
;--un-backdrop-sepia: ;}::backdrop{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom:
;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing:
;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgba(0,0,0,0);--un-ring-shadow:0
0 rgba(0,0,0,0);--un-shadow-inset: ;--un-shadow:0 0
rgba(0,0,0,0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgba(147,197,253,0.5);--un-blur: ;--un-brightness: ;--un-contrast:
;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert:
;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness:
;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert:
;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: ;}
/* layer: theme */
:root{--un-preset-theme-colors-primary:16, 34, 51;} .autumn{--un-preset-theme-colors-primary:246,
119, 47;} .spring{--un-preset-theme-colors-primary:51, 50,
240;} .summer{--un-preset-theme-colors-primary:22, 67, 47;}
.winter{--un-preset-theme-colors-primary:134, 121, 153;}:global(.logo1){background:url(data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 308' display='inline-block' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%23FF3E00' d='M239.682 40.707C211.113-.182 154.69-12.301 113.895 13.69L42.247 59.356a82.198 82.198 0 0 0-37.135 55.056a86.566 86.566 0 0 0 8.536 55.576a82.425 82.425 0 0 0-12.296 30.719a87.596 87.596 0 0 0 14.964 66.244c28.574 40.893 84.997 53.007 125.787 27.016l71.648-45.664a82.182 82.182 0 0 0 37.135-55.057a86.601 86.601 0 0 0-8.53-55.577a82.409 82.409 0 0 0 12.29-30.718a87.573 87.573 0 0 0-14.963-66.244'/%3E%3Cpath fill='%23FFF' d='M106.889 270.841c-23.102 6.007-47.497-3.036-61.103-22.648a52.685 52.685 0 0 1-9.003-39.85a49.978 49.978 0 0 1 1.713-6.693l1.35-4.115l3.671 2.697a92.447 92.447 0 0 0 28.036 14.007l2.663.808l-.245 2.659a16.067 16.067 0 0 0 2.89 10.656a17.143 17.143 0 0 0 18.397 6.828a15.786 15.786 0 0 0 4.403-1.935l71.67-45.672a14.922 14.922 0 0 0 6.734-9.977a15.923 15.923 0 0 0-2.713-12.011a17.156 17.156 0 0 0-18.404-6.832a15.78 15.78 0 0 0-4.396 1.933l-27.35 17.434a52.298 52.298 0 0 1-14.553 6.391c-23.101 6.007-47.497-3.036-61.101-22.649a52.681 52.681 0 0 1-9.004-39.849a49.428 49.428 0 0 1 22.34-33.114l71.664-45.677a52.218 52.218 0 0 1 14.563-6.398c23.101-6.007 47.497 3.036 61.101 22.648a52.685 52.685 0 0 1 9.004 39.85a50.559 50.559 0 0 1-1.713 6.692l-1.35 4.116l-3.67-2.693a92.373 92.373 0 0 0-28.037-14.013l-2.664-.809l.246-2.658a16.099 16.099 0 0 0-2.89-10.656a17.143 17.143 0 0 0-18.398-6.828a15.786 15.786 0 0 0-4.402 1.935l-71.67 45.674a14.898 14.898 0 0 0-6.73 9.975a15.9 15.9 0 0 0 2.709 12.012a17.156 17.156 0 0 0 18.404 6.832a15.841 15.841 0 0 0 4.402-1.935l27.345-17.427a52.147 52.147 0 0 1 14.552-6.397c23.101-6.006 47.497 3.037 61.102 22.65a52.681 52.681 0 0 1 9.003 39.848a49.453 49.453 0 0 1-22.34 33.12l-71.664 45.673a52.218 52.218 0 0 1-14.563 6.398'/%3E%3C/svg%3E) no-repeat;background-size:100%
100%;background-color:transparent;display:inline-block;width:1em;height:1em;width:6em;height:6em;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate))
rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x))
skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(0.4,
0, 0.2, 1);transition-duration:800ms;}:global(.logo2){background:url(data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 308' display='inline-block' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%23FF3E00' d='M239.682 40.707C211.113-.182 154.69-12.301 113.895 13.69L42.247 59.356a82.198 82.198 0 0 0-37.135 55.056a86.566 86.566 0 0 0 8.536 55.576a82.425 82.425 0 0 0-12.296 30.719a87.596 87.596 0 0 0 14.964 66.244c28.574 40.893 84.997 53.007 125.787 27.016l71.648-45.664a82.182 82.182 0 0 0 37.135-55.057a86.601 86.601 0 0 0-8.53-55.577a82.409 82.409 0 0 0 12.29-30.718a87.573 87.573 0 0 0-14.963-66.244'/%3E%3Cpath fill='%23FFF' d='M106.889 270.841c-23.102 6.007-47.497-3.036-61.103-22.648a52.685 52.685 0 0 1-9.003-39.85a49.978 49.978 0 0 1 1.713-6.693l1.35-4.115l3.671 2.697a92.447 92.447 0 0 0 28.036 14.007l2.663.808l-.245 2.659a16.067 16.067 0 0 0 2.89 10.656a17.143 17.143 0 0 0 18.397 6.828a15.786 15.786 0 0 0 4.403-1.935l71.67-45.672a14.922 14.922 0 0 0 6.734-9.977a15.923 15.923 0 0 0-2.713-12.011a17.156 17.156 0 0 0-18.404-6.832a15.78 15.78 0 0 0-4.396 1.933l-27.35 17.434a52.298 52.298 0 0 1-14.553 6.391c-23.101 6.007-47.497-3.036-61.101-22.649a52.681 52.681 0 0 1-9.004-39.849a49.428 49.428 0 0 1 22.34-33.114l71.664-45.677a52.218 52.218 0 0 1 14.563-6.398c23.101-6.007 47.497 3.036 61.101 22.648a52.685 52.685 0 0 1 9.004 39.85a50.559 50.559 0 0 1-1.713 6.692l-1.35 4.116l-3.67-2.693a92.373 92.373 0 0 0-28.037-14.013l-2.664-.809l.246-2.658a16.099 16.099 0 0 0-2.89-10.656a17.143 17.143 0 0 0-18.398-6.828a15.786 15.786 0 0 0-4.402 1.935l-71.67 45.674a14.898 14.898 0 0 0-6.73 9.975a15.9 15.9 0 0 0 2.709 12.012a17.156 17.156 0 0 0 18.404 6.832a15.841 15.841 0 0 0 4.402-1.935l27.345-17.427a52.147 52.147 0 0 1 14.552-6.397c23.101-6.006 47.497 3.037 61.102 22.65a52.681 52.681 0 0 1 9.003 39.848a49.453 49.453 0 0 1-22.34 33.12l-71.664 45.673a52.218 52.218 0 0 1-14.563 6.398'/%3E%3C/svg%3E) no-repeat;background-size:100%
100%;background-color:transparent;display:inline-block;width:1em;height:1em;width:4em;height:4em;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate))
rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x))
skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(0.4,
0, 0.2, 1);transition-duration:300ms;}:global(.uxi-0tr3h3){margin-left:2.5rem;}:global(.uxi-47hns6){margin-left:5rem;}:global(.logo1:hover){--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-rotate:90deg;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y))
translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y))
rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x))
scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}:global(.logo2:hover){--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-rotate:180deg;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z))
rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z))
skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y))
scaleZ(var(--un-scale-z));}:global(.uxi-20bcki){--un-bg-opacity:1;background-color:rgba(219,234,254,var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--un-preset-theme-colors-primary),var(--un-text-opacity));}:global(.uxi-3ylnrn){--un-bg-opacity:1;background-color:rgba(254,226,226,var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--un-preset-theme-colors-primary),var(--un-text-opacity));}:global(.uxi-b41fgw){--un-bg-opacity:1;background-color:rgba(219,234,254,var(--un-bg-opacity));}:global(.uxi-ny8zuf){--un-bg-opacity:1;background-color:rgba(254,226,226,var(--un-bg-opacity));}:global(.uxi-t6e0ci){--un-text-opacity:1;color:rgba(var(--un-preset-theme-colors-primary),var(--un-text-opacity));} h1 { margin:
auto; font-family: Arial, Helvetica,
sans-serif; font-size: 5rem; font-weight:
lighter; text-align: center; }
h2 { margin: auto;
font-family: Arial, Helvetica, sans-serif;
font-size: 5rem; font-weight: lighter;
} </style>
<h1 style="color: {textColor}" on:dblclick={reset}>Hello {name}!</h1>
<h1 style="color: {textColor}" class="spring" on:dblclick={reset}>SPR Hello {name}!</h1>
<p class="uxi-0tr3h3">ML10 para</p>
<p class="uxi-47hns6">ML20 para</p>
<p class="uxi-ny8zuf">BG red</p>
<p class="uxi-b41fgw">BG blue</p>
<p class="uxi-ny8zuf spring">SPR BG red</p>
<p class="uxi-b41fgw spring">SPR BG blue</p>
<p class="uxi-ny8zuf winter">WIN BG red</p>
<p class="uxi-b41fgw winter">WIN BG blue</p>
<p class="uxi-3ylnrn">BG TP red</p>
<p class="uxi-20bcki">BG TP blue</p>
<p class="uxi-t6e0ci">TP red</p>
<p class="uxi-t6e0ci autumn">AUT TP</p>
<p class="uxi-t6e0ci spring">SPR TP</p>
<p class="uxi-t6e0ci summer">SUM TP</p>
<p class="uxi-t6e0ci winter">WIN TP</p>
<div class="logo1"></div>
<div class="logo2"></div>
CONFIG THAT MAY HELP
unocss is running in svelte-scoped mode so no global css files being generated
Package.json
"build": "svelte-kit sync && svelte-package"
"@sveltejs/kit": "next"
"@sveltejs/package": "next"
"@tsconfig/svelte": "^3.0.0"
"svelte": "^3.55.1"
"svelte-preprocess": "^5.0.1"
"typescript": "^4.9.5"
"unocss": "^0.48.5"
"unocss-preset-theme": "^0.5.0"
"vite": "^4.1.4"
Svelte.config.js
import adapter from '@sveltejs/adapter-static';
import preprocess from 'svelte-preprocess';
import UnoCSS from 'temp-s-p-u';
/** @type {import('@sveltejs/kit').Config} */
const config = {
kit: {
adapter: adapter(),
files: {
lib: "src/main/ts"
}
},
package: {
dir: "dist"
},
preprocess: [
preprocess({
}),
UnoCSS({
options: {
classPrefix: 'uxi-',
combine: true
},
})
]
};
export default config;
Unocss.config.ts
import type {Theme} from 'unocss/preset-uno';
import {defineConfig} from 'unocss';
import {presetAttributify} from 'unocss';
import {presetIcons} from 'unocss';
import {presetUno} from 'unocss';
import {UserConfig} from 'unocss';
import presetTheme from 'unocss-preset-theme';
import Unocss from 'unocss/vite';
import defaultTheme from './src/main/ts/themes/uxi/UXI';
import themeAutumn from './src/main/ts/themes/autumn/Autumn';
import themeSpring from './src/main/ts/themes/spring/Spring';
import themeSummer from './src/main/ts/themes/summer/Summer';
import themeWinter from './src/main/ts/themes/winter/Winter';
export default defineConfig<Theme>({
theme: defaultTheme(),
presets: [
presetUno(),
presetAttributify({
prefix: 'uno-'
}),
presetIcons({
prefix: 'i-',
extraProperties: {
display: 'inline-block'
}
}),
presetTheme<Theme>({
theme: {
autumn: themeAutumn(),
spring: themeSpring(),
summer: themeSummer(),
winter: themeWinter(),
}
})
],
rules: [
],
shortcuts: {
logo1: 'i-logos:svelte-icon w-6em h-6em transform transition-800 hover:rotate-90',
logo2: 'i-logos:svelte-icon w-4em h-4em transform transition-300 hover:rotate-180'
}
});
Don't apply bg-opacity to custom colors
It seems to break the opacity of the background. If there's a fix, I'd love it.
instead of :
Dependency Dashboard
This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.
Other Branches
These updates are pending. To force PRs open, click the checkbox below.
- chore(deps): update dependency @types/node to v20.6.0
- chore(deps): update dependency eslint to v8.49.0
Open
These updates have all been created already. Click a checkbox below to force a retry/rebase of any.
Detected dependencies
github-actions
.github/workflows/ci.yml
actions/checkout v3pnpm/action-setup v2actions/setup-node v3actions/checkout v3pnpm/action-setup v2actions/setup-node v3.github/workflows/release.yml
actions/checkout v3pnpm/action-setup v2actions/setup-node v3
npm
package.json
@unocss/core ^0.55.7@unocss/preset-mini ^0.55.7@antfu/eslint-config ^0.41.0@types/node ^20.5.9@unocss/preset-uno ^0.55.7bumpp ^9.2.0eslint ^8.48.0typescript ^5.2.2unbuild ^2.0.0vitest ^0.34.4@unocss/core >= 0.52.0pnpm 8.7.4playground/package.json
@unocss/reset ^0.55.7vue ^3.3.4@vitejs/plugin-vue ^4.3.4typescript ^5.2.2unocss ^0.55.7vite ^4.4.9vue-tsc ^1.8.10
- Check this box to trigger a request for Renovate to run again on this repository
Please if possible add a check for UnoCSS version when installing unocss-preset-theme
I was very confused trying to get this to work, turns out it was because I'm using an older version of UnoCSS in order to avoid some bugs. That meant nothing happened because of (I'm guessing) 1bb8d25
It would be nice if this preset could check for a compatible UnoCSS version to get the right package, no idea how to set that up though.
Anyway, thanks for a great theme preset!
Incorrect CSS color generated in the latest unocss
After some investigation, this may be related to the breaking change in unocss/unocss#3221
In the latest version of unocss, when this plugin is disabled, the generated background color CSS is rgb(250 250 250 / var(--un-bg-opacity)). However, when it is enabled, the generated background color CSS is rgb(var(--un-preset-theme-colors-canvas) / var(--un-bg-opacity)), where --un-preset-theme-colors-canvas has a value of 37, 37, 37 in dark mode.
As a result, the final generated output is rgb(37, 37, 37 / var(--un-bg-opacity)). This syntax might be incorrect, but when I changed it to rgb(37 37 37 / var(--un-bg-opacity)), it worked correctly.
This issue might be related to the color generation logic of the plugin.
mount css variable on body instead of :root
Hi there, I've been recently using this preset, it helps me a lot. I encountered a little problem: I was trying to use some CSS variables from another CSS file to define the theme:
presetTheme<Theme>({
theme: {
dark: {
colors: {
text: 'css(var(--neutral-5))'
}
}
}
})The CSS variable --neutral-5 is defined on body, not html. However, this preset mounts CSS variables on :root i.e. html, so it cannot use those variables on body. So I would suggest mounting all --un-preset-theme-xxx on body instead of :root to avoid potential problems. In that way, no matter whether those external CSS variables are mounted on :root or on body, this preset can always handle them properly.
I'm not sure if this problem is just for me or it's a general problem, so I opened this issue to ask your opinion.
unocss vscode extenstion
@unocss/core必须使用0.49.8吗
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.