From f5e234df5d4bb4ffc1053d5fb2c0a97d1a563208 Mon Sep 17 00:00:00 2001
From: uncenter <47499684+uncenter@users.noreply.github.com>
Date: Sun, 28 Jan 2024 13:35:35 -0500
Subject: [PATCH 1/2] chore(playground): update `` with theme name,
improved styling
---
playground/index.html | 5 ++---
playground/src/App.vue | 16 ++++++++++++----
2 files changed, 14 insertions(+), 7 deletions(-)
diff --git a/playground/index.html b/playground/index.html
index 8719d99..c1940eb 100644
--- a/playground/index.html
+++ b/playground/index.html
@@ -3,9 +3,8 @@
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
- <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
- <title>Vitesse Lite
-
+
+
diff --git a/playground/src/App.vue b/playground/src/App.vue
index 86fd0a0..c77cd95 100644
--- a/playground/src/App.vue
+++ b/playground/src/App.vue
@@ -14,6 +14,8 @@ const output = ref('')
async function run() {
error.value = null
+ // @ts-expect-error: element does exist.
+ document.querySelector('head title').textContent = themes.find(({ name }) => name === theme.value)?.displayName
try {
const themeObject = await import(`../../packages/tm-themes/themes/${theme.value}.json`).then(m => m.default)
const langs = new Map<string, any>()
@@ -56,8 +58,8 @@ watch([theme, grammar], run, { immediate: true })
</script>
<template>
- <div h-100vh w-full grid="~ cols-[200px_200px_5fr] gap-4" px4>
- <div h-full border="x base" of-auto flex="~ col">
+ <div h-100vh w-full grid="~ cols-[200px_200px_5fr] gap-4" p4>
+ <div h-full border="x base y base" of-auto flex="~ col">
<button
v-for="t of themes"
:key="t.name"
@@ -68,7 +70,7 @@ watch([theme, grammar], run, { immediate: true })
{{ t.displayName }}
</button>
</div>
- <div h-full border="x base" of-auto flex="~ col">
+ <div h-full border="x base y base" of-auto flex="~ col">
<button
v-for="g of grammars"
:key="g.name"
@@ -84,7 +86,7 @@ watch([theme, grammar], run, { immediate: true })
<div v-if="error" text-red bg-red:10 p6 rounded>
{{ error }}
</div>
- <div my4 v-html="output" />
+ <div v-html="output" />
</div>
</div>
</template>
@@ -96,4 +98,10 @@ watch([theme, grammar], run, { immediate: true })
padding: 10px;
--uno: border border-base rounded p4;
}
+:root {
+ color-scheme: light;
+}
+:root.dark {
+ color-scheme: dark;
+}
</style>
From 0ad1c9508e2a60877673de821d694e41c7177e46 Mon Sep 17 00:00:00 2001
From: uncenter <47499684+uncenter@users.noreply.github.com>
Date: Sun, 28 Jan 2024 13:40:47 -0500
Subject: [PATCH 2/2] impr: store all theme info
---
playground/src/App.vue | 13 +++++++------
1 file changed, 7 insertions(+), 6 deletions(-)
diff --git a/playground/src/App.vue b/playground/src/App.vue
index c77cd95..6764f5b 100644
--- a/playground/src/App.vue
+++ b/playground/src/App.vue
@@ -1,11 +1,12 @@
<script setup lang="ts">
import { getHighlighterCore } from 'shiki/core'
+import type { ThemeInfo } from '../../packages/tm-themes/index'
import { themes } from '../../packages/tm-themes/index'
import { grammars } from '../../packages/tm-grammars/index'
useDark()
-const theme = useStorage('tm-theme', 'vitest-dark')
+const theme = useStorage('tm-theme', themes.find(t => t.name === 'vitest-dark') as ThemeInfo)
const grammar = useStorage('tm-grammar', 'javascript')
const error = ref<any>(null)
@@ -15,9 +16,9 @@ const output = ref('')
async function run() {
error.value = null
// @ts-expect-error: <title> element does exist.
- document.querySelector('head title').textContent = themes.find(({ name }) => name === theme.value)?.displayName
+ document.querySelector('head title').textContent = theme.value.displayName
try {
- const themeObject = await import(`../../packages/tm-themes/themes/${theme.value}.json`).then(m => m.default)
+ const themeObject = await import(`../../packages/tm-themes/themes/${theme.value.name}.json`).then(m => m.default)
const langs = new Map<string, any>()
input.value = await import(`../../samples/${grammar.value}.sample?raw`).then(m => m.default)
@@ -44,7 +45,7 @@ async function run() {
const result = highlighter.codeToHtml(input.value, {
lang: grammar.value,
- theme: theme.value,
+ theme: theme.value.name,
})
output.value = result
}
@@ -64,8 +65,8 @@ watch([theme, grammar], run, { immediate: true })
v-for="t of themes"
:key="t.name"
border="b base" px3 py1 text-left
- :class="t.name === theme ? 'bg-active text-primary' : 'text-faded'"
- @click="theme = t.name"
+ :class="t.name === theme.name ? 'bg-active text-primary' : 'text-faded'"
+ @click="theme = t"
>
{{ t.displayName }}
</button>