utility

Theme Switcher Toggle

Animated dark/light mode toggle with system detection.

theme toggle dark-mode animation | GPT 5.3 Ultra

Prompt

# Role
You are a Senior Software Engineer and Performance Expert specializing in theme systems, CSS transitions, and client-side state management.

# Objective
Create a theme switcher component with an animated sun/moon toggle, system preference detection, localStorage persistence, and smooth color transitions across the entire page.

# Instructions
1. Build the toggle button:
   - Circular button containing a sun icon (light mode) and moon icon (dark mode)
   - Smooth morph transition between icons: combine rotate (360°) + scale (0 → 1)
   - Transition duration: 300ms ease
   - Button styled with subtle border, hover effect
2. Implement theme detection and initialization:
   - On page load, check localStorage for saved preference
   - If no saved preference, detect system preference using `window.matchMedia('(prefers-color-scheme: dark)')`
   - Apply the resolved theme immediately (before paint to avoid flash)
3. Handle theme switching:
   - Toggle adds/removes `.dark` class on `<html>` element
   - Save the user's choice to `localStorage` as one of: `'light'`, `'dark'`, or `'system'`
   - Apply `transition: background-color 300ms, color 300ms` to body and key elements
4. Support three states (optional enhancement):
   - Light → Dark → System → Light cycle
   - System mode listens to `matchMedia` changes and updates in real-time
5. Add the toggle to a sample page:
   - Position in the top-right corner (fixed or absolute)
   - Include sample content sections to demonstrate theme changes

# Constraints
- Vanilla HTML, CSS, and JavaScript — no frameworks
- Apply theme class to `<html>` before DOM renders to prevent flash of wrong theme (script in `<head>`)
- Use `matchMedia` for system preference detection — not user-agent parsing
- Store preference as `'light'`, `'dark'`, or `'system'` string in localStorage
- Icon transition must be smooth — no abrupt swaps
- Respect `prefers-reduced-motion`: skip animation if reduced motion is preferred

# Output Format
- Single HTML file with embedded `<style>` and `<script>` blocks
- Include a sample page with header, text, and cards to demonstrate theme switching
- Well-commented code with the theme initialization script in `<head>` and interactive logic before `</body>`

Notes

Prompt

Role

You are a Senior Software Engineer and Performance Expert specializing in theme systems, CSS transitions, and client-side state management.

Objective

Create a theme switcher component with an animated sun/moon toggle, system preference detection, localStorage persistence, and smooth color transitions across the entire page.

Instructions

Build the toggle button:
- Circular button containing a sun icon (light mode) and moon icon (dark mode)
- Smooth morph transition between icons: combine rotate (360°) + scale (0 → 1)
- Transition duration: 300ms ease
- Button styled with subtle border, hover effect
Implement theme detection and initialization:
- On page load, check localStorage for saved preference
- If no saved preference, detect system preference using window.matchMedia('(prefers-color-scheme: dark)')
- Apply the resolved theme immediately (before paint to avoid flash)
Handle theme switching:
- Toggle adds/removes .dark class on <html> element
- Save the user’s choice to localStorage as one of: 'light', 'dark', or 'system'
- Apply transition: background-color 300ms, color 300ms to body and key elements
Support three states (optional enhancement):
- Light → Dark → System → Light cycle
- System mode listens to matchMedia changes and updates in real-time
Add the toggle to a sample page:
- Position in the top-right corner (fixed or absolute)
- Include sample content sections to demonstrate theme changes

Constraints

Vanilla HTML, CSS, and JavaScript — no frameworks
Apply theme class to <html> before DOM renders to prevent flash of wrong theme (script in <head>)
Use matchMedia for system preference detection — not user-agent parsing
Store preference as 'light', 'dark', or 'system' string in localStorage
Icon transition must be smooth — no abrupt swaps
Respect prefers-reduced-motion: skip animation if reduced motion is preferred

Output Format

Single HTML file with embedded <style> and <script> blocks
Include a sample page with header, text, and cards to demonstrate theme switching
Well-commented code with the theme initialization script in <head> and interactive logic before </body>

Notes

Use matchMedia('(prefers-color-scheme: dark)') to detect system preference.
Store preference as ‘light’, ‘dark’, or ‘system’ for three-state support.
Place the theme initialization script in <head> to prevent flash of incorrect theme.

Related Prompts

Code Snippet Block

Syntax-highlighted code block with copy button and line numbers.

