Niklas/shadcn-vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: customizer code text color (#125)

Browse Source 
Added text-white on code lines
This commit is contained in:
Xavier Vila Rubio 2023-10-22 07:50:30 +02:00 committed by GitHub
parent b2caaca1e2
commit 90e926b14b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 22 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
apps/www/.vitepress/theme/components/CustomizerCode.vue
View File

@ -23,32 +23,32 @@ async function copyCode() {
<div class="relative"> <div class="relative">
<pre class="max-h-[450px] overflow-x-auto rounded-lg border bg-zinc-950 !py-0 dark:bg-zinc-900"> <pre class="max-h-[450px] overflow-x-auto rounded-lg border bg-zinc-950 !py-0 dark:bg-zinc-900">
<code ref="codeRef" class="relative block rounded font-mono text-sm"> <code ref="codeRef" class="relative block rounded font-mono text-sm">
<span class="line">@layer base &#123;</span> <span class="line text-white">@layer base &#123;</span>
<span class="line">:root &#123;</span> <span class="line text-white">:root &#123;</span>
<span class="line">&nbsp;&nbsp;--background: {{ activeTheme?.cssVars.light.background }};</span> <span class="line text-white">&nbsp;&nbsp;--background: {{ activeTheme?.cssVars.light.background }};</span>
<span class="line">&nbsp;&nbsp;--foreground: {{ activeTheme?.cssVars.light.foreground }};</span> <span class="line text-white">&nbsp;&nbsp;--foreground: {{ activeTheme?.cssVars.light.foreground }};</span>
<template v-for="prefix in (['card', 'popover', 'primary', 'secondary', 'muted', 'accent', 'destructive'] as const)" :key="prefix"> <template v-for="prefix in (['card', 'popover', 'primary', 'secondary', 'muted', 'accent', 'destructive'] as const)" :key="prefix">
<span class="line">--{{ prefix }}: {{ activeTheme?.cssVars.light[prefix] }};</span> <span class="line text-white">--{{ prefix }}: {{ activeTheme?.cssVars.light[prefix] }};</span>
<span class="line">--{{ prefix }}-foreground: {{ activeTheme?.cssVars.light[ `${prefix}-foreground`] }};</span> <span class="line text-white">--{{ prefix }}-foreground: {{ activeTheme?.cssVars.light[ `${prefix}-foreground`] }};</span>
</template> </template>
<span class="line">&nbsp;&nbsp;--border:{{ activeTheme?.cssVars.light.border }};</span> <span class="line text-white">&nbsp;&nbsp;--border:{{ activeTheme?.cssVars.light.border }};</span>
<span class="line">&nbsp;&nbsp;--input:{{ activeTheme?.cssVars.light.input }};</span> <span class="line text-white">&nbsp;&nbsp;--input:{{ activeTheme?.cssVars.light.input }};</span>
<span class="line">&nbsp;&nbsp;--ring:{{ activeTheme?.cssVars.light.ring }};</span> <span class="line text-white">&nbsp;&nbsp;--ring:{{ activeTheme?.cssVars.light.ring }};</span>
<span class="line">&nbsp;&nbsp;--radius: {{ config.radius }}rem;</span> <span class="line text-white">&nbsp;&nbsp;--radius: {{ config.radius }}rem;</span>
<span class="line">&#125;</span> <span class="line text-white">&#125;</span>
<span class="line">&nbsp;</span> <span class="line text-white">&nbsp;</span>
<span class="line">.dark &#123;</span> <span class="line text-white">.dark &#123;</span>
<span class="line">&nbsp;&nbsp;--background:{{ activeTheme?.cssVars.dark.background }};</span> <span class="line text-white">&nbsp;&nbsp;--background:{{ activeTheme?.cssVars.dark.background }};</span>
<span class="line">&nbsp;&nbsp;--foreground:{{ activeTheme?.cssVars.dark.foreground }};</span> <span class="line text-white">&nbsp;&nbsp;--foreground:{{ activeTheme?.cssVars.dark.foreground }};</span>
<template v-for="prefix in (['card', 'popover', 'primary', 'secondary', 'muted', 'accent', 'destructive'] as const)" :key="prefix"> <template v-for="prefix in (['card', 'popover', 'primary', 'secondary', 'muted', 'accent', 'destructive'] as const)" :key="prefix">
<span class="line">--{{ prefix }}:{{ activeTheme?.cssVars.dark[ prefix] }};</span> <span class="line text-white">--{{ prefix }}:{{ activeTheme?.cssVars.dark[ prefix] }};</span>
<span class="line">--{{ prefix }}-foreground:{{ activeTheme?.cssVars.dark[ `${prefix}-foreground`] }};</span> <span class="line text-white">--{{ prefix }}-foreground:{{ activeTheme?.cssVars.dark[ `${prefix}-foreground`] }};</span>
</template> </template>
<span class="line">&nbsp;&nbsp;--border:{{ activeTheme?.cssVars.dark.border }};</span> <span class="line text-white">&nbsp;&nbsp;--border:{{ activeTheme?.cssVars.dark.border }};</span>
<span class="line">&nbsp;&nbsp;--input:{{ activeTheme?.cssVars.dark.input }};</span> <span class="line text-white">&nbsp;&nbsp;--input:{{ activeTheme?.cssVars.dark.input }};</span>
<span class="line">&nbsp;&nbsp;--ring:{{ activeTheme?.cssVars.dark.ring }};</span> <span class="line text-white">&nbsp;&nbsp;--ring:{{ activeTheme?.cssVars.dark.ring }};</span>
<span class="line">&#125;</span> <span class="line text-white">&#125;</span>
<span class="line">&#125;</span> <span class="line text-white">&#125;</span>
</code> </code>
</pre> </pre>
<Button size="sm" class="absolute right-4 top-4 bg-muted text-muted-foreground hover:bg-muted hover:text-muted-foreground" @click="copyCode"> <Button size="sm" class="absolute right-4 top-4 bg-muted text-muted-foreground hover:bg-muted hover:text-muted-foreground" @click="copyCode">