> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/FALAK097/typesteps/llms.txt
> Use this file to discover all available pages before exploring further.

# Themes

> Customize TypeSteps with 24 beautiful themes spanning light and dark color schemes

TypeSteps includes 24 carefully crafted themes to match your aesthetic preferences and reduce eye strain. Each theme features coordinated colors for backgrounds, text, borders, and accent elements.

## Theme categories

<CardGroup cols={2}>
  <Card title="Light themes" icon="sun">
    12 themes optimized for bright environments
  </Card>

  <Card title="Dark themes" icon="moon">
    12 themes designed for low-light conditions
  </Card>
</CardGroup>

## Light themes

### Classic light themes

<Accordion title="Light (Default)">
  **Theme ID**: 0

  The default TypeSteps theme with clean, neutral colors:

  * Main background: Pure white
  * Secondary background: Light gray
  * Accent: Vibrant indigo (`#4F46E5`)
  * Text: Near-black

  Perfect for a professional, minimalist look.
</Accordion>

<Accordion title="Soft Clay">
  **Theme ID**: 12

  Warm, earthy tones for a comfortable reading experience:

  * Main background: Cream (`#F9F8F6`)
  * Accent: Terracotta orange (`#D97757`)
  * Inspired by natural materials and soft lighting
</Accordion>

<Accordion title="Aqua Light">
  **Theme ID**: 13

  Cool, refreshing aqua palette:

  * Main background: Very light cyan (`#F0FAFA`)
  * Accent: Teal (`#0D9488`)
  * Evokes ocean breeze and clear water
</Accordion>

### Colorful light themes

<Accordion title="Lavender">
  **Theme ID**: 14

  Soft purple hues for creativity:

  * Main background: Pale lavender (`#FAF8FF`)
  * Accent: Purple (`#8B5CF6`)
  * Great for design and creative work
</Accordion>

<Accordion title="Matcha">
  **Theme ID**: 15

  Fresh green inspired by Japanese tea:

  * Main background: Pale green (`#F8FCF5`)
  * Accent: Vibrant green (`#65A30D`)
  * Energizing and natural
</Accordion>

<Accordion title="Sakura">
  **Theme ID**: 17

  Delicate pink cherry blossom theme:

  * Main background: Pale pink (`#FFF5F7`)
  * Accent: Hot pink (`#F472B6`)
  * Soft and elegant aesthetic
</Accordion>

### Specialized light themes

<Accordion title="Solarized Light">
  **Theme ID**: 18

  Based on the famous Solarized color scheme:

  * Main background: Cream beige (`#FDF6E3`)
  * Accent: Golden yellow (`#B58900`)
  * Scientifically designed for reduced eye strain
</Accordion>

<Accordion title="Desert">
  **Theme ID**: 19

  Warm sandy tones:

  * Main background: Off-white sand (`#FAF7F0`)
  * Accent: Desert orange (`#C88C50`)
  * Comfortable for long reading sessions
</Accordion>

<Accordion title="Glacier">
  **Theme ID**: 20

  Cool blue-gray palette:

  * Main background: Icy white (`#F5F7FA`)
  * Accent: Bright blue (`#0EA5E9`)
  * Clean and modern
</Accordion>

<Accordion title="Ivory">
  **Theme ID**: 21

  Classic off-white with brown accents:

  * Main background: Ivory (`#FFFFF8`)
  * Accent: Muted brown (`#A18250`)
  * Timeless and sophisticated
</Accordion>

<Accordion title="Rose Quartz">
  **Theme ID**: 22

  Gentle rose-tinted theme:

  * Main background: Very pale pink (`#FDF8FA`)
  * Accent: Pink (`#F472B6`)
  * Calm and soothing
</Accordion>

<Accordion title="Mint">
  **Theme ID**: 23

  Fresh mint green:

  * Main background: Pale mint (`#F5FFFC`)
  * Accent: Emerald green (`#10B981`)
  * Refreshing and clean
</Accordion>

## Dark themes

### Modern dark themes

