# Whisk Theme

> Analyze repository branding and generate custom documentation theme with branded components. Use when this capability is needed.

- Skill: `tomevault-io/whisk-theme` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add tomevault-io/whisk-theme`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/whisk-theme/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Docs & Writing
- Author: tomevault-io (https://skillmd.com/u/tomevault-io)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/tomevault-io/whisk-theme

---


## Instructions

When asked to "whisk theme", "generate theme", "customize theme", or "match branding":

### Step 1: Scan for Brand Colors

Search repository for brand colors in priority order:

**Tailwind Config** (`tailwind.config.js/ts`):
```javascript
theme: { colors: { primary: '#xxx', brand: '#xxx' } }
```

**CSS Variables** (`globals.css`, `variables.css`, `app.css`):
```css
:root { --primary: #xxx; --brand-color: #xxx; }
```

**UI Frameworks**:
- Chakra: `colors.brand.500`
- MUI: `palette.primary.main`
- shadcn: `--primary: H S% L%`

### Step 2: Scan for Logo & Fonts

**Logo**: `public/logo.svg`, `assets/logo.*`, `favicon.svg`
**Fonts**: Tailwind fontFamily, CSS font-family, Next.js font imports

### Step 3: Present Findings

```
🎨 Brand Analysis Complete!

COLORS:
  Primary: #3B82F6 ████ (from tailwind.config.js)
  
LOGO: ✓ public/logo.svg
FONT: Inter

Apply to docs? (yes/customize/cancel)
```

### Step 4: Update Theme Files

#### theme.json
```json
{
  "$schema": "https://devdoc.sh/theme.json",
  "name": "{ProductName} Docs",
  "colors": {
    "primary": "{primary}",
    "primaryLight": "{lighten_15%}",
    "primaryDark": "{darken_15%}"
  },
  "typography": {
    "fontFamily": "{font}, system-ui, sans-serif"
  }
}
```

#### custom.css
```css
:root {
  --devdoc-primary: {primary};
  --devdoc-primary-light: {primaryLight};
  --devdoc-primary-dark: {primaryDark};
  --devdoc-font-family: '{font}', system-ui, sans-serif;
}
```

### Step 5: Update Branded Components

Generate component overrides based on brand colors and product type.

#### Callouts & Notices

```css
/* Branded callouts */
.callout-info {
  background: linear-gradient(135deg, var(--devdoc-primary-light) 0%, transparent 100%);
  border-left: 4px solid var(--devdoc-primary);
}

.callout-tip {
  border-left-color: var(--devdoc-primary);
}

.callout-warning {
  border-left-color: #f59e0b;
}

.callout-danger {
  border-left-color: #ef4444;
}
```

#### Cards & Card Groups

```css
/* Branded cards */
.card {
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.card:hover {
  border-color: var(--devdoc-primary);
  box-shadow: 0 4px 12px rgba(var(--devdoc-primary-rgb), 0.15);
}

.card-icon {
  color: var(--devdoc-primary);
}
```

#### Tabs

```css
/* Branded tabs */
.tabs-trigger[data-state="active"] {
  color: var(--devdoc-primary);
  border-bottom-color: var(--devdoc-primary);
}

.tabs-trigger:hover {
  color: var(--devdoc-primary-dark);
}
```

#### Accordions

```css
/* Branded accordions */
.accordion-trigger:hover {
  color: var(--devdoc-primary);
}

.accordion-trigger[data-state="open"] {
  color: var(--devdoc-primary);
}

.accordion-trigger[data-state="open"] svg {
  color: var(--devdoc-primary);
}
```

#### Buttons

```css
/* Primary button */
.btn-primary {
  background-color: var(--devdoc-primary);
  color: white;
}

.btn-primary:hover {
  background-color: var(--devdoc-primary-dark);
}

/* Secondary/outline button */
.btn-secondary {
  border: 1px solid var(--devdoc-primary);
  color: var(--devdoc-primary);
  background: transparent;
}

.btn-secondary:hover {
  background-color: var(--devdoc-primary);
  color: white;
}
```

#### Code Blocks

```css
/* Branded code blocks */
.code-block {
  border: 1px solid var(--border);
  border-radius: 0.5rem;
}

.code-block-header {
  background: var(--muted);
  border-bottom: 1px solid var(--border);
}

.code-block .copy-button:hover {
  color: var(--devdoc-primary);
}

/* Syntax highlighting accent */
.token.function,
.token.class-name {
  color: var(--devdoc-primary);
}
```

#### API Playground

```css
/* API playground branding */
.api-method-get {
  background-color: #10b981;
}

.api-method-post {
  background-color: var(--devdoc-primary);
}

.api-method-put {
  background-color: #f59e0b;
}

.api-method-delete {
  background-color: #ef4444;
}

.try-it-button {
  background-color: var(--devdoc-primary);
}

.try-it-button:hover {
  background-color: var(--devdoc-primary-dark);
}
```

#### Navigation

```css
/* Sidebar navigation */
.nav-link {
  color: var(--foreground);
  transition: color 0.2s;
}

.nav-link:hover {
  color: var(--devdoc-primary);
}

.nav-link.active {
  color: var(--devdoc-primary);
  font-weight: 500;
}

.nav-group-title {
  color: var(--muted-foreground);
  font-weight: 600;
}

/* Tab navigation */
.nav-tab.active {
  color: var(--devdoc-primary);
  border-bottom: 2px solid var(--devdoc-primary);
}
```

#### Search

```css
/* Search styling */
.search-input:focus {
  border-color: var(--devdoc-primary);
  box-shadow: 0 0 0 2px rgba(var(--devdoc-primary-rgb), 0.2);
}

.search-result:hover {
  background-color: var(--muted);
}

.search-result-title mark {
  background-color: rgba(var(--devdoc-primary-rgb), 0.2);
  color: var(--devdoc-primary-dark);
}
```

#### Table of Contents

```css
/* TOC styling */
.toc-link {
  color: var(--muted-foreground);
}

.toc-link:hover {
  color: var(--devdoc-primary);
}

.toc-link.active {
  color: var(--devdoc-primary);
  font-weight: 500;
}

.toc-indicator {
  background-color: var(--devdoc-primary);
}
```

#### Steps Component

```css
/* Steps styling */
.step-number {
  background-color: var(--devdoc-primary);
  color: white;
  border-radius: 50%;
}

.step-connector {
  background-color: var(--border);
}

.step-completed .step-number {
  background-color: var(--devdoc-primary);
}

.step-completed .step-connector {
  background-color: var(--devdoc-primary);
}
```

#### Tooltips

```css
/* Tooltip styling */
.tooltip {
  background-color: var(--foreground);
  color: var(--background);
  border-radius: 0.375rem;
}

.tooltip-arrow {
  fill: var(--foreground);
}
```

### Step 6: Project-Specific Customizations

Based on detected project type, add specific styles:

#### For API Documentation
```css
/* API-specific styles */
.endpoint-badge {
  font-family: var(--devdoc-code-font-family);
  font-weight: 600;
}

.response-status.success {
  color: #10b981;
}

.response-status.error {
  color: #ef4444;
}

.schema-property {
  border-left: 2px solid var(--border);
}

.schema-property:hover {
  border-left-color: var(--devdoc-primary);
}
```

#### For SDK/Library Documentation
```css
/* SDK-specific styles */
.language-selector {
  border: 1px solid var(--border);
}

.language-selector button.active {
  background-color: var(--devdoc-primary);
  color: white;
}

.install-command {
  background: var(--muted);
  border-radius: 0.5rem;
  font-family: var(--devdoc-code-font-family);
}
```

#### For Product Documentation
```css
/* Product-specific styles */
.feature-card {
  border: 1px solid var(--border);
  border-radius: 0.75rem;
}

.feature-card:hover {
  border-color: var(--devdoc-primary);
}

.feature-icon {
  color: var(--devdoc-primary);
  font-size: 2rem;
}

.screenshot {
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
```

### Step 7: Complete custom.css Template

Generate the full `custom.css` with all branded components:

```css
/* {ProductName} Documentation Theme */
/* Generated by DevDoc whisk-theme */

/* ============================================
   1. CSS Variables
   ============================================ */

:root {
  /* Brand Colors */
  --devdoc-primary: {primary};
  --devdoc-primary-light: {primaryLight};
  --devdoc-primary-dark: {primaryDark};
  --devdoc-primary-rgb: {primaryRGB};
  
  /* Typography */
  --devdoc-font-family: '{font}', system-ui, sans-serif;
  --devdoc-heading-font-family: '{font}', system-ui, sans-serif;
  --devdoc-code-font-family: 'JetBrains Mono', 'Fira Code', monospace;
  
  /* Layout */
  --devdoc-sidebar-width: 280px;
  --devdoc-content-max-width: 768px;
}

/* ============================================
   2. Base Styles
   ============================================ */

* {
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

::selection {
  background-color: var(--devdoc-primary);
  color: white;
}

/* ============================================
   3. Links
   ============================================ */

.docs-content a:not([class]) {
  color: var(--devdoc-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.docs-content a:not([class]):hover {
  color: var(--devdoc-primary-dark);
}

/* ============================================
   4. Navigation
   ============================================ */

.nav-link:hover { color: var(--devdoc-primary); }
.nav-link.active { color: var(--devdoc-primary); font-weight: 500; }
.nav-tab.active { color: var(--devdoc-primary); border-bottom: 2px solid var(--devdoc-primary); }

/* ============================================
   5. Components
   ============================================ */

/* Buttons */
.btn-primary { background-color: var(--devdoc-primary); color: white; }
.btn-primary:hover { background-color: var(--devdoc-primary-dark); }

/* Cards */
.card:hover { border-color: var(--devdoc-primary); }
.card-icon { color: var(--devdoc-primary); }

/* Callouts */
.callout { border-left: 4px solid var(--devdoc-primary); }

/* Tabs */
.tabs-trigger[data-state="active"] { color: var(--devdoc-primary); border-bottom-color: var(--devdoc-primary); }

/* Accordions */
.accordion-trigger[data-state="open"] { color: var(--devdoc-primary); }

/* Steps */
.step-number { background-color: var(--devdoc-primary); color: white; }

/* Search */
.search-input:focus { border-color: var(--devdoc-primary); }
.search-result-title mark { background-color: rgba(var(--devdoc-primary-rgb), 0.2); }

/* TOC */
.toc-link.active { color: var(--devdoc-primary); }
.toc-indicator { background-color: var(--devdoc-primary); }

/* ============================================
   6. Code
   ============================================ */

pre code {
  font-family: var(--devdoc-code-font-family);
  font-size: 0.875rem;
  line-height: 1.7;
}

:not(pre) > code {
  background-color: var(--muted);
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
  font-size: 0.875em;
}

.code-block .copy-button:hover { color: var(--devdoc-primary); }

/* ============================================
   7. API Reference
   ============================================ */

.api-method-post { background-color: var(--devdoc-primary); }
.try-it-button { background-color: var(--devdoc-primary); }
.try-it-button:hover { background-color: var(--devdoc-primary-dark); }
```

### Step 8: Confirm Changes

```
✅ Theme & Components Updated!

Files modified:
  ✓ theme.json - brand colors, typography
  ✓ custom.css - variables, components, styles
  ✓ docs.json - logo paths
  ✓ public/logo.svg - copied

Components branded:
  • Navigation (sidebar, tabs, TOC)
  • Buttons (primary, secondary)
  • Cards & Card groups
  • Callouts & Notices
  • Tabs & Accordions
  • Code blocks
  • Search
  • API playground
  • Steps component

Run `devdoc dev` to preview!
```

---
> Converted and distributed by [TomeVault](https://tomevault.io/claim/brainfish-ai) — claim your Tome and manage your conversions.
<!-- tomevault:4.0:skill_md:2026-04-16 -->