Skip to content

Commit 4c81624

Browse files
rohitpotatorohitpotato
committed
Added dark mode to docs
Refactor
1 parent 0f056c1 commit 4c81624

File tree

10 files changed

+133
-25
lines changed

10 files changed

+133
-25
lines changed

‎generateDocSnippets.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ export const generateSnippets = async () => {
88
const highlighter = await shiki.getHighlighter({ theme: 'github-dark-dimmed' });
99
// for each file, convert to html
1010
const generatedMarkup = files.map(async (file) => {
11+
console.log(`Generating docs: ${file}`);
1112
const content = await fs.readFile(path.join(__dirname, `./snippets/${file}`), 'utf-8');
1213
const html = highlighter.codeToHtml(content, { lang: 'svelte' });
1314
return {

‎snippets/styling.txt‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<CommandPalette
2+
unstyled={false}
3+
placeholder={paletteTheme.placeholder}
4+
commands={actions}
5+
keyboardButtonClass="bg-red-500"
6+
inputClass="bg-blue-200"
7+
overlayClass="bg-gray-200"
8+
paletteWrapperInnerClass="w-full"
9+
resultsContainerClass="h-max"
10+
resultContainerClass="bg-black"
11+
optionSelectedClass="text-blue-200"
12+
subtitleClass="text-red-200"
13+
titleClass="text-red-500"
14+
descriptionClass=""
15+
overlayStyle={{ width: "200px", height: '500px' }}
16+
paletteWrapperInnerStyle={{ width: "200px", height: '500px' }}
17+
inputStyle={paletteTheme.inputStyles}
18+
resultsContainerStyle={paletteTheme.resultsContainerStyle}
19+
resultContainerStyle={paletteTheme.resultContainerStyle}
20+
titleStyle={paletteTheme.titleStyle}
21+
descriptionStyle={paletteTheme.descriptionStyle}
22+
subtitleStyle={paletteTheme.subtitleStyle}
23+
optionSelectedStyle={currentTheme === 'light'
24+
? { background: 'skyblue' }
25+
: { background: 'blue' }}
26+
keyboardButtonStyle={{}}
27+
/>

‎src/components/Navbar.svelte‎

Lines changed: 2 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,11 @@
11
<script lang="ts">
2-
import themeStore from '../store/themeStore';
3-
const LIGHT = 'light';
4-
const DARK = 'dark';
5-
6-
const handleThemeSwitch = () => {
7-
const theme = localStorage.getItem('theme') || 'light';
8-
const root = window.document.documentElement;
9-
const isDark = theme === DARK;
10-
root.classList.remove(theme);
11-
root.classList.add(isDark ? LIGHT : DARK);
12-
localStorage.setItem('theme', isDark ? LIGHT : DARK);
13-
themeStore.set(isDark ? LIGHT : DARK);
14-
};
2+
import switchTheme from '../utils/switchTheme';
153
</script>
164

175
<nav class="flex items-center justify-between shadow-sm py-6 px-8 dark:bg-dark-mode-gray">
186
<a href="/" class="text-svelte-brand text-xl font-bold">Svelte Command Palette</a>
197
<div class="flex gap-12 dark:text-svelte-brand">
20-
<button on:click={() => handleThemeSwitch()} type="button">Switch Theme</button>
8+
<button on:click={() => switchTheme()} type="button">Switch Theme</button>
219
<a href="/docs">Docs</a>
2210
<a target="_blank" rel="noreferrer" href="https://github.com/rohitpotato/svelte-command-palette"
2311
>Github</a

‎src/components/Sidebar.svelte‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,11 @@
11
<script>
22
import { page } from '$app/stores';
3-
console.log($page.url.pathname);
43
</script>
54

6-
<aside class="sticky left-0 w-72 h-screen top-0 shadow-md">
5+
<aside class="sticky left-0 w-72 h-screen top-0 shadow-md min-w-max dark:bg-dark-mode-black">
76
<nav class="p-4">
87
<h4 class="text-2xl">Command Palette API</h4>
9-
<ul class="mt-4 flex flex-col gap-4">
8+
<ul class="mt-4 flex flex-col gap-4 dark:text-light-gray">
109
<li
1110
class=" cursor-pointer tracking-wide hover:bg-svelte-brand rounded"
1211
class:bg-svelte-brand={$page.url.pathname === '/docs/command-palette-api'}
@@ -19,6 +18,12 @@
1918
>
2019
<a class="py-3 px-2 block w-full" href="/docs/palette-store">palette-store</a>
2120
</li>
21+
<li
22+
class=" cursor-pointer tracking-wide hover:bg-svelte-brand rounded"
23+
class:bg-svelte-brand={$page.url.pathname === '/docs/styling'}
24+
>
25+
<a class="py-3 px-2 block w-full" href="/docs/styling">Styling</a>
26+
</li>
2227
</ul>
2328
</nav>
2429
</aside>

‎src/routes/code/code.json.js‎

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,10 @@
1-
import fs from 'fs/promises';
2-
import path from 'path';
3-
41
export async function get({ url }) {
52
const file = url.searchParams.get('file');
63
const allFiles = import.meta.glob('./*.html', { as: 'raw' });
7-
const fileToGet = Object.keys(allFiles).find((name) => {
8-
const fileName = name.split('/').pop()
9-
return fileName === file;
10-
})
4+
const fileToGet = Object.keys(allFiles).find((name) => {
5+
const fileName = name.split('/').pop();
6+
return fileName === file;
7+
});
118
return {
129
body: {
1310
html: allFiles[fileToGet]

‎src/routes/code/styling.html‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<pre class="shiki" style="background-color: #22272e"><code><span class="line"><span style="color: #ADBAC7">&lt;</span><span style="color: #8DDB8C">CommandPalette</span></span>
2+
<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>
3+
<span class="line"><span style="color: #ADBAC7"> </span><span style="color: #6CB6FF">placeholder</span><span style="color: #ADBAC7">={paletteTheme.placeholder}</span></span>
4+
<span class="line"><span style="color: #ADBAC7"> </span><span style="color: #6CB6FF">commands</span><span style="color: #ADBAC7">={actions}</span></span>
5+
<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>
6+
<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>
7+
<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>
8+
<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>
9+
<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>
10+
<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>
11+
<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>
12+
<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>
13+
<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>
14+
<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>
15+
<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>
16+
<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>
17+
<span class="line"><span style="color: #ADBAC7"> </span><span style="color: #6CB6FF">inputStyle</span><span style="color: #ADBAC7">={paletteTheme.inputStyles}</span></span>
18+
<span class="line"><span style="color: #ADBAC7"> </span><span style="color: #6CB6FF">resultsContainerStyle</span><span style="color: #ADBAC7">={paletteTheme.resultsContainerStyle}</span></span>
19+
<span class="line"><span style="color: #ADBAC7"> </span><span style="color: #6CB6FF">resultContainerStyle</span><span style="color: #ADBAC7">={paletteTheme.resultContainerStyle}</span></span>
20+
<span class="line"><span style="color: #ADBAC7"> </span><span style="color: #6CB6FF">titleStyle</span><span style="color: #ADBAC7">={paletteTheme.titleStyle}</span></span>
21+
<span class="line"><span style="color: #ADBAC7"> </span><span style="color: #6CB6FF">descriptionStyle</span><span style="color: #ADBAC7">={paletteTheme.descriptionStyle}</span></span>
22+
<span class="line"><span style="color: #ADBAC7"> </span><span style="color: #6CB6FF">subtitleStyle</span><span style="color: #ADBAC7">={paletteTheme.subtitleStyle}</span></span>
23+
<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>
24+
<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>
25+
<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>
26+
<span class="line"><span style="color: #ADBAC7"> </span><span style="color: #6CB6FF">keyboardButtonStyle</span><span style="color: #ADBAC7">={{}}</span></span>
27+
<span class="line"><span style="color: #ADBAC7">/&gt;</span></span></code></pre>

‎src/routes/docs/[email protected]‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
</script>
55

66
<Navbar />
7-
<div class="flex">
7+
<div class="flex dark:text-white dark:bg-dark-mode-gray">
88
<Sidebar />
99
<main class="px-12 py-4"><slot /></main>
1010
</div>

‎src/routes/docs/styling.svelte‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<script context="module">
2+
export async function load({ fetch }) {
3+
let data = await fetch('/code/code.json?file=styling.html');
4+
data = await data.json();
5+
return {
6+
props: {
7+
html: data.html
8+
}
9+
};
10+
}
11+
</script>
12+
13+
<script lang="ts">
14+
export let html: string;
15+
</script>
16+
17+
<div class="flex flex-col gap-5 my-4">
18+
<h1 class="text-2xl font-semibold">Styling</h1>
19+
<h3 class="text-lg font-medium">
20+
You have complete control over the styling of the command palette
21+
</h3>
22+
23+
<h3 class="text-lg font-medium">
24+
You can use classes (tailwind too) to style the command palette. Note that svelte applies the
25+
scoped classes with priority, to overwrite this, pass <pre class="inline">unstyled={true}</pre>
26+
</h3>
27+
28+
<h3 class="text-lg font-medium">
29+
Or just directly pass css styles to completely change the look and feel of the command palette
30+
</h3>
31+
</div>
32+
33+
<div>{@html html}</div>
34+
35+
<style>
36+
div > :global(pre) {
37+
padding: 2rem;
38+
border-radius: 0.4rem;
39+
}
40+
</style>

‎src/routes/index.svelte‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
import Hero from '../components/Hero.svelte';
55
import CommandPalette, { defineActions, paletteStore } from '../lib';
66
import themeStore from '../store/themeStore';
7+
import switchTheme from '../utils/switchTheme';
78
89
type Themes = string | null;
910
@@ -34,6 +35,13 @@
3435
},
3536
shortcut: 'D D'
3637
},
38+
{
39+
title: 'Switch Theme',
40+
subTitle: 'Switch theme to see palette reflecting new theme',
41+
description: 'New feature, not customise command-palette however you want',
42+
shortcut: 'S T',
43+
onRun: switchTheme
44+
},
3745
{
3846
title: 'Increment Counter',
3947
subTitle: 'This will increment the counter',

‎src/utils/switchTheme.js‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import themeStore from '../store/themeStore';
2+
const LIGHT = 'light';
3+
const DARK = 'dark';
4+
5+
const handleThemeSwitch = () => {
6+
const theme = localStorage.getItem('theme') || 'light';
7+
const root = window.document.documentElement;
8+
const isDark = theme === DARK;
9+
root.classList.remove(theme);
10+
root.classList.add(isDark ? LIGHT : DARK);
11+
localStorage.setItem('theme', isDark ? LIGHT : DARK);
12+
themeStore.set(isDark ? LIGHT : DARK);
13+
};
14+
15+
export default handleThemeSwitch;

0 commit comments

Comments
 (0)