<Accordion title="Zinc">
  **Theme ID**: 1

  Modern dark theme with neutral grays:

  * Main background: Near-black (`#09090B`)
  * Accent: Blue-purple (`#6366F1`)
  * Clean and contemporary
</Accordion>

<Accordion title="Midnight">
  **Theme ID**: 16

  Pure black OLED-friendly theme:

  * Main background: True black (`#000000`)
  * Accent: iOS blue (`#007AFF`)
  * Perfect for battery saving on OLED displays
</Accordion>

<Accordion title="Cyberpunk">
  **Theme ID**: 11

  High-contrast neon theme:

  * Main background: Deep black (`#020205`)
  * Accent: Neon yellow (`#FFFF00`)
  * Border: Hot pink (`#FF0080`)
  * Bold and futuristic aesthetic
</Accordion>

### Popular editor themes

<Accordion title="Catppuccin">
  **Theme ID**: 2

  Beloved by developers:

  * Main background: Deep purple-blue (`#1E1E2E`)
  * Accent: Lavender purple (`#CBB6F7`)
  * Soft and warm dark theme
</Accordion>

<Accordion title="Dracula">
  **Theme ID**: 3

  One of the most popular dark themes:

  * Main background: Dark purple-gray (`#282A36`)
  * Accent: Bright purple (`#BD93F9`)
  * High contrast with vibrant colors
</Accordion>

<Accordion title="One Dark">
  **Theme ID**: 4

  Atom's iconic theme:

  * Main background: Dark gray (`#282C34`)
  * Accent: Sky blue (`#61AFEF`)
  * Balanced and familiar to developers
</Accordion>

<Accordion title="Rose Pine">
  **Theme ID**: 5

  Elegant dark theme with rose accents:

  * Main background: Deep purple (`#191724`)
  * Accent: Dusty rose (`#EBBCBA`)
  * Unique and sophisticated
</Accordion>

<Accordion title="Nord">
  **Theme ID**: 6

  Arctic-inspired color palette:

  * Main background: Dark blue-gray (`#2E3440`)
  * Accent: Frost blue (`#88C0D0`)
  * Cool and harmonious
</Accordion>

<Accordion title="Tokyo Night">
  **Theme ID**: 7

  Inspired by Tokyo's nightlife:

  * Main background: Deep navy (`#1A1B26`)
  * Accent: Bright blue (`#7AA2F7`)
  * Vibrant and modern
</Accordion>

### Nature-inspired dark themes

<Accordion title="Everforest">
  **Theme ID**: 8

  Forest-themed with green accents:

  * Main background: Dark gray-green (`#2D3436`)
  * Accent: Soft green (`#A7C080`)
  * Easy on the eyes with natural colors
</Accordion>

<Accordion title="Gruvbox">
  **Theme ID**: 9

  Retro warm dark theme:

  * Main background: Dark brown-gray (`#282828`)
  * Accent: Bright yellow (`#FABD2F`)
  * High contrast with vintage feel
</Accordion>

<Accordion title="Solarized (Dark)">
  **Theme ID**: 10

  Dark variant of Solarized:

  * Main background: Deep blue-gray (`#002B36`)
  * Accent: Bright blue (`#268BD2`)
  * Scientifically optimized contrast
</Accordion>

## Theme structure

Each theme includes six color properties:

```swift theme={null}
// From Theme.swift:3-12
struct AppTheme: Identifiable, Equatable {
    let id: Int
    let name: String
    let mainBg: Color          // Primary background
    let secondaryBg: Color     // Cards, panels, secondary surfaces
    let border: Color          // Borders, dividers
    let text: Color            // Primary text
    let secondaryText: Color   // Labels, subtitles
    let accent: Color          // Highlights, charts, buttons
}
```

<Info>
  All theme colors are defined using RGB values for precise color matching across different displays.
</Info>

## Changing themes

### From the dashboard

1. Click the theme button in the header (shows current theme name and color dot)
2. A popover opens with all 24 themes organized into Light and Dark sections
3. Hover over any theme to preview it in real-time
4. Click to apply permanently

