Added dark mode to docs

Refactor

Author: rohitpotato

generateDocSnippets.js

@@ -8,6 +8,7 @@ export const generateSnippets = async () => {
 const highlighter = await shiki.getHighlighter({ theme: 'github-dark-dimmed' });
 // for each file, convert to html
 const generatedMarkup = files.map(async (file) => {
+console.log(`Generating docs: ${file}`);
 const content = await fs.readFile(path.join(__dirname, `./snippets/${file}`), 'utf-8');
 const html = highlighter.codeToHtml(content, { lang: 'svelte' });
 return {

snippets/styling.txt

@@ -0,0 +1,27 @@
+<CommandPalette
+unstyled={false}
+placeholder={paletteTheme.placeholder}
+commands={actions}
+keyboardButtonClass="bg-red-500"
+inputClass="bg-blue-200"
+overlayClass="bg-gray-200"
+paletteWrapperInnerClass="w-full"
+resultsContainerClass="h-max"
+resultContainerClass="bg-black"
+optionSelectedClass="text-blue-200"
+subtitleClass="text-red-200"
+titleClass="text-red-500"
+descriptionClass=""
+overlayStyle={{ width: "200px", height: '500px' }}
+paletteWrapperInnerStyle={{ width: "200px", height: '500px' }}
+inputStyle={paletteTheme.inputStyles}
+resultsContainerStyle={paletteTheme.resultsContainerStyle}
+resultContainerStyle={paletteTheme.resultContainerStyle}
+titleStyle={paletteTheme.titleStyle}
+descriptionStyle={paletteTheme.descriptionStyle}
+subtitleStyle={paletteTheme.subtitleStyle}
+optionSelectedStyle={currentTheme === 'light'
+? { background: 'skyblue' }
+: { background: 'blue' }}
+keyboardButtonStyle={{}}
+/>

src/components/Navbar.svelte

@@ -1,23 +1,11 @@
 <script lang="ts">
-import themeStore from '../store/themeStore';
-const LIGHT = 'light';
-const DARK = 'dark';
-
-const handleThemeSwitch = () => {
-const theme = localStorage.getItem('theme') || 'light';
-const root = window.document.documentElement;
-const isDark = theme === DARK;
-root.classList.remove(theme);
-root.classList.add(isDark ? LIGHT : DARK);
-localStorage.setItem('theme', isDark ? LIGHT : DARK);
-themeStore.set(isDark ? LIGHT : DARK);
-};
+import switchTheme from '../utils/switchTheme';
 </script>
 
 <nav class="flex items-center justify-between shadow-sm py-6 px-8 dark:bg-dark-mode-gray">
 <a href="/" class="text-svelte-brand text-xl font-bold">Svelte Command Palette</a>
 <div class="flex gap-12 dark:text-svelte-brand">
-<button on:click={() => handleThemeSwitch()} type="button">Switch Theme</button>
+<button on:click={() => switchTheme()} type="button">Switch Theme</button>
 <a href="/docs">Docs</a>
 <a target="_blank" rel="noreferrer" href="https://github.com/rohitpotato/svelte-command-palette"
 >Github</a

src/components/Sidebar.svelte

@@ -1,12 +1,11 @@
 <script>
 import { page } from '$app/stores';
-console.log($page.url.pathname);
 </script>
 
-<aside class="sticky left-0 w-72 h-screen top-0 shadow-md">
+<aside class="sticky left-0 w-72 h-screen top-0 shadow-md min-w-max dark:bg-dark-mode-black">
 <nav class="p-4">
 <h4 class="text-2xl">Command Palette API</h4>
-<ul class="mt-4 flex flex-col gap-4">
+<ul class="mt-4 flex flex-col gap-4 dark:text-light-gray">
 <li
 class=" cursor-pointer tracking-wide hover:bg-svelte-brand rounded"
 class:bg-svelte-brand={$page.url.pathname === '/docs/command-palette-api'}
@@ -19,6 +18,12 @@
 >
 <a class="py-3 px-2 block w-full" href="/docs/palette-store">palette-store</a>
 </li>
+<li
+class=" cursor-pointer tracking-wide hover:bg-svelte-brand rounded"
+class:bg-svelte-brand={$page.url.pathname === '/docs/styling'}
+>
+<a class="py-3 px-2 block w-full" href="/docs/styling">Styling</a>
+</li>
 </ul>
 </nav>
 </aside>

src/routes/code/code.json.js

@@ -1,13 +1,10 @@
-import fs from 'fs/promises';
-import path from 'path';
-
 export async function get({ url }) {
 const file = url.searchParams.get('file');
 const allFiles = import.meta.glob('./*.html', { as: 'raw' });
- const fileToGet = Object.keys(allFiles).find((name) => {
- const fileName = name.split('/').pop()
- return fileName === file;
- })
+const fileToGet = Object.keys(allFiles).find((name) => {
+const fileName = name.split('/').pop();
+return fileName === file;
+});
 return {
 body: {
 html: allFiles[fileToGet]

src/routes/code/styling.html

@@ -0,0 +1,27 @@
+<pre class="shiki" style="background-color: #22272e"><code><span class="line"><span style="color: #ADBAC7">&lt;</span><span style="color: #8DDB8C">CommandPalette</span></span>
+<span class="line"><span style="color: #ADBAC7"></span><span style="color: #6CB6FF">unstyled</span><span style="color: #ADBAC7">={</span><span style="color: #6CB6FF">false</span><span style="color: #ADBAC7">}</span></span>
+<span class="line"><span style="color: #ADBAC7"></span><span style="color: #6CB6FF">placeholder</span><span style="color: #ADBAC7">={paletteTheme.placeholder}</span></span>
+<span class="line"><span style="color: #ADBAC7"></span><span style="color: #6CB6FF">commands</span><span style="color: #ADBAC7">={actions}</span></span>
+<span class="line"><span style="color: #ADBAC7"></span><span style="color: #6CB6FF">keyboardButtonClass</span><span style="color: #ADBAC7">=</span><span style="color: #96D0FF">&quot;bg-red-500&quot;</span></span>
+<span class="line"><span style="color: #ADBAC7"></span><span style="color: #6CB6FF">inputClass</span><span style="color: #ADBAC7">=</span><span style="color: #96D0FF">&quot;bg-blue-200&quot;</span></span>
+<span class="line"><span style="color: #ADBAC7"></span><span style="color: #6CB6FF">overlayClass</span><span style="color: #ADBAC7">=</span><span style="color: #96D0FF">&quot;bg-gray-200&quot;</span></span>
+<span class="line"><span style="color: #ADBAC7"></span><span style="color: #6CB6FF">paletteWrapperInnerClass</span><span style="color: #ADBAC7">=</span><span style="color: #96D0FF">&quot;w-full&quot;</span></span>
+<span class="line"><span style="color: #ADBAC7"></span><span style="color: #6CB6FF">resultsContainerClass</span><span style="color: #ADBAC7">=</span><span style="color: #96D0FF">&quot;h-max&quot;</span></span>
+<span class="line"><span style="color: #ADBAC7"></span><span style="color: #6CB6FF">resultContainerClass</span><span style="color: #ADBAC7">=</span><span style="color: #96D0FF">&quot;bg-black&quot;</span></span>
+<span class="line"><span style="color: #ADBAC7"></span><span style="color: #6CB6FF">optionSelectedClass</span><span style="color: #ADBAC7">=</span><span style="color: #96D0FF">&quot;text-blue-200&quot;</span></span>
+<span class="line"><span style="color: #ADBAC7"></span><span style="color: #6CB6FF">subtitleClass</span><span style="color: #ADBAC7">=</span><span style="color: #96D0FF">&quot;text-red-200&quot;</span></span>
+<span class="line"><span style="color: #ADBAC7"></span><span style="color: #6CB6FF">titleClass</span><span style="color: #ADBAC7">=</span><span style="color: #96D0FF">&quot;text-red-500&quot;</span></span>
+<span class="line"><span style="color: #ADBAC7"></span><span style="color: #6CB6FF">descriptionClass</span><span style="color: #ADBAC7">=</span><span style="color: #96D0FF">&quot;&quot;</span></span>
+<span class="line"><span style="color: #ADBAC7"></span><span style="color: #6CB6FF">overlayStyle</span><span style="color: #ADBAC7">={{ width: </span><span style="color: #96D0FF">&quot;200px&quot;</span><span style="color: #ADBAC7">, height: </span><span style="color: #96D0FF">&#39;500px&#39;</span><span style="color: #ADBAC7"> }}</span></span>
+<span class="line"><span style="color: #ADBAC7"></span><span style="color: #6CB6FF">paletteWrapperInnerStyle</span><span style="color: #ADBAC7">={{ width: </span><span style="color: #96D0FF">&quot;200px&quot;</span><span style="color: #ADBAC7">, height: </span><span style="color: #96D0FF">&#39;500px&#39;</span><span style="color: #ADBAC7"> }}</span></span>
+<span class="line"><span style="color: #ADBAC7"></span><span style="color: #6CB6FF">inputStyle</span><span style="color: #ADBAC7">={paletteTheme.inputStyles}</span></span>
+<span class="line"><span style="color: #ADBAC7"></span><span style="color: #6CB6FF">resultsContainerStyle</span><span style="color: #ADBAC7">={paletteTheme.resultsContainerStyle}</span></span>
+<span class="line"><span style="color: #ADBAC7"></span><span style="color: #6CB6FF">resultContainerStyle</span><span style="color: #ADBAC7">={paletteTheme.resultContainerStyle}</span></span>
+<span class="line"><span style="color: #ADBAC7"></span><span style="color: #6CB6FF">titleStyle</span><span style="color: #ADBAC7">={paletteTheme.titleStyle}</span></span>
+<span class="line"><span style="color: #ADBAC7"></span><span style="color: #6CB6FF">descriptionStyle</span><span style="color: #ADBAC7">={paletteTheme.descriptionStyle}</span></span>
+<span class="line"><span style="color: #ADBAC7"></span><span style="color: #6CB6FF">subtitleStyle</span><span style="color: #ADBAC7">={paletteTheme.subtitleStyle}</span></span>
+<span class="line"><span style="color: #ADBAC7"></span><span style="color: #6CB6FF">optionSelectedStyle</span><span style="color: #ADBAC7">={currentTheme </span><span style="color: #F47067">===</span><span style="color: #ADBAC7"> </span><span style="color: #96D0FF">&#39;light&#39;</span></span>
+<span class="line"><span style="color: #ADBAC7"></span><span style="color: #F47067">?</span><span style="color: #ADBAC7"> { background: </span><span style="color: #96D0FF">&#39;skyblue&#39;</span><span style="color: #ADBAC7"> }</span></span>
+<span class="line"><span style="color: #ADBAC7"></span><span style="color: #F47067">:</span><span style="color: #ADBAC7"> { background: </span><span style="color: #96D0FF">&#39;blue&#39;</span><span style="color: #ADBAC7"> }}</span></span>
+<span class="line"><span style="color: #ADBAC7"></span><span style="color: #6CB6FF">keyboardButtonStyle</span><span style="color: #ADBAC7">={{}}</span></span>
+<span class="line"><span style="color: #ADBAC7">/&gt;</span></span></code></pre>

src/routes/docs/__layout@doc.svelte

@@ -4,7 +4,7 @@
 </script>
 
 <Navbar />
-<div class="flex">
+<div class="flex dark:text-white dark:bg-dark-mode-gray">
 <Sidebar />
 <main class="px-12 py-4"><slot /></main>
 </div>

src/routes/docs/styling.svelte

@@ -0,0 +1,40 @@
+<script context="module">
+export async function load({ fetch }) {
+let data = await fetch('/code/code.json?file=styling.html');
+data = await data.json();
+return {
+props: {
+html: data.html
+}
+};
+}
+</script>
+
+<script lang="ts">
+export let html: string;
+</script>
+
+<div class="flex flex-col gap-5 my-4">
+<h1 class="text-2xl font-semibold">Styling</h1>
+<h3 class="text-lg font-medium">
+You have complete control over the styling of the command palette
+</h3>
+
+<h3 class="text-lg font-medium">
+You can use classes (tailwind too) to style the command palette. Note that svelte applies the
+scoped classes with priority, to overwrite this, pass <pre class="inline">unstyled={true}</pre>
+</h3>
+
+<h3 class="text-lg font-medium">
+Or just directly pass css styles to completely change the look and feel of the command palette
+</h3>
+</div>
+
+<div>{@html html}</div>
+
+<style>
+div > :global(pre) {
+padding: 2rem;
+border-radius: 0.4rem;
+}
+</style>

src/routes/index.svelte

@@ -4,6 +4,7 @@
 import Hero from '../components/Hero.svelte';
 import CommandPalette, { defineActions, paletteStore } from '../lib';
 import themeStore from '../store/themeStore';
+import switchTheme from '../utils/switchTheme';
 
 type Themes = string | null;
 
@@ -34,6 +35,13 @@
 },
 shortcut: 'D D'
 },
+{
+title: 'Switch Theme',
+subTitle: 'Switch theme to see palette reflecting new theme',
+description: 'New feature, not customise command-palette however you want',
+shortcut: 'S T',
+onRun: switchTheme
+},
 {
 title: 'Increment Counter',
 subTitle: 'This will increment the counter',

src/utils/switchTheme.js

@@ -0,0 +1,15 @@
+import themeStore from '../store/themeStore';
+const LIGHT = 'light';
+const DARK = 'dark';
+
+const handleThemeSwitch = () => {
+const theme = localStorage.getItem('theme') || 'light';
+const root = window.document.documentElement;
+const isDark = theme === DARK;
+root.classList.remove(theme);
+root.classList.add(isDark ? LIGHT : DARK);
+localStorage.setItem('theme', isDark ? LIGHT : DARK);
+themeStore.set(isDark ? LIGHT : DARK);
+};
+
+export default handleThemeSwitch;