skills.rest
johnlindquist
johnlindquistCOMMUNITY
Explore all skills by this author →
Website𝕏@johnlindquistGitHub

script-kit-theme

Manage Script Kit GPUI theming with JSON-based color and vibrancy configurations.

28|6|Updated Dec 27, 2025
Search Tags:#ui#styling#customization#theme#color system#vibrancy
One-click install
npx skills add https://github.com/johnlindquist/script-kit-next --skill script-kit-theme
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: script-kit-theme
Source: https://github.com/johnlindquist/script-kit-next/tree/main/.opencode/skill/script-kit-theme
Command: npx skills add https://github.com/johnlindquist/script-kit-next --skill script-kit-theme

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides a robust theming system for the Script Kit application, allowing users to customize the visual appearance of the UI to their preferences, including support for dark/light modes, focus states, and system vibrancy effects.

Core Features & Use Cases

  • Customizable Themes: Define colors, opacity, fonts, and vibrancy settings for the application.
  • Dynamic Styling: Themes adapt to system appearance (light/dark mode) and window focus states.
  • ANSI Terminal Colors: Supports a full 16-color ANSI palette for integrated terminal experiences.
  • Hot-Reloading: Theme changes are applied instantly without restarting the application.
  • Use Case: A designer wants to match Script Kit's UI to their brand's color palette, ensuring consistency across their development tools.

Quick Start

Load the theme configuration from ~/.scriptkit/kit/theme.json and apply it to the application's UI components.

Frequently Asked Questions about script-kit-theme

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I customize the UI colors and styling in Script Kit?▼

You can customize Script Kit's UI styling by defining background, text, accent, and border colors in a JSON configuration file. This theme system allows granular control over the application's visual appearance and color palette.

Does Script Kit theming support macOS vibrancy and dark mode?▼

Yes, Script Kit theming supports macOS vibrancy effects and adapts dynamically to system appearance for dark or light mode. Themes also support focus-aware color variations that change based on window focus states.

Can I apply terminal ANSI colors when customizing Script Kit themes?▼

Yes, you can apply a full 16-color ANSI palette when customizing Script Kit themes. This supports integrated terminal experiences by allowing terminal ANSI colors to be defined within the JSON configuration.

How do I hot-reload theme changes without restarting the application?▼

Script Kit supports hot-reloading of theme configurations, meaning changes made to the JSON file are applied instantly without restarting the application. Simply save the file to see the updated styling immediately.

What is the best way to match Script Kit's appearance to a brand palette?▼

The best way to match Script Kit's appearance to a brand palette is by creating a custom JSON configuration file. Define your specific brand colors, opacity, fonts, and vibrancy settings to ensure visual consistency across your development tools.

Related Skills

Explore More Design & Creative Skills→
johnlindquistjohnlindquist
28

script-kit-config

Manage Script Kit GPUI settings through a TypeScript configuration file.

Community
Intermediate
iButtersiButters
3

maui-blazor-development

Guide .NET MAUI Blazor Hybrid development with architecture and BlazorWebView configuration.

Community
Advanced
johnlindquistjohnlindquist
28

script-kit-terminal

Manages PTY creation and renders interactive terminal sessions in Script Kit GPUI.

Community
Advanced
Arupbiswas09Arupbiswas09

ui-design-core

Generate UI design layouts and components with color schemes, typography, and motion effects.

Community
Advanced