```swift theme={null}
// From DashboardView.swift:153-172
private var themeSelector: some View {
    Button {
        showThemePicker.toggle()
    } label: {
        HStack(spacing: 8) {
            Circle().fill(previewTheme.accent).frame(width: 8, height: 8)
            Text(previewTheme.name).font(.system(size: 10, weight: .bold))
        }
        .frame(width: 120, alignment: .center)
        .background(previewTheme.secondaryBg)
        .clipShape(RoundedRectangle(cornerRadius: 8))
    }
    .popover(isPresented: $showThemePicker) {
        themePickerPopover
    }
}
```

<Tip>
  The entire dashboard updates instantly when you hover over a theme, letting you preview before committing.
</Tip>

### Theme picker layout

```swift theme={null}
// From DashboardView.swift:186-211
VStack(alignment: .leading, spacing: 12) {
    Text("Light")
        .font(.system(size: 9, weight: .medium))
    
    LazyVGrid(columns: [GridItem(.flexible()), GridItem(.flexible())], spacing: 10) {
        ForEach(AppTheme.themes.filter { lightThemeIds.contains($0.id) }) { t in
            themeOption(t)
        }
    }
}

VStack(alignment: .leading, spacing: 12) {
    Text("Dark")
        .font(.system(size: 9, weight: .medium))
    
    LazyVGrid(columns: [GridItem(.flexible()), GridItem(.flexible())], spacing: 10) {
        ForEach(AppTheme.themes.filter { !lightThemeIds.contains($0.id) }) { t in
            themeOption(t)
        }
    }
}
```

Themes are displayed in a 2-column grid with:

* Visual preview showing accent color and backgrounds
* Theme name
* Checkmark for currently selected theme
* Hover highlighting

## Theme persistence

```swift theme={null}
// From DashboardView.swift:37
@AppStorage("app_theme_id") private var appThemeId = 0
```

Your theme choice is saved using `@AppStorage`, which:

* Persists across app launches
* Syncs automatically with UserDefaults
* Applies immediately on app startup

<Accordion title="Default theme behavior">
  If no theme is saved, TypeSteps defaults to theme ID `0` (Light theme).

  The app automatically applies the correct ColorScheme (`.light` or `.dark`) based on the theme:

  ```swift theme={null}
  // From DashboardView.swift:71-96
  private let lightThemeIds = [0, 12, 13, 14, 15, 17, 18, 19, 20, 21, 22, 23]

  .colorScheme(lightThemeIds.contains(theme.id) ? .light : .dark)
  ```
</Accordion>

## Creating custom themes

While TypeSteps doesn't support user-created themes in the UI, you can modify the source code to add your own:

```swift theme={null}
// From Theme.swift:13-257
static let themes: [AppTheme] = [
    AppTheme(
        id: 24, // Use next available ID
        name: "My Custom Theme",
        mainBg: Color(red: 0/255, green: 0/255, blue: 0/255),
        secondaryBg: Color(red: 20/255, green: 20/255, blue: 20/255),
        border: Color(red: 40/255, green: 40/255, blue: 40/255),
        text: .white,
        secondaryText: Color(red: 150/255, green: 150/255, blue: 150/255),
        accent: Color(red: 255/255, green: 100/255, blue: 100/255)
    ),
    // ... existing themes
]
```

<Info>
  Remember to add your custom theme's ID to the `lightThemeIds` array if it's a light theme, so the correct ColorScheme is applied.
</Info>

## Theme in action

Themes affect every element of TypeSteps:

<CardGroup cols={2}>
  <Card title="Charts" icon="chart-line">
    Accent color is used for chart lines, bars, and area fills
  </Card>

  <Card title="Backgrounds" icon="square">
    Main and secondary backgrounds create depth and hierarchy
  </Card>

  <Card title="Text" icon="font">
    Primary and secondary text colors ensure readability
  </Card>

  <Card title="Borders" icon="border">
    Subtle borders define cards, panels, and separators
  </Card>
</CardGroup>

<Tip>
  Try different themes at different times of day. Many users prefer light themes in the morning and dark themes in the evening.
</Tip>