new stuff yay

app.vue

@@ -5,22 +5,11 @@
     @change='updateFont'
   >
     <option
-      value=''
+      v-for='(value, key) in fonts'
-      disabled
+      :key='key'
+      :value='key'
     >
-      Select a font...
+      {{ value.name }}
-    </option>
-    <option value='JetBrains Mono'>
-      JetBrains Mono
-    </option>
-    <option value='Source Code Pro'>
-      Source Code Pro
-    </option>
-    <option value='Fira Code'>
-      Fira Code
-    </option>
-    <option value='Ubuntu Mono'>
-      Ubuntu Mono
     </option>
   </select>
   <select
@@ -29,22 +18,11 @@
     @change='updateTheme'
   >
     <option
-      value=''
+      v-for='(value, key) in themes'
-      disabled
+      :key='key'
+      :value='key'
     >
-      Select a theme...
+      {{ value.name }}
-    </option>
-    <option value='catppuccin-latte'>
-      Catppuccin Latte
-    </option>
-    <option value='catppuccin-frappe'>
-      Catppuccin Frappe
-    </option>
-    <option value='catppuccin-macchiato'>
-      Catppuccin Macchiato
-    </option>
-    <option value='catppuccin-mocha'>
-      Catppuccin Mocha
     </option>
   </select>
   <NuxtRouteAnnouncer />
@@ -52,6 +30,9 @@
 </template>
 
 <script setup>
+import { themes } from '~/types/themes'
+import { fonts } from '~/types/fonts'
+
 const { theme, setTheme } = useTheme()
 const selectedTheme = ref('')
 

composables/useFont.ts

@@ -1,19 +1,24 @@
 import { ref, onMounted } from 'vue'
+import { fonts } from '~/types/fonts'
+
+const fontNames = Object.keys(fonts)
 
 export const useFont = () => {
-  const font = ref('JetBrains Mono')
+  const font = ref('jetbrains-mono')
 
   onMounted(() => {
     const storedFont = localStorage.getItem('font')
     if (storedFont) {
       font.value = storedFont
-      document.body.style.fontFamily = storedFont
+      document.body.classList.remove(...fontNames)
+      document.body.classList.add(storedFont)
     }
   })
 
   const setFont = (newFont: string) => {
     font.value = newFont
-    document.body.style.fontFamily = newFont
+    document.body.classList.remove(...fontNames)
+    document.body.classList.add(newFont)
     localStorage.setItem('font', newFont)
   }
 

composables/useTheme.ts

@@ -1,6 +1,7 @@
 import { ref, onMounted } from 'vue'
+import { themes } from '~/types/themes'
 
-const themes = ['catppuccin-latte', 'catppuccin-frappe', 'catppuccin-macchiato', 'catppuccin-mocha']
+const themeNames = Object.keys(themes)
 
 export const useTheme = () => {
   const theme = ref('catppuccin-mocha')
@@ -9,14 +10,14 @@ export const useTheme = () => {
     const storedTheme = localStorage.getItem('theme')
     if (storedTheme) {
       theme.value = storedTheme
-      document.body.classList.remove(...themes)
+      document.body.classList.remove(...themeNames)
       document.body.classList.add(storedTheme)
     }
   })
 
   const setTheme = (newTheme: string) => {
     theme.value = newTheme
-    document.body.classList.remove(...themes)
+    document.body.classList.remove(...themeNames)
     document.body.classList.add(newTheme)
     localStorage.setItem('theme', newTheme)
   }

nuxt.config.ts

@@ -1,3 +1,5 @@
+import { fonts } from './types/fonts'
+
 export default defineNuxtConfig({
   compatibilityDate: '2024-04-03',
   devtools: { enabled: true },
@@ -11,10 +13,21 @@ export default defineNuxtConfig({
   },
   app: {
     head: {
+      style: [
+        {
+          children: Object.entries(fonts)
+            .map(([className, fontFamily]) => /* css */ `.${className} { font-family: '${fontFamily.name}', monospace; }`)
+            .join('\n'),
+        },
+      ],
       link: [
+        {
+          rel: 'preconnect',
+          href: 'https://fonts.bunny.net',
+        },
         {
           rel: 'stylesheet',
-          href: 'https://fonts.bunny.net/css?family=fira-code:300,400,500,600,700|jetbrains-mono:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i|source-code-pro:200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i|ubuntu-mono:400,400i,700,700i',
+          href: `https://fonts.bunny.net/css?family=${Object.values(fonts).map(({ link }) => link).join('|')}`,
         },
       ],
       script: [
@@ -35,7 +48,7 @@ export default defineNuxtConfig({
             const font = localStorage.getItem('font')
 
             if (font)
-              document.body.style.fontFamily = font
+              document.body.classList.add(font)
           `,
           tagPosition: 'bodyClose',
         },

package.json

@@ -10,10 +10,11 @@
     "postinstall": "nuxt prepare"
   },
   "dependencies": {
-    "@fontsource-variable/fira-code": "^5.0.19",
+    "@fontsource/fira-code": "^5.0.19",
-    "@fontsource-variable/jetbrains-mono": "^5.0.22",
+    "@fontsource/jetbrains-mono": "^5.0.21",
-    "@fontsource-variable/source-code-pro": "^5.0.20",
+    "@fontsource/source-code-pro": "^5.0.19",
     "@fontsource/ubuntu-mono": "^5.0.21",
+    "@nuxtjs/google-fonts": "^3.2.0",
     "nuxt": "^3.13.0",
     "unocss-preset-theme": "^0.13.0",
     "vue": "^3.4.38"

tsconfig.json

@@ -1,4 +1,4 @@
 {
   // https://nuxt.com/docs/guide/concepts/typescript
   "extends": "./.nuxt/tsconfig.json"
-}
+}

types/fonts.ts

@@ -0,0 +1,18 @@
+export const fonts = {
+  'jetbrains-mono': {
+    name: 'JetBrains Mono',
+    link: 'jetbrains-mono:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i',
+  },
+  'fira-code': {
+    name: 'Fira Code',
+    link: 'fira-code:300,400,500,600,700',
+  },
+  'source-code-pro': {
+    name: 'Source Code Pro',
+    link: 'source-code-pro:200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i',
+  },
+  'ubuntu-mono': {
+    name: 'Ubuntu Mono',
+    link: 'ubuntu-mono:400,400i,700,700i',
+  },
+}

types/themes.ts

@@ -0,0 +1,54 @@
+export const themes = {
+  'tokyonight-day': {
+    name: 'Tokyo Night (Day)',
+    colors: {
+      text: '#3760bf',
+      subtext: '#5c5f77',
+      bg: '#eff1f5',
+    },
+  },
+  'tokyonight-night': {
+    name: 'Tokyo Night (Night)',
+    colors: {
+      text: '#c0caf5',
+      subtext: '#a9b1d6',
+      bg: '#1a1b26',
+    },
+  },
+  'catppuccin-latte': {
+    name: 'Catppuccin (Latte)',
+    colors: {
+      text: '#4c4f69',
+      subtext: '#5c5f77',
+      bg: '#eff1f5',
+    },
+  },
+  'catppuccin-frappe': {
+    name: 'Catppuccin (Frappe)',
+    colors: {
+      text: '#c6d0f5',
+      subtext: '#b5bfe2',
+      bg: '#303446',
+    },
+  },
+  'catppuccin-macchiato': {
+    name: 'Catppuccin (Macchiato)',
+    colors: {
+      text: '#cad3f5',
+      subtext: '#b8c0e0',
+      bg: '#24273a',
+    },
+  },
+  'catppuccin-mocha': {
+    name: 'Catppuccin (Mocha)',
+    colors: {
+      text: '#cdd6f4',
+      subtext: '#bac2de',
+      bg: '#1e1e2e',
+    },
+  },
+}
+
+export const themesWithoutName = Object.fromEntries(
+  Object.entries(themes).map(([key, { name, ...rest }]) => [key, rest]),
+)

uno.config.ts

@@ -10,51 +10,17 @@ import {
 } from 'unocss'
 import type { Theme } from 'unocss/preset-uno'
 import presetTheme from 'unocss-preset-theme'
+import { themesWithoutName } from '~/types/themes'
 
 export default defineConfig<Theme>({
-  theme: {
+  theme: themesWithoutName['catppuccin-mocha'],
-    colors: {
-      text: '#4c4f69',
-      subtext: '#5c5f77',
-      bg: '#eff1f5',
-    },
-  },
   presets: [
     presetUno(),
     presetAttributify(),
     presetTypography(),
     presetIcons(),
     presetTheme<Theme>({
-      theme: {
+      theme: themesWithoutName,
-        'catppuccin-latte': {
-          colors: {
-            text: '#4c4f69',
-            subtext: '#5c5f77',
-            bg: '#eff1f5',
-          },
-        },
-        'catppuccin-frappe': {
-          colors: {
-            text: '#c6d0f5',
-            subtext: '#b5bfe2',
-            bg: '#303446',
-          },
-        },
-        'catppuccin-macchiato': {
-          colors: {
-            text: '#cad3f5',
-            subtext: '#b8c0e0',
-            bg: '#24273a',
-          },
-        },
-        'catppuccin-mocha': {
-          colors: {
-            text: '#cdd6f4',
-            subtext: '#bac2de',
-            bg: '#1e1e2e',
-          },
-        },
-      },
     }) as PresetFactory<Theme>,
   ],
   transformers: [transformerDirectives(), transformerVariantGroup(), transformerCompileClass()],