Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/thePrnvBot/dispel-web-stylist/llms.txt

Use this file to discover all available pages before exploring further.

The Settings page in Dispel’s options panel lets you control the extension’s appearance and a few developer-oriented display options. Settings are persisted in local:formState under the settings key and are read back by the side panel and options page on every load, so changes take effect immediately without requiring a browser restart or page reload.

​
Opening Settings

1

Open the Options page

Right-click the Dispel icon in your browser toolbar and choose Options. Alternatively, click the gear icon in the Dispel side panel header to jump directly to the Options page.
2

Click the Settings tab

In the Options page tab bar, click Settings. The Appearance, Debug, and Danger Zone sections are displayed below.

​
Theme

The Theme setting controls the color scheme of the Dispel side panel and options page. Three values are available:

Light

Forces the Dispel UI into its light color scheme regardless of your OS or browser preference.

Dark

Forces the Dispel UI into its dark color scheme regardless of your OS or browser preference.

System

Follows your operating system’s dark/light mode setting. This is the default value.
The selected value is stored as ISettingsFormState.theme (a "light" | "dark" | "system" enum) within local:formState. The default is "system".
Use System theme to let the Dispel panel blend naturally with your OS appearance — it will switch automatically when you toggle dark mode at the OS level, with no manual change needed in the extension.

​
Debug viewport size

The Debug viewport size toggle is a boolean setting (debugViewportSize, default false) found in the Debug section of the Settings page. When enabled, Dispel displays a label in the side panel showing the current viewport width × height alongside the scroll offset. This information is particularly useful when you are writing prompts that target specific responsive breakpoints — you can see exactly what dimensions Dispel is working with as you resize the browser window.
The debug label reflects the viewport dimensions of the active tab’s content area, not the full browser window size. Use it as a live reference when prompting Dispel to style elements at particular breakpoints such as max-width: 768px or min-width: 1024px.

​
Keyboard shortcut

The Dispel side panel can be shown or hidden without clicking the toolbar icon. The default keyboard shortcut is: 
Ctrl+Shift+Y
This shortcut is registered in the extension manifest as the toggle-sidebar command: 
commands: {
  "toggle-sidebar": {
    suggested_key: {
      default: "Ctrl+Shift+Y",
    },
    description: "Toggle sidebar",
  },
},
If Ctrl+Shift+Y conflicts with another extension or browser shortcut on your machine, you can reassign it:
Navigate to chrome://extensions/shortcuts (or edge://extensions/shortcuts), find Dispel, and click the pencil icon next to Toggle sidebar to record a new key combination.

​
Settings schema reference

The full TypeScript type for the settings state, derived from SettingsFormStateSchema in src/utils/schemas/storage.ts: 
import { z } from "zod";

export const ThemeSchema = z.enum(["light", "dark", "system"]);

export const SettingsFormStateSchema = z.object({
  debugViewportSize: z.boolean(),
  theme: ThemeSchema,
});

export type ISettingsFormState = z.infer<typeof SettingsFormStateSchema>;
// {
//   debugViewportSize: boolean;
//   theme: "light" | "dark" | "system";
// }
The default value applied when no settings have been saved yet is: 
{
  theme: "system",
  debugViewportSize: false,
}

​
Danger Zone

The Danger Zone section of the Settings page contains a single Clear all data button. Clicking it and confirming the dialog permanently deletes all data stored by Dispel in chrome.storage.local, including:
  • All saved prompt history entries (local:promptHistory)
  • All model configurations (local:models)
  • All API keys (local:apiKeys)
  • All active drafts (local:activeDrafts)
  • All form state including settings (local:formState)
Clearing all data cannot be undone. Copy any prompt history or model configurations you want to keep before using this option. Your API keys will also be erased and must be re-entered.

Build docs developers (and LLMs) love

Get started for freeTalk to us