# Role You are a Senior Frontend Developer and Developer Experience Specialist with deep expertise in code presentation, syntax highlighting, and documentation UI components. # Objective Build a polished code snippet block component with syntax highlighting, line numbers, a language badge, a one-click copy button with feedback, and optional line highlighting — styled with a VS Code-inspired dark theme. # Instructions 1. Create the code block container: - Rounded card with dark background (`#1e1e2e` or One Dark theme) - Top bar with: language badge (left), filename (center, optional), copy button (right) - Subtle border and shadow for depth 2. Implement syntax highlighting (CSS-only, class-based): - Define CSS classes for token types: `.keyword`, `.string`, `.comment`, `.function`, `.number`, `.operator`, `.punctuation` - Color scheme matching VS Code One Dark: - Keywords: purple (#c678dd) - Strings: green (#98c379) - Comments: gray (#5c6370), italic - Functions: blue (#61afef) - Numbers: orange (#d19a66) - Wrap tokens in `<span>` elements with appropriate classes 3. Add line numbers: - Left gutter with line numbers in muted color - Line numbers right-aligned in a fixed-width column - Line numbers should NOT be selectable (use `user-select: none`) - Optional: highlight specific lines with a subtle background accent 4. Build the copy button: - Clipboard icon that changes to a checkmark on successful copy - Tooltip: "Copy" → "Copied!" with a brief display (2 seconds) - Use `navigator.clipboard.writeText()` — copy only the code, not line numbers 5. Add the language badge: - Small pill in the top bar showing the language name (e.g., "JavaScript", "Python") - Color-coded by language # Constraints - No syntax highlighting libraries — use pre-tokenized HTML with CSS classes - Copy must exclude line numbers — store raw code separately or strip on copy - `<pre><code>` semantic markup with `language-*` class - Line numbers via CSS `counter-increment` or a separate `<span>` column - Dark mode only - Include 3 demo snippets: JavaScript, Python, and HTML - Responsive: horizontal scroll on overflow, no wrapping of code lines # Output Format - Single HTML file with embedded `<style>` and `<script>` blocks - Include 3 realistic code samples with pre-applied syntax classes - Well-commented code with sections: theme colors, token styles, line numbers, copy logic

code snippet syntax +1

Claude 4.6 Opus

Command Palette

VS Code / Linear-style ⌘K command palette with fuzzy search.

# Role You are a Senior Frontend Engineer and Keyboard-First UX Specialist with deep expertise in command-palette interfaces, fuzzy search algorithms, and developer-focused productivity tools. # Objective Build a VS Code / Linear-style command palette triggered by `⌘K` (or `Ctrl+K`), featuring fuzzy search filtering, grouped results, keyboard navigation, and smooth enter/exit animations — optimized for power users. # Instructions 1. Create the command palette overlay: - Centered modal with a search input at the top - Semi-transparent backdrop with blur effect (`backdrop-filter: blur(8px)`) - Smooth scale + fade entrance animation (200ms ease-out) - Close on `Escape`, backdrop click, or `⌘K` toggle 2. Build the search input: - Auto-focused on open with a search icon and placeholder: "Type a command..." - Real-time filtering as the user types - Clear button (×) when input has text 3. Implement the results list: - Group results by category with section headers (e.g., "Pages", "Actions", "Settings") - Each result item shows: icon (emoji or SVG), label, optional description, and keyboard shortcut hint (right-aligned `<kbd>`) - Highlight matching characters in bold within result labels 4. Add full keyboard navigation: - `↑` / `↓` arrows to move selection highlight - `Enter` to execute the selected command - Active item highlighted with accent background - Scroll active item into view automatically 5. Style in dark mode: - Dark modal background (`#1a1a2e` or similar) with subtle border - Muted section headers, bright result labels - `<kbd>` shortcut badges styled as pill-shaped tags - Max-height with scrollable results area # Constraints - Vanilla JavaScript — no frameworks or libraries - Fuzzy matching: filter results where input characters appear in order (not necessarily contiguous) - Must be keyboard-accessible end to end — no mouse required - Limit visible results to 8 items before scrolling - Trap focus inside the palette while open - Include at least 12 sample commands across 3 categories - Semantic HTML with `role="dialog"` and `aria-modal="true"` # Output Format - Single HTML file with embedded `<style>` and `<script>` blocks - Include realistic sample commands (developer tool or productivity app theme) - Well-commented code with clear separation: markup, styles, search logic, keyboard handling

command-palette search keyboard +1

Claude 4.6 Opus

Keyboard Shortcuts Panel

Floating panel showing available keyboard shortcuts.

# Role You are a Senior Software Engineer and Performance Expert specializing in developer tooling interfaces and keyboard-driven UX patterns. # Objective Build a keyboard shortcuts help panel that displays available shortcuts in a clean, grouped modal — triggered by a keypress and styled with distinctive keyboard key visuals. # Instructions 1. Implement the trigger mechanism: - Listen for the `?` key press (Shift + /) to open the panel - Toggle behavior: pressing `?` again closes the panel 2. Build the modal panel: - Centered floating panel with dark background and subtle border - Backdrop overlay with slight opacity (click to close) - Smooth fade-in and scale-up entrance animation 3. Organize shortcuts into grouped sections: - **Navigation**: Home (`H`), Search (`/`), Next (`J`), Previous (`K`) - **Actions**: New (`N`), Save (`⌘ S`), Delete (`⌘ ⌫`), Copy (`⌘ C`) - **Editor**: Bold (`⌘ B`), Italic (`⌘ I`), Code (`⌘ E`), Link (`⌘ K`) - Each section with a subtle heading and divider 4. Style each shortcut row: - Left side: styled `<kbd>` elements with raised 3D border effect - Right side: brief description (under 5 words) - Use monospace font for all key labels 5. Close behavior: - Escape key closes the panel - Clicking outside the panel closes it - Transition out with fade effect # Constraints - Vanilla HTML, CSS, and JavaScript only — no dependencies - Style `<kbd>` elements with a raised 3D effect: `border-bottom: 2px solid`, `box-shadow`, and `border-radius: 4px` - Use monospace font (`font-family: monospace`) for key labels - Keep descriptions under 5 words for scannability - Panel should not exceed 500px width - Must be keyboard-accessible: focus management within the panel # Output Format - Single HTML file with embedded `<style>` and `<script>` blocks - Include at least 12 shortcut entries across 3 groups - Clean, well-indented code with comments for each section

keyboard shortcuts panel +1

Claude 4.6 Opus

Split-Pane Markdown Editor

Live markdown editor with side-by-side preview.

# Role You are a Senior Frontend Developer and Developer Tools Specialist with deep expertise in text editors, real-time rendering, and split-pane interfaces. # Objective Build a split-pane Markdown editor with a live preview panel, toolbar with formatting buttons, and a dark code-editor aesthetic — similar to StackEdit or Dillinger. # Instructions 1. Create the split-pane layout: - Two equal-width panels side by side (50/50 split) - Left panel: Markdown editor (textarea or contenteditable) - Right panel: rendered HTML preview - Divider bar between panels (optional: draggable to resize) 2. Build the editor panel (left): - Full-height `<textarea>` with monospace font (`JetBrains Mono`, `Fira Code`, or system monospace) - Line numbers gutter on the left side (CSS-generated or JS-managed) - Tab key inserts spaces (2 or 4), not focus change - Dark background matching VS Code's One Dark theme 3. Build the preview panel (right): - Rendered HTML from the Markdown input, updated in real-time (on `input` event) - Styled prose: proper heading sizes, code blocks with dark background, blockquotes with left border, styled links, lists, and tables - Scrollable independently from the editor 4. Add a toolbar above the editor: - Formatting buttons: Bold, Italic, Heading (H1/H2/H3 dropdown), Link, Code, Blockquote, Unordered List, Ordered List - Each button inserts the corresponding Markdown syntax around the selected text or at cursor - Separator dividers between button groups 5. Implement Markdown parsing: - Support: headings, bold, italic, links, images, code (inline + blocks), blockquotes, lists (ordered + unordered), horizontal rules, tables - Use regex-based parsing — no external library # Constraints - Vanilla JavaScript — no Markdown libraries (build a basic parser with regex) - The parser does not need to cover edge cases — focus on common Markdown syntax - Editor and preview must scroll independently - Toolbar buttons must work with text selection (wrap selected text in syntax) - Dark mode only — VS Code-inspired theme - Responsive: stack panels vertically on mobile (editor on top, preview below) - No external dependencies # Output Format - Single HTML file with embedded `<style>` and `<script>` blocks - Include sample Markdown content pre-filled in the editor - Well-commented code with sections: layout, editor, parser, toolbar actions, preview rendering

markdown editor preview +1

Claude 4.6 Opus