Rohitkashyap/add theming support

README.md

@@ -1,12 +1,12 @@
 # Svelte Command Palette
 
-### Increase your productivity exponentially. 🚀🚀
+#### Increase your productivity exponentially. 🚀🚀
 
 #### Get started with command-palette with 2.1Kb Minified and ~700B Gzipped + Minified
 
 ## Demo
 
-![svelte-command-palette](https://rohit-misc.s3.ap-south-1.amazonaws.com/svelte-command-palette.gif)
+![svelte-command-palette](https://rohit-misc.s3.ap-south-1.amazonaws.com/svelte-command-palette.gif?response-content-disposition=inline&X-Amz-Security-Token=IQoJb3JpZ2luX2VjEAcaCmFwLXNvdXRoLTEiSDBGAiEArQtcSxpqlkpMiIXIRbzim6ygEdu%2FiWM0JafqMC67%2F%2FMCIQCyrjWfyugvigPDcM3KKLDMpybs7WuY6ia33eTzPtydBCrkAghAEAMaDDg0NzkwMjcyNzUyNCIMU0ZdGeUyXrP3cS%2BAKsECrRS0rQ1645z%2F1SjI2gh2nTd5z4HWvh4VO68TdetQudGZhAvWtAbqUi58xbKG10FtENPhIu%2FRxwOeDOF%2BWxXaEFisWKEcruAG1oo4s%2BMn%2BVGJwgIqNrXAG8XfuSviCT68XXPp2YZEnZ4RzFtxNxpsYfkEghpwtbXjATxmwnADyZQ4cogwScgUxZ7HaJkEm%2BSbEmSfj0nJ1AuY%2F%2BmP7AMHSvVA4ut7MaFtOtOb4jtSamsxmAv6JNeCmceGtAdzxXp0KWahWecXII4dR8fhY8ECygj3hQx23d90XBhmzzJvNW9EZj%2BTwSL4N43kjo4Bf9rDUuHdvs5nXHfYy%2B9tDj0P%2FmxE2A06zc8bq3wRHMa6oS5HCz5i2YdxkmcDo%2Fiwf%2FN%2BmzQyH%2FHkmcSUcu%2FQl7qx0M5lvhK91cujDasj8gOOM6hzMKOKr5YGOrIC8ycy1e2b2krfyhpHtYjRX1MkiOQ25oqZDwOZarY1iwrwNrvc%2FPzZoQvY%2FAFrf8%2BfbRUU6yC5RtJVBOzD8Fc207FethWt%2FLpPEHcB8APtM2wX%2FGFbTVUsNyb4zsTGfdgBdzY6HJbho0%2Fqsy7%2F%2FF0FKgInX3FLec3EFK3t%2BD10%2B6O72yO%2BsseBujEiqpOdnJahnUwycc9b4BQcltw3miOr7LOZUKqebSm8wt4z2VPBsTYTl8PMtfYr1%2BXzhTqTnfkgI3V9aYM4zagE4geh5SsJ5Jw%2FVKP8ueONkSylwupnI01PPRjs9KtYHLU7PIXRooUtbU21iK7JHn%2Fp0FmJEa50EhY30lGsB1ZaOaFO%2B2XzEH%2FYnuNCpiXyveUky9Y0h%2FTfd2bLdlGwLEc8sHRoHUqS7lVe&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Date=20220711T064152Z&X-Amz-SignedHeaders=host&X-Amz-Expires=300&X-Amz-Credential=ASIA4K2XQ3VSAZXZYFHE%2F20220711%2Fap-south-1%2Fs3%2Faws4_request&X-Amz-Signature=553d6bef29fd1c97022ab3a4db0af5505b9b6d89d925ddf7e3745375588c8f62)
 
 ## Features
 
@@ -31,17 +31,19 @@ Install svelte-command-palette with npm
 
 ```javascript
 <script>
-    import CommandPalette, { defineActions } from 'svelte-command-palette'
+    import CommandPalette, { defineActions, createStoreMethods } from 'svelte-command-palette'
 
     // define actions using the defineActions API
 
+    const paletteMethods = createStoreMethods();
+
     const actions = defineActions([
         {
-            actionId: 1,
+            id: 1,
             title: "Open Svelte Command Palette on github",
-            subTitle: "This opens github in a new tab!",
+            subTitle: 'This opens github in a new tab!",
             onRun: ({ action, storeProps, storeMethods }) => {
-                window.open("https://github.com/rohitpotato/svelte-command-palette")
+                window.open("https://github.com/rohitpotato/svelte-command-palette"),
             },
             shortcut: "Space k"
         }
@@ -50,6 +52,78 @@ Install svelte-command-palette with npm
 
 // render your command palette at the root of your application, say _layout.svelte
 
-<CommandPalette {actions} />
+<button on:click={() => paletteMethods.openPalette()}>Open Command Palette</button>
+
+<CommandPalette {actions}>
+
+
+```
+
+## API
+
+### Component Styling API
+
+The `<CommandPalette />` component accepts the following optional properties for styling:
+
+| Property                     | Type                             | Default                | Description                                                            |
+| ---------------------------- | -------------------------------- | ---------------------- | ---------------------------------------------------------------------- |
+| **unstyled**                 | boolean                          | `false`                | When `true`, the default styles are not applied to the modal elements. |
+| **placeholder**              | string                           | `"Search for actions"` | Placeholder for the command palette input                              |
+| **overlayClass**             | string \| null                   | `null`                 | Class name for the palette overlay.                                    |
+| **paletteWrapperInnerClass** | string \| null                   | `null`                 | Class name for the cmd palette wrapper element.                        |
+| **inputClass**               | string \| null                   | `null`                 | Class name for the cmd palette input.                                  |
+| **resultsContainerClass**    | string \| null                   | `null`                 | Class name for the results container.                                  |
+| **resultContainerClass**     | string \| null                   | `null`                 | Class name for the result item container.                              |
+| **optionSelectedClass**      | string \| null                   | `null`                 | Class name for the currently selected result item.                     |
+| **titleClass**               | string \| null                   | `null`                 | Class name for the result title.                                       |
+| **subtitleClass**            | string \| null                   | `null`                 | Class name for the result subtitle.                                    |
+| **descriptionClass**         | string \| null                   | `null`                 | Class name for the result description.                                 |
+| **keyboardButtonClass**      | string \| null                   | `null`                 | Class name for the keyboard shortcuts.                                 |
+| **overlayStyle**             | Record<string, string \| number> | `{}`                   | Style properties of the overlay.                                       |
+| **paletteWrapperInnerStyle** | Record<string, string \| number> | `{}`                   | Style properties of the command palette wrapper element.               |
+| **inputStyle**               | Record<string, string \| number> | `{}`                   | Style properties of cmd palette input.                                 |
+| **resultsContainerStyle**    | Record<string, string \| number> | `{}`                   | Style properties of results container.                                 |
+| **resultContainerStyle**     | Record<string, string \| number> | `{}`                   | Style properties result item container.                                |
+| **titleStyle**               | Record<string, string \| number> | `{}`                   | Style properties for result item title.                                |
+| **subtitleStyle**            | Record<string, string \| number> | `{}`                   | Style properties for result item subtitle.                             |
+| **descriptionStyle**         | Record<string, string \| number> | `{}`                   | Style properties for result item description.                          |
+| **optionSelectedStyle**      | Record<string, string \| number> | `{}`                   | Style properties selected result item.                                 |
+| **keyboardButtonStyle**      | Record<string, string \| number> | `{}`                   | Style properties for the keyboard shortcut.                            |
+
+## Action API
+
+```
+	actionId?: ActionId;
+	canActionRun?: (args: onRunParams) => boolean;
+	title: string;
+	description?: string;
+	subTitle?: string;
+	onRun?: (args: onRunParams) => void;
+	keywords?: Array<string>;
+	shortcut?: string;
+```
+
+## Store Methods
+
+Get palette methods from `createStoreMethods`.
+
+```
+import { createStoreMethods } from 'svelte-command-palette`
+
+const methods = createStoreMethods();
 
+method.openPalette();
+```
+
+### API
+
+```
+    togglePalette: () => void;
+    getAllCalledActions: () => ActionId[];
+    storeCalledAction: (id: ActionId) => void;
+    revertLastAction: (id: ActionId) => void;
+    resetActionLog: () => void;
+    openPalette: () => void;
+    closePalette: () => void;
+    resetPaletteStore: () => void;
 ```

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/command-palette.txt

@@ -1,6 +1,13 @@
 <script>
-	import CommandPalette, { defineActions } from 'svelte-command-palette';
+	import CommandPalette, { defineActions, createStoreMethods } from 'svelte-command-palette';
 	{/* Render command palette at the root of your application */}
+
+	// define actions using the defineActions API
+
+    const paletteMethods = createStoreMethods();
+
+	<button on:click={() => paletteMethods.openPalette()}>Open Command Palette</button>
+
 	<CommandPalette
 
 		actions={defineActions([

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/Counter.svelte

@@ -2,6 +2,8 @@
 	export let counter: number = 0;
 </script>
 
-<div class="mt-8 py-16 shadow-md flex items-center justify-center text-6xl">
+<div
+	class="mt-8 py-16 shadow-md flex items-center justify-center text-6xl dark:bg-dark-mode-gray dark:text-light-gray"
+>
 	{counter}
 </div>

src/components/Hero.svelte

@@ -8,11 +8,11 @@
 </script>
 
 <main class="pt-20 grid grid-cols-2 gap-12 pb-20">
-	<div class="">
-		<h1 class="text-5xl text-gray-600 font-light leading-tight">
+	<div>
+		<h1 class="text-5xl text-gray-600 dark:text-light-gray font-light leading-tight">
 			Increase your productivity exponentially.
 		</h1>
-		<h3 class="text-2xl mt-6 text-gray-600">
+		<h3 class="text-2xl mt-6 text-gray-600 dark:text-light-gray">
 			Use <KeyboardShortcut
 				on:onShortcutClick={openCommandPalette}
 				shortcuts={['⌘', 'K']}
@@ -21,9 +21,11 @@
 		</h3>
 	</div>
 	<div>
-		<h1 class="text-4xl text-gray-600 font-light leading-tight">Keyboard Shorcuts</h1>
+		<h1 class="text-4xl text-gray-600 dark:text-light-gray font-light leading-tight">
+			Keyboard Shorcuts
+		</h1>
 		<div class="mt-4">
-			<h3 class="text-lg mt-6 text-gray-600">
+			<h3 class="text-lg mt-6 text-gray-600 dark:text-light-gray">
 				Press or hold <KeyboardShortcut
 					shortcuts={['C', 'C']}
 					theme="secondary"
@@ -34,20 +36,24 @@
 		</div>
 	</div>
 	<div>
-		<h1 class="text-4xl text-gray-600 font-light leading-tight">Conditional Actions</h1>
+		<h1 class="text-4xl text-gray-600 dark:text-light-gray font-light leading-tight">
+			Conditional Actions
+		</h1>
 		<div class="mt-4">
-			<h3 class="text-lg mt-6 text-gray-600">
+			<h3 class="text-lg mt-6 text-gray-600 dark:text-light-gray">
 				This will only run when the counter is greater than 2.
 			</h3>
 		</div>
-		<div class="mt-4 flex items-center flex-col justify-center bg-slate-50 shadow text-xl p-20">
+		<div
+			class="mt-4 flex items-center flex-col justify-center bg-slate-50 dark:bg-gray-700 shadow text-xl p-20"
+		>
 			{#if counter < 3}
 				<div class:text-red-500={counter < 3}>
 					Just need {3 - counter} more
 				</div>
 			{/if}
 			{#if counter > 2}
-				<div class="mt-4">
+				<div class="mt-4 dark:text-light-gray">
 					Press <KeyboardShortcut
 						on:onShortcutClick={runConditionalAction}
 						shortcuts={['F', 'B', 'I']}
@@ -58,26 +64,30 @@
 		</div>
 	</div>
 	<div>
-		<h1 class="text-4xl text-gray-600 font-light leading-tight">Advanced Conditional Actions</h1>
+		<h1 class="text-4xl text-gray-600 dark:text-light-gray font-light leading-tight">
+			Advanced Conditional Actions
+		</h1>
 		<div class="mt-4">
-			<h3 class="text-lg mt-6 text-gray-600">
+			<h3 class="text-lg mt-6 text-gray-600 dark:text-light-gray">
 				You can run an action based on the current state of your command palette. Press <KeyboardShortcut
 					shortcuts={['C', 'I', 'A']}
 					theme="secondary"
 				/> to run this action
 			</h3>
 		</div>
 		<div class="mt-8">
-			<div class="text-lg">
+			<div class="text-lg dark:text-light-gray">
 				You must run <KeyboardShortcut
 					on:onShortcutClick={runConditionalAction}
 					shortcuts={['F', 'B', 'I']}
 					theme="secondary"
 				/> atleast once to enable this action
 			</div>
-			<div class="text-base mt-4">
+			<div class="text-base mt-4 dark:text-light-gray ">
 				Note: You can update your
-				<div class="inline text-xl font-bold p-1 rounded font-mono">paletteStore</div>
+				<div class="inline text-xl font-bold p-1 dark:text-light-gray rounded font-mono">
+					paletteStore
+				</div>
 				from anywhere!
 			</div>
 		</div>

src/components/KeyboardShortcut.svelte

@@ -13,7 +13,10 @@
 		});
 	};
 
-	$: bgColor = theme === 'primary' ? 'bg-gray-800 text-white' : 'bg-gray-100 shadow text-black';
+	$: bgColor =
+		theme === 'primary'
+			? 'bg-gray-800 dark:bg-dark-mode-gray text-white dark:text-light-gray'
+			: 'bg-gray-100 shadow text-black  dark:text-light-gray dark:bg-dark-mode-gray';
 </script>
 
 <button

src/components/Navbar.svelte

@@ -1,6 +1,11 @@
-<nav class="flex items-center justify-between shadow-sm  py-6 px-8">
+<script lang="ts">
+	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">
+	<div class="flex gap-12 dark:text-svelte-brand">
+		<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>