chore: themes

package.json

@@ -15,7 +15,7 @@
   "license": "ISC",
   "devDependencies": {
     "@antfu/eslint-config": "^0.34.2",
-    "@es-js/docs-components": "^0.0.16",
+    "@es-js/docs-components": "^0.0.18",
     "@es-js/language-tools": "^0.0.15",
     "@iconify/vue": "^4.1.1",
     "autoprefixer": "^10.4.14",

src/.vitepress/config.ts

@@ -2,7 +2,6 @@ import { createWriteStream } from 'node:fs'
 import { resolve } from 'node:path'
 import { SitemapStream } from 'sitemap'
 import { defineConfigWithTheme } from 'vitepress'
-import { getHighlighter } from 'shikiji'
 // @ts-expect-error - esjsSyntax is a json file
 import esjsSyntax from '@es-js/language-tools/esjs.tmLanguage.json' assert {type: 'json'}
 import { metaData } from './constants'
@@ -19,17 +18,6 @@ export default async () => {
     scopeName: 'source.esjs',
   }
 
-  const highlighter = await getHighlighter({
-    langs: [
-      'javascript',
-      esjsLanguage,
-    ],
-    themes: [
-      'vitesse-light',
-      'vitesse-dark',
-    ],
-  })
-
   const defaultSidebar = [
     {
       text: 'Introducción',
@@ -98,15 +86,13 @@ export default async () => {
       title: metaData.title,
       description: metaData.description,
       markdown: {
-        highlight: (str: string, lang: string, attrs: string) => {
-          return highlighter.codeToHtml(str, {
-            lang,
-            themes: {
-              light: 'vitesse-light',
-              dark: 'vitesse-dark',
-            },
-          })
+        theme: {
+          light: 'vitesse-light',
+          dark: 'vitesse-dark',
         },
+        languages: [
+          esjsLanguage,
+        ],
       },
       cleanUrls: true,
 

src/.vitepress/theme/style.css

@@ -4,21 +4,20 @@
 
 /** Background colos */
 
-:root.dark {
-    --vp-c-brand: #B388FF;
-    --vp-c-brand-light: #9575CD;
-    --vp-c-brand-lighter: #B39DDB;
-    --vp-c-brand-dark: #673AB7;
-    --vp-c-brand-darker: #5E35B1;
-}
-
 :root {
     --vp-c-bg: theme('colors.gray.50');
     --vp-c-bg-alt: theme('colors.gray.100');
     --vp-c-bg-elv: #ffffff;
     --vp-c-bg-soft: #f6f6f7;
 }
 
+.dark {
+    --vp-c-bg: theme('colors.gray.900');
+    --vp-c-bg-alt: theme('colors.gray.900');
+    --vp-c-bg-elv: #202127;
+    --vp-c-bg-soft: #202127;
+}
+
 /** Text colors */
 
 :root {
@@ -36,11 +35,12 @@
     );
 }
 
-.dark {
-    --vp-c-bg: theme('colors.gray.900');
-    --vp-c-bg-alt: theme('colors.gray.900');
-    --vp-c-bg-elv: #202127;
-    --vp-c-bg-soft: #202127;
+:root.dark {
+    --vp-c-brand: #B388FF;
+    --vp-c-brand-light: #9575CD;
+    --vp-c-brand-lighter: #B39DDB;
+    --vp-c-brand-dark: #673AB7;
+    --vp-c-brand-darker: #5E35B1;
 }
 
 .accent {
@@ -86,10 +86,29 @@
 }
 
 .vp-doc div[class*='language-'] {
-    @apply rounded-lg border
+    @apply bg-white
+    border
+    rounded-lg;
+}
+.dark .vp-doc div[class*='language-'] {
+    @apply bg-[#121212]
+    border border-gray-700
+    rounded-lg;
 }
 
 /** Content on Home */
 .VPContent.is-home {
     padding-top: 0 !important;
 }
+
+/** InlinePlayground */
+
+.InlinePlayground {
+    /*@apply rounded-lg*/
+}
+.InlinePlayground > div > div[class*='language-'] {
+    @apply rounded-lg border
+}
+.InlinePlayground .EmbedPlayground iframe {
+    @apply rounded-lg border dark:border-gray-700
+}