new stuff yay
This commit is contained in:
parent
392e9dec12
commit
48d073a1de
GPG key ID:
874E22DF2F9DFCB5
41
app.vue
41
app.vue
|
|
@ -5,22 +5,11 @@
|
|||
@change='updateFont'
|
||||
>
|
||||
<option
|
||||
value=''
|
||||
disabled
|
||||
v-for='(value, key) in fonts'
|
||||
:key='key'
|
||||
:value='key'
|
||||
>
|
||||
Select a font...
|
||||
</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
|
||||
{{ value.name }}
|
||||
</option>
|
||||
</select>
|
||||
<select
|
||||
|
|
@ -29,22 +18,11 @@
|
|||
@change='updateTheme'
|
||||
>
|
||||
<option
|
||||
value=''
|
||||
disabled
|
||||
v-for='(value, key) in themes'
|
||||
:key='key'
|
||||
:value='key'
|
||||
>
|
||||
Select a theme...
|
||||
</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
|
||||
{{ value.name }}
|
||||
</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('')
|
||||
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
},
|
||||
|
|
|
|||
|
|
@ -10,10 +10,11 @@
|
|||
"postinstall": "nuxt prepare"
|
||||
},
|
||||
"dependencies": {
|
||||
"@fontsource-variable/fira-code": "^5.0.19",
|
||||
"@fontsource-variable/jetbrains-mono": "^5.0.22",
|
||||
"@fontsource-variable/source-code-pro": "^5.0.20",
|
||||
"@fontsource/fira-code": "^5.0.19",
|
||||
"@fontsource/jetbrains-mono": "^5.0.21",
|
||||
"@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"
|
||||
|
|
|
|||
18
types/fonts.ts
Normal file
18
types/fonts.ts
Normal file
|
|
@ -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',
|
||||
},
|
||||
}
|
||||
54
types/themes.ts
Normal file
54
types/themes.ts
Normal file
|
|
@ -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]),
|
||||
)
|
||||
|
|
@ -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: {
|
||||
colors: {
|
||||
text: '#4c4f69',
|
||||
subtext: '#5c5f77',
|
||||
bg: '#eff1f5',
|
||||
},
|
||||
},
|
||||
theme: themesWithoutName['catppuccin-mocha'],
|
||||
presets: [
|
||||
presetUno(),
|
||||
presetAttributify(),
|
||||
presetTypography(),
|
||||
presetIcons(),
|
||||
presetTheme<Theme>({
|
||||
theme: {
|
||||
'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',
|
||||
},
|
||||
},
|
||||
},
|
||||
theme: themesWithoutName,
|
||||
}) as PresetFactory<Theme>,
|
||||
],
|
||||
transformers: [transformerDirectives(), transformerVariantGroup(), transformerCompileClass()],
|
||||
|
|
|
|||
Loading…
Reference in a new issue