feat: theme colors (#1195)
This commit is contained in:
parent
2e79f3aa37
commit
8753a94aae
@ -12,7 +12,7 @@ defineProps<{
|
||||
<div
|
||||
sticky top-0 z10 backdrop-blur
|
||||
pt="[env(safe-area-inset-top,0)]"
|
||||
border="b base" bg="[rgba(var(--c-bg-base-rgb),0.7)]"
|
||||
border="b base" bg="[rgba(var(--rbg-bg-base),0.7)]"
|
||||
>
|
||||
<div flex justify-between px5 py2 :class="{ 'xl:hidden': $route.name !== 'tag' }">
|
||||
<div flex gap-3 items-center overflow-hidden py2>
|
||||
|
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<button
|
||||
v-if="$pwa?.needRefresh"
|
||||
bg="fade" relative rounded
|
||||
bg="primary-fade" relative rounded
|
||||
flex="~ gap-1 center" px3 py1 text-primary
|
||||
@click="$pwa.updateServiceWorker()"
|
||||
>
|
||||
|
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div
|
||||
v-if="$pwa?.needRefresh"
|
||||
m-2 p5 bg="fade" relative
|
||||
m-2 p5 bg="primary-fade" relative
|
||||
rounded-lg of-hidden
|
||||
flex="~ col gap-3"
|
||||
>
|
||||
|
29
components/settings/SettingsThemeColors.vue
Normal file
29
components/settings/SettingsThemeColors.vue
Normal file
@ -0,0 +1,29 @@
|
||||
<script setup lang="ts">
|
||||
import type { ThemeColors } from '~/composables/settings'
|
||||
|
||||
const themes = await import('~/constants/themes.json').then(r => r.default) as [string, ThemeColors][]
|
||||
const settings = $(useUserSettings())
|
||||
|
||||
const currentTheme = $computed(() => settings.themeColors?.['--theme-color-name'] || themes[0][0])
|
||||
|
||||
function updateTheme(theme: ThemeColors) {
|
||||
settings.themeColors = theme
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div flex="~ gap4" p2>
|
||||
<button
|
||||
v-for="[key, theme] in themes" :key="key"
|
||||
:style="{
|
||||
'background': key,
|
||||
'--local-ring-color': key,
|
||||
}"
|
||||
:class="currentTheme === key ? 'ring-2' : 'scale-90'"
|
||||
:title="key"
|
||||
w-8 h-8 rounded-full transition-all
|
||||
ring="$local-ring-color offset-3 offset-$c-bg-base"
|
||||
@click="updateTheme(theme)"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
@ -18,6 +18,23 @@ export interface UserSettings {
|
||||
fontSize: FontSize
|
||||
language: string
|
||||
zenMode: boolean
|
||||
themeColors?: ThemeColors
|
||||
}
|
||||
|
||||
export interface ThemeColors {
|
||||
'--theme-color-name': string
|
||||
|
||||
'--c-primary': string
|
||||
'--c-primary-active': string
|
||||
'--c-primary-light': string
|
||||
'--c-primary-fade': string
|
||||
'--c-dark-primary': string
|
||||
'--c-dark-primary-active': string
|
||||
'--c-dark-primary-light': string
|
||||
'--c-dark-primary-fade': string
|
||||
|
||||
'--rgb-primary': string
|
||||
'--rgb-dark-primary': string
|
||||
}
|
||||
|
||||
export function getDefaultLanguage(languages: string[]) {
|
||||
|
146
constants/themes.json
Normal file
146
constants/themes.json
Normal file
@ -0,0 +1,146 @@
|
||||
[
|
||||
[
|
||||
"#cc7d24",
|
||||
{
|
||||
"--theme-color-name": "#cc7d24",
|
||||
"--c-primary": "rgb(var(--rgb-primary))",
|
||||
"--c-primary-active": "#b16605",
|
||||
"--c-primary-light": "#cc7d2480",
|
||||
"--c-primary-fade": "#c7781f1a",
|
||||
"--rgb-primary": "204, 125, 36",
|
||||
"--c-dark-primary": "rgb(var(--rgb-dark-primary))",
|
||||
"--c-dark-primary-active": "#b66b0d",
|
||||
"--c-dark-primary-light": "#d1822980",
|
||||
"--c-dark-primary-fade": "#cc7d241a",
|
||||
"--rgb-dark-primary": "204, 125, 36"
|
||||
}
|
||||
],
|
||||
[
|
||||
"#8d9614",
|
||||
{
|
||||
"--theme-color-name": "#8d9614",
|
||||
"--c-primary": "rgb(var(--rgb-primary))",
|
||||
"--c-primary-active": "#747f00",
|
||||
"--c-primary-light": "#8d961480",
|
||||
"--c-primary-fade": "#88910c1a",
|
||||
"--rgb-primary": "141, 150, 20",
|
||||
"--c-dark-primary": "rgb(var(--rgb-dark-primary))",
|
||||
"--c-dark-primary-active": "#798300",
|
||||
"--c-dark-primary-light": "#929b1b80",
|
||||
"--c-dark-primary-fade": "#8d96141a",
|
||||
"--rgb-dark-primary": "141, 150, 20"
|
||||
}
|
||||
],
|
||||
[
|
||||
"#24a451",
|
||||
{
|
||||
"--theme-color-name": "#24a451",
|
||||
"--c-primary": "rgb(var(--rgb-primary))",
|
||||
"--c-primary-active": "#008c3b",
|
||||
"--c-primary-light": "#24a45180",
|
||||
"--c-primary-fade": "#1c9f4d1a",
|
||||
"--rgb-primary": "36, 164, 81",
|
||||
"--c-dark-primary": "rgb(var(--rgb-dark-primary))",
|
||||
"--c-dark-primary-active": "#00903f",
|
||||
"--c-dark-primary-light": "#2ba95580",
|
||||
"--c-dark-primary-fade": "#24a4511a",
|
||||
"--rgb-dark-primary": "36, 164, 81"
|
||||
}
|
||||
],
|
||||
[
|
||||
"#00a99b",
|
||||
{
|
||||
"--theme-color-name": "#00a99b",
|
||||
"--c-primary": "rgb(var(--rgb-primary))",
|
||||
"--c-primary-active": "#009184",
|
||||
"--c-primary-light": "#00a99b80",
|
||||
"--c-primary-fade": "#00a4961a",
|
||||
"--rgb-primary": "0, 169, 155",
|
||||
"--c-dark-primary": "rgb(var(--rgb-dark-primary))",
|
||||
"--c-dark-primary-active": "#009688",
|
||||
"--c-dark-primary-light": "#13aea080",
|
||||
"--c-dark-primary-fade": "#00a99b1a",
|
||||
"--rgb-dark-primary": "0, 169, 155"
|
||||
}
|
||||
],
|
||||
[
|
||||
"#00a6df",
|
||||
{
|
||||
"--theme-color-name": "#00a6df",
|
||||
"--c-primary": "rgb(var(--rgb-primary))",
|
||||
"--c-primary-active": "#008ec6",
|
||||
"--c-primary-light": "#00a6df80",
|
||||
"--c-primary-fade": "#00a1da1a",
|
||||
"--rgb-primary": "0, 166, 223",
|
||||
"--c-dark-primary": "rgb(var(--rgb-dark-primary))",
|
||||
"--c-dark-primary-active": "#0093cb",
|
||||
"--c-dark-primary-light": "#17abe480",
|
||||
"--c-dark-primary-fade": "#00a6df1a",
|
||||
"--rgb-dark-primary": "0, 166, 223"
|
||||
}
|
||||
],
|
||||
[
|
||||
"#0097fd",
|
||||
{
|
||||
"--theme-color-name": "#0097fd",
|
||||
"--c-primary": "rgb(var(--rgb-primary))",
|
||||
"--c-primary-active": "#0080e3",
|
||||
"--c-primary-light": "#0097fd80",
|
||||
"--c-primary-fade": "#0092f81a",
|
||||
"--rgb-primary": "0, 151, 253",
|
||||
"--c-dark-primary": "rgb(var(--rgb-dark-primary))",
|
||||
"--c-dark-primary-active": "#0085e5",
|
||||
"--c-dark-primary-light": "#1a9cff80",
|
||||
"--c-dark-primary-fade": "#0197fa1a",
|
||||
"--rgb-dark-primary": "0, 151, 253"
|
||||
}
|
||||
],
|
||||
[
|
||||
"#a27be7",
|
||||
{
|
||||
"--theme-color-name": "#a27be7",
|
||||
"--c-primary": "rgb(var(--rgb-primary))",
|
||||
"--c-primary-active": "#8964cd",
|
||||
"--c-primary-light": "#a27be780",
|
||||
"--c-primary-fade": "#9d76e21a",
|
||||
"--rgb-primary": "162, 123, 231",
|
||||
"--c-dark-primary": "rgb(var(--rgb-dark-primary))",
|
||||
"--c-dark-primary-active": "#8e69d2",
|
||||
"--c-dark-primary-light": "#a780ec80",
|
||||
"--c-dark-primary-fade": "#a27be71a",
|
||||
"--rgb-dark-primary": "162, 123, 231"
|
||||
}
|
||||
],
|
||||
[
|
||||
"#e65da9",
|
||||
{
|
||||
"--theme-color-name": "#e65da9",
|
||||
"--c-primary": "rgb(var(--rgb-primary))",
|
||||
"--c-primary-active": "#cb4391",
|
||||
"--c-primary-light": "#e65da980",
|
||||
"--c-primary-fade": "#e158a41a",
|
||||
"--rgb-primary": "230, 93, 169",
|
||||
"--c-dark-primary": "rgb(var(--rgb-dark-primary))",
|
||||
"--c-dark-primary-active": "#d14896",
|
||||
"--c-dark-primary-light": "#eb62ae80",
|
||||
"--c-dark-primary-fade": "#e65da91a",
|
||||
"--rgb-dark-primary": "230, 93, 169"
|
||||
}
|
||||
],
|
||||
[
|
||||
"#ef6061",
|
||||
{
|
||||
"--theme-color-name": "#ef6061",
|
||||
"--c-primary": "rgb(var(--rgb-primary))",
|
||||
"--c-primary-active": "#d3474c",
|
||||
"--c-primary-light": "#ef606180",
|
||||
"--c-primary-fade": "#e95b5d1a",
|
||||
"--rgb-primary": "239, 96, 97",
|
||||
"--c-dark-primary": "rgb(var(--rgb-dark-primary))",
|
||||
"--c-dark-primary-active": "#d94c50",
|
||||
"--c-dark-primary-light": "#f5656580",
|
||||
"--c-dark-primary-fade": "#ef60611a",
|
||||
"--rgb-dark-primary": "239, 96, 97"
|
||||
}
|
||||
]
|
||||
]
|
@ -291,7 +291,8 @@
|
||||
"xl": "Extra large",
|
||||
"xs": "Extra small"
|
||||
},
|
||||
"system_mode": "System"
|
||||
"system_mode": "System",
|
||||
"theme_color": "Theme Color"
|
||||
},
|
||||
"language": {
|
||||
"display_language": "Display Language",
|
||||
|
@ -45,6 +45,7 @@ export default defineNuxtConfig({
|
||||
css: [
|
||||
'@unocss/reset/tailwind.css',
|
||||
'floating-vue/dist/style.css',
|
||||
'~/styles/default-theme.css',
|
||||
'~/styles/vars.css',
|
||||
'~/styles/global.css',
|
||||
'~/styles/tiptap.css',
|
||||
|
@ -80,6 +80,7 @@
|
||||
"@nuxtjs/color-mode": "^3.2.0",
|
||||
"@nuxtjs/i18n": "^8.0.0-beta.7",
|
||||
"@pinia/nuxt": "^0.4.6",
|
||||
"@types/chroma-js": "^2.1.4",
|
||||
"@types/file-saver": "^2.0.5",
|
||||
"@types/fnando__sparkline": "^0.3.4",
|
||||
"@types/fs-extra": "^11.0.0",
|
||||
@ -92,6 +93,7 @@
|
||||
"@vueuse/math": "^9.10.0",
|
||||
"@vueuse/nuxt": "^9.10.0",
|
||||
"bumpp": "^8.2.1",
|
||||
"chroma-js": "^2.4.2",
|
||||
"emoji-mart": "^5.4.0",
|
||||
"eslint": "^8.31.0",
|
||||
"esno": "^0.16.3",
|
||||
|
@ -24,6 +24,12 @@ useHeadFixed({
|
||||
</p>
|
||||
<SettingsColorMode />
|
||||
</div>
|
||||
<div space-y-2>
|
||||
<p font-medium>
|
||||
{{ $t('settings.interface.theme_color') }}
|
||||
</p>
|
||||
<SettingsThemeColors />
|
||||
</div>
|
||||
</div>
|
||||
</MainContent>
|
||||
</template>
|
||||
|
@ -3,11 +3,14 @@ import { DEFAULT_FONT_SIZE } from '~/constants'
|
||||
|
||||
export default defineNuxtPlugin(() => {
|
||||
const userSettings = useUserSettings()
|
||||
const html = document.querySelector('html')!
|
||||
const html = document.documentElement
|
||||
watchEffect(() => {
|
||||
html.style.setProperty('--font-size', fontSizeMap[userSettings.value.fontSize || DEFAULT_FONT_SIZE])
|
||||
})
|
||||
watchEffect(() => {
|
||||
html.classList.toggle('zen', userSettings.value.zenMode)
|
||||
})
|
||||
watchEffect(() => {
|
||||
Object.entries(userSettings.value.themeColors || {}).forEach(([k, v]) => html.style.setProperty(k, v))
|
||||
})
|
||||
})
|
||||
|
@ -15,7 +15,7 @@ export default defineNuxtPlugin(() => {
|
||||
const settings = allSettings[handle]
|
||||
if (!settings) { return }
|
||||
|
||||
const html = document.querySelector('html')
|
||||
const html = document.documentElement
|
||||
${process.dev ? 'console.log({ settings })' : ''}
|
||||
|
||||
if (settings.fontSize) {
|
||||
@ -28,6 +28,9 @@ export default defineNuxtPlugin(() => {
|
||||
if (settings.zenMode) {
|
||||
html.classList.add('zen')
|
||||
}
|
||||
if (settings.themeColors) {
|
||||
Object.entries(settings.themeColors).map(i => html.style.setProperty(i[0], i[1]))
|
||||
}
|
||||
})()`.trim().replace(/\s*\n+\s*/g, ';'),
|
||||
},
|
||||
],
|
||||
|
@ -59,6 +59,7 @@ importers:
|
||||
'@tiptap/starter-kit': 2.0.0-beta.204
|
||||
'@tiptap/suggestion': 2.0.0-beta.204
|
||||
'@tiptap/vue-3': 2.0.0-beta.204
|
||||
'@types/chroma-js': ^2.1.4
|
||||
'@types/file-saver': ^2.0.5
|
||||
'@types/fnando__sparkline': ^0.3.4
|
||||
'@types/fs-extra': ^11.0.0
|
||||
@ -77,6 +78,7 @@ importers:
|
||||
blurhash: ^2.0.4
|
||||
browser-fs-access: ^0.31.1
|
||||
bumpp: ^8.2.1
|
||||
chroma-js: ^2.4.2
|
||||
emoji-mart: ^5.4.0
|
||||
eslint: ^8.31.0
|
||||
esno: ^0.16.3
|
||||
@ -179,6 +181,7 @@ importers:
|
||||
'@nuxtjs/color-mode': 3.2.0
|
||||
'@nuxtjs/i18n': 8.0.0-beta.7
|
||||
'@pinia/nuxt': 0.4.6_typescript@4.9.4
|
||||
'@types/chroma-js': 2.1.4
|
||||
'@types/file-saver': 2.0.5
|
||||
'@types/fnando__sparkline': 0.3.4
|
||||
'@types/fs-extra': 11.0.0
|
||||
@ -191,6 +194,7 @@ importers:
|
||||
'@vueuse/math': 9.10.0
|
||||
'@vueuse/nuxt': 9.10.0_nuxt@3.0.0
|
||||
bumpp: 8.2.1
|
||||
chroma-js: 2.4.2
|
||||
emoji-mart: 5.4.0
|
||||
eslint: 8.31.0
|
||||
esno: 0.16.3
|
||||
@ -3116,6 +3120,10 @@ packages:
|
||||
resolution: {integrity: sha512-KnRanxnpfpjUTqTCXslZSEdLfXExwgNxYPdiO2WGUj8+HDjFi8R3k5RVKPeSCzLjCcshCAtVO2QBbVuAV4kTnw==}
|
||||
dev: true
|
||||
|
||||
/@types/chroma-js/2.1.4:
|
||||
resolution: {integrity: sha512-l9hWzP7cp7yleJUI7P2acmpllTJNYf5uU6wh50JzSIZt3fFHe+w2FM6w9oZGBTYzjjm2qHdnQvI+fF/JF/E5jQ==}
|
||||
dev: true
|
||||
|
||||
/@types/debug/4.1.7:
|
||||
resolution: {integrity: sha512-9AonUzyTjXXhEOa0DnqpzZi6VHlqKMswga9EXjpXnnqxwLtdvPPtlO8evrI5D9S6asFRCQ6v+wpiUKbw+vKqyg==}
|
||||
dependencies:
|
||||
|
31
scripts/generate-themes.ts
Normal file
31
scripts/generate-themes.ts
Normal file
@ -0,0 +1,31 @@
|
||||
import chroma from 'chroma-js'
|
||||
import type { ThemeColors } from '~/composables/settings'
|
||||
|
||||
// #cc7d24 -> hcl(67.14,62.19,59.56)
|
||||
export const themesColor = Array.from(
|
||||
{ length: 9 },
|
||||
(_, i) => chroma.hcl((67.14 + i * 40) % 360, 62.19, 59.56).hex(),
|
||||
)
|
||||
|
||||
export function getThemeColors(primary: string): ThemeColors {
|
||||
const c = chroma(primary)
|
||||
const dc = c.brighten(0.1)
|
||||
|
||||
return {
|
||||
'--theme-color-name': primary,
|
||||
|
||||
'--c-primary': 'rgb(var(--rgb-primary))',
|
||||
'--c-primary-active': c.darken(0.5).hex(),
|
||||
'--c-primary-light': c.alpha(0.5).hex(),
|
||||
'--c-primary-fade': c.darken(0.1).alpha(0.1).hex(),
|
||||
'--rgb-primary': c.rgb().join(', '),
|
||||
|
||||
'--c-dark-primary': 'rgb(var(--rgb-dark-primary))',
|
||||
'--c-dark-primary-active': dc.darken(0.5).hex(),
|
||||
'--c-dark-primary-light': dc.alpha(0.5).hex(),
|
||||
'--c-dark-primary-fade': dc.darken(0.1).alpha(0.1).hex(),
|
||||
'--rgb-dark-primary': c.rgb().join(', '),
|
||||
}
|
||||
}
|
||||
|
||||
export const colorsMap = themesColor.map(color => [color, getThemeColors(color)])
|
@ -1,12 +1,16 @@
|
||||
import { copy } from 'fs-extra'
|
||||
import fs from 'fs-extra'
|
||||
import { emojiPrefix, iconifyEmojiPackage } from '../config/emojis'
|
||||
import { colorsMap } from './generate-themes'
|
||||
|
||||
const dereference = process.platform === 'win32' ? true : undefined
|
||||
|
||||
await copy('node_modules/shiki-es/dist/assets', 'public/shiki/', {
|
||||
await fs.copy('node_modules/shiki-es/dist/assets', 'public/shiki/', {
|
||||
dereference,
|
||||
filter: src => src === 'node_modules/shiki/' || src.includes('languages') || src.includes('dist'),
|
||||
})
|
||||
await copy('node_modules/theme-vitesse/themes', 'public/shiki/themes', { dereference })
|
||||
await copy('node_modules/theme-vitesse/themes', 'node_modules/shiki/themes', { overwrite: true, dereference })
|
||||
await copy(`node_modules/${iconifyEmojiPackage}/icons`, `public/emojis/${emojiPrefix}`, { overwrite: true, dereference })
|
||||
await fs.copy('node_modules/theme-vitesse/themes', 'public/shiki/themes', { dereference })
|
||||
await fs.copy('node_modules/theme-vitesse/themes', 'node_modules/shiki/themes', { overwrite: true, dereference })
|
||||
await fs.copy(`node_modules/${iconifyEmojiPackage}/icons`, `public/emojis/${emojiPrefix}`, { overwrite: true, dereference })
|
||||
|
||||
await fs.writeJSON('constants/themes.json', colorsMap, { spaces: 2, EOL: '\n' })
|
||||
await fs.writeFile('styles/default-theme.css', `:root {\n${Object.entries(colorsMap[0][1]).map(([k, v]) => ` ${k}: ${v};`).join('\n')}\n}\n`, { encoding: 'utf-8' })
|
||||
|
13
styles/default-theme.css
Normal file
13
styles/default-theme.css
Normal file
@ -0,0 +1,13 @@
|
||||
:root {
|
||||
--theme-color-name: #cc7d24;
|
||||
--c-primary: rgb(var(--rgb-primary));
|
||||
--c-primary-active: #b16605;
|
||||
--c-primary-light: #cc7d2480;
|
||||
--c-primary-fade: #c7781f1a;
|
||||
--rgb-primary: 204, 125, 36;
|
||||
--c-dark-primary: rgb(var(--rgb-dark-primary));
|
||||
--c-dark-primary-active: #b66b0d;
|
||||
--c-dark-primary-light: #d1822980;
|
||||
--c-dark-primary-fade: #cc7d241a;
|
||||
--rgb-dark-primary: 204, 125, 36;
|
||||
}
|
@ -1,12 +1,13 @@
|
||||
.ProseMirror p.is-editor-empty:first-child::before {
|
||||
content: attr(data-placeholder);
|
||||
float: left;
|
||||
pointer-events: none;
|
||||
height: 0;
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
span[data-type='mention'],
|
||||
span[data-type='hashtag'] {
|
||||
--at-apply: text-primary;
|
||||
.ProseMirror {
|
||||
p.is-editor-empty:first-child::before {
|
||||
content: attr(data-placeholder);
|
||||
float: left;
|
||||
pointer-events: none;
|
||||
height: 0;
|
||||
opacity: 0.4;
|
||||
}
|
||||
span[data-type='mention'],
|
||||
span[data-type='hashtag'] {
|
||||
--at-apply: text-primary;
|
||||
}
|
||||
}
|
||||
|
@ -1,17 +1,15 @@
|
||||
:root {
|
||||
--c-primary: #d98018;
|
||||
--c-primary-active: #9a5420;
|
||||
--c-primary-light: #d980181A;
|
||||
--c-border: #eee;
|
||||
--c-border-dark: #dccfcf;
|
||||
|
||||
--c-bg-base: #fafafa;
|
||||
--c-bg-base-rgb: 250, 250, 250;
|
||||
--rgb-bg-base: 250, 250, 250;
|
||||
|
||||
--c-bg-base: rgb(var(--rgb-bg-base));
|
||||
|
||||
--c-bg-active: #f2f2f2;
|
||||
--c-bg-card: #00000006;
|
||||
--c-bg-code: #00000006;
|
||||
--c-bg-selection: #8885;
|
||||
--c-bg-fade: #EA9E4411;
|
||||
--c-bg-dm: #f1e8e6;
|
||||
|
||||
--c-text-base: #232323;
|
||||
@ -29,19 +27,19 @@
|
||||
}
|
||||
|
||||
.dark {
|
||||
--c-primary: #EA9E44;
|
||||
--c-primary-active: #C16929;
|
||||
--c-primary-light: #EA9E441A;
|
||||
--c-primary: var(--c-dark-primary);
|
||||
--c-primary-active: var(--c-dark-primary-active);
|
||||
--c-primary-light: var(--c-dark-primary-light);
|
||||
--c-primary-fade: var(--c-dark-primary-fade);
|
||||
|
||||
--c-border: #222;
|
||||
--c-border-dark: #545251;
|
||||
|
||||
--c-bg-base: #111;
|
||||
--c-bg-base-rgb: 17, 17, 17;
|
||||
--rgb-bg-base: 17, 17, 17;
|
||||
|
||||
--c-bg-active: #191919;
|
||||
--c-bg-card: #ffffff06;
|
||||
--c-bg-code: #ffffff06;
|
||||
--c-bg-fade: #EA9E4411;
|
||||
--c-bg-dm: #0a2f35;
|
||||
|
||||
--c-text-base: #f3f3f3;
|
||||
|
@ -23,9 +23,9 @@ export default defineConfig({
|
||||
'bg-border': 'bg-$c-border',
|
||||
'bg-active': 'bg-$c-bg-active',
|
||||
'bg-primary-light': 'bg-$c-primary-light',
|
||||
'bg-primary-fade': 'bg-$c-primary-fade',
|
||||
'bg-card': 'bg-$c-bg-card',
|
||||
'bg-code': 'bg-$c-bg-code',
|
||||
'bg-fade': 'bg-$c-bg-fade',
|
||||
'bg-dm': 'bg-$c-bg-dm',
|
||||
|
||||
// text colors
|
||||
|
Loading…
Reference in New Issue
Block a user