versia-pub/frontend
2
0
Fork 0
mirror of https://github.com/versia-pub/frontend.git synced 2025-12-06 16:38:20 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: ✨ use CSS variables for color themes

Browse source
This commit is contained in:
Jesse Wierzbinski 2024-06-15 16:39:58 -10:00
parent d1b9447caa
commit 56fc71185e
No known key found for this signature in database
3 changed files with 41 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
app.vue
View file

@ -10,6 +10,7 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import "~/styles/theme.css";
import { convert } from "html-to-text"; import { convert } from "html-to-text";
import "iconify-icon"; import "iconify-icon";
// Use SSR-safe IDs for Headless UI // Use SSR-safe IDs for Headless UI

25
styles/theme.css Normal file
View file

@ -0,0 +1,25 @@
:root {
--theme-dark-50: #4a4a4a;
--theme-dark-100: #3c3c3c;
--theme-dark-200: #323232;
--theme-dark-300: #2d2d2d;
--theme-dark-400: #222222;
--theme-dark-500: #1f1f1f;
--theme-dark-600: #1c1c1e;
--theme-dark-700: #1b1b1b;
--theme-dark-800: #181818;
--theme-dark-900: #0f0f0f;
--theme-dark-950: #080808;
--theme-primary-50: #fdf2f8;
--theme-primary-100: #fce7f3;
--theme-primary-200: #fbcfe8;
--theme-primary-300: #f9a8d4;
--theme-primary-400: #f472b6;
--theme-primary-500: #ec4899;
--theme-primary-600: #db2777;
--theme-primary-700: #be185d;
--theme-primary-800: #9d174d;
--theme-primary-900: #831843;
--theme-primary-950: #500724;
}

31
tailwind.config.ts
View file

@ -1,29 +1,28 @@
import forms from "@tailwindcss/forms"; import forms from "@tailwindcss/forms";
import typography from "@tailwindcss/typography"; import typography from "@tailwindcss/typography";
import type { Config } from "tailwindcss"; import type { Config } from "tailwindcss";
import colors from "tailwindcss/colors";
const dark = { const themeVariables = (color: string) => ({
50: "#4a4a4a", 50: `var(--theme-${color}-50)`,
100: "#3c3c3c", 100: `var(--theme-${color}-100)`,
200: "#323232", 200: `var(--theme-${color}-200)`,
300: "#2d2d2d", 300: `var(--theme-${color}-300)`,
400: "#222222", 400: `var(--theme-${color}-400)`,
500: "#1f1f1f", 500: `var(--theme-${color}-500)`,
600: "#1c1c1e", 600: `var(--theme-${color}-600)`,
700: "#1b1b1b", 700: `var(--theme-${color}-700)`,
800: "#181818", 800: `var(--theme-${color}-800)`,
900: "#0f0f0f", 900: `var(--theme-${color}-900)`,
950: "#080808", 950: `var(--theme-${color}-950)`,
}; });
// Default are on https://tailwindcss.nuxtjs.org/tailwind/config#default-configuration // Default are on https://tailwindcss.nuxtjs.org/tailwind/config#default-configuration
export default (<Partial<Config>>{ export default (<Partial<Config>>{
theme: { theme: {
extend: { extend: {
colors: { colors: {
dark, dark: themeVariables("dark"),
primary: colors.pink, primary: themeVariables("primary"),
}, },
animation: { animation: {
like: "like 1s ease-in-out", like: "like 1s ease-in-out",