Nuxt和Windi，我可以在Windi.config.ts中获取当前主题吗

我创建了一个theme.ts，在这里我正在删除站点"；品牌"；主机名(基于很棒的入门nuxt3存储库versoin(如下：

utils/theme.ts

export type IThemeSettingOptions = 'light' | 'system' | 'foo' | 'bar'
export type ITheme = 'light' | 'foo' | 'bar'
export const availableThemes: {
key: IThemeSettingOptions
text: string
}[] = [
{ key: 'light', text: 'Light' },
{ key: 'system', text: 'System' },
{ key: 'foo', text: 'Foo' },
{ key: 'bar', text: 'Bar' },
]
export function ThemeManager() {
// composable
const themeUserSetting = useCookie<IThemeSettingOptions>('theme')
// methods
const getUserSetting = (): IThemeSettingOptions => {
return themeUserSetting.value || 'system'
}
const getSiteTheme = (): ITheme => {
try {
const host = location.hostname
const sites = {
'foo.whitelabel.com': 'foo',
'bar.whitelabel.com': 'bar'
}
if (sites[host]) {
return sites[host]
}
} catch (e) {
return 'light' // This means generic styles, no customizable brand
}
}
// state
const themeSetting = useState<IThemeSettingOptions>('theme.setting', () =>
getSiteTheme()
)
const themeCurrent = useState<ITheme>('theme.current', () =>
process.client ? getSiteTheme() : 'light'
)
// init theme
const init = () => {
themeSetting.value = getSiteTheme()
}
// lifecycle
onBeforeMount(() => init())
onMounted(() => {
themeCurrent.value = getSiteTheme()
})
return {
themeSetting,
themeCurrent,
getUserSetting,
getSiteTheme
}
}

我知道nuxt提供的这种颜色模式。但是当我使用windics时，我希望每个主题/品牌都有一个不同的配置文件/对象。

我在windi.config.ts中试过这样

import { defineConfig } from 'windicss/helpers';
import type { Plugin } from 'windicss/types/interfaces';
import { ThemeManager } from './utils/theme';
console.log(ThemeManager().themeCurrent)
// etc..

但这不会在控制台中记录任何内容

这可能吗？如果没有，类似的解决方法？(可能带有tailwindcss(

我想这样做，所以foo的primary颜色与bar品牌的不同，比如说：

windi.config.ts

const MyThemes = {
light: {
colors: {
green: {
DEFAULT: '#3BA670'
},
blue: {
DEFAULT: '#0096F0'
}
}
},
foo: {
colors: {
green: {
DEFAULT: '#3BA675'
},
blue: {
DEFAULT: '#0096F5'
}
}
},
bar: {
colors: {
green: {
DEFAULT: '#3BA67F'
},
blue: {
DEFAULT: '#0096FF'
}
}
}
}
const MyTheme = MyThemes['foo'] // or 'bar' or 'light'

export default defineConfig({
// etc..
theme: {
extend: {
colors: {
primary: MyTheme.colors.green,
// etc.. 
}
},
}
// etc..
})

如果您想在Tailwind中获得特定代币在JS中的实际值，可以使用如下答案

import resolveConfig from 'tailwindcss/resolveConfig'
import tailwindConfig from '@/tailwind.config.js'
const twFullConfig = resolveConfig(tailwindConfig)
...
mounted() {
console.log('tw', twFullConfig.theme.colors['primary-500'])
}

如果你想拥有依赖于特定变量的动态内容，你需要将其映射到一个对象，你会得到如图所示的类。如果您在使用基于实用程序的CSS框架和适当的设计系统时想要动态的东西，这是非常方便的。
由于性能原因，Tailwind不允许动态类，因此这种映射是一种必要的邪恶。

UnoCSS可能是我所知道的最灵活的解决方案，但它仍然不适合解决这样的问题。使用一些CSS变量并动态覆盖它们也不是一种用法，因为设计系统基于的不仅仅是颜色或大小。

TLDR：主题化很难，需要大量手工绘制才能有效地完成。我在一个客户身上尝试过，它很早就很复杂，尤其是如果你想用一种动态的方式来做的话。

我试过那个和twind的垫片。在运行时使用它是可行的(如果需要的话(，但肯定很棘手。

如果你可以依赖CSS vars(自定义属性(IMHO，你可以简化它。

基于主题在html上设置一个类，例如<html class="dark">...</html>或<html class="foo">...</html>。您可以在nuxt.config.ts应用程序部分或您提到的颜色模块中完成此操作

app: {
// https://nuxt.com/docs/api/configuration/nuxt-config#head
head: {
htmlAttrs: {
lang: 'en',
class: 'foo', // Here you could an environment variable
},
},
},

在样式表上设置颜色

// theme.css
:root {
--color-primary: #3BA670; /* or Whatever value you like, HSL, RGBA, colornames, ecc */
--color-error: darkred;
}
html.foo {
--color-primary: #3BA675;
--color-error: mediumvioletred;
}
html.bar {
--color-primary: orange;
--color-error: indianred;
}

最后在你的windi.config.ts

export default defineConfig({
// etc..
theme: {
extend: {
colors: {
primary: 'var(--color-primary)',
error: 'var(--color-error)',
// etc.. 
}
},
}
// etc..
})

此外，如果你有一个纯色系统，你可以省略扩展颜色，只需覆盖windi调色板并实现你的调色板。

相关内容

最新更新

热门标签：