Themes - TypeSteps

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

Light themes

12 themes optimized for bright environments

Dark themes

12 themes designed for low-light conditions

Light themes

Classic light themes

Light (Default)

Theme ID: 0The 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.

Soft Clay

Theme ID: 12Warm, earthy tones for a comfortable reading experience:

Main background: Cream (#F9F8F6)
Accent: Terracotta orange (#D97757)
Inspired by natural materials and soft lighting

Aqua Light

Theme ID: 13Cool, refreshing aqua palette:

Main background: Very light cyan (#F0FAFA)
Accent: Teal (#0D9488)
Evokes ocean breeze and clear water

Colorful light themes

Lavender

Theme ID: 14Soft purple hues for creativity:

Main background: Pale lavender (#FAF8FF)
Accent: Purple (#8B5CF6)
Great for design and creative work

Matcha

Theme ID: 15Fresh green inspired by Japanese tea:

Main background: Pale green (#F8FCF5)
Accent: Vibrant green (#65A30D)
Energizing and natural

Sakura

Theme ID: 17Delicate pink cherry blossom theme:

Main background: Pale pink (#FFF5F7)
Accent: Hot pink (#F472B6)
Soft and elegant aesthetic

Specialized light themes

Solarized Light

Theme ID: 18Based on the famous Solarized color scheme:

Main background: Cream beige (#FDF6E3)
Accent: Golden yellow (#B58900)
Scientifically designed for reduced eye strain

Desert

Theme ID: 19Warm sandy tones:

Main background: Off-white sand (#FAF7F0)
Accent: Desert orange (#C88C50)
Comfortable for long reading sessions

Glacier

Theme ID: 20Cool blue-gray palette:

Main background: Icy white (#F5F7FA)
Accent: Bright blue (#0EA5E9)
Clean and modern

Ivory

Theme ID: 21Classic off-white with brown accents:

Main background: Ivory (#FFFFF8)
Accent: Muted brown (#A18250)
Timeless and sophisticated

Rose Quartz

Theme ID: 22Gentle rose-tinted theme:

Main background: Very pale pink (#FDF8FA)
Accent: Pink (#F472B6)
Calm and soothing

Mint

Theme ID: 23Fresh mint green:

Main background: Pale mint (#F5FFFC)
Accent: Emerald green (#10B981)
Refreshing and clean

Dark themes

Modern dark themes

Zinc

Theme ID: 1Modern dark theme with neutral grays:

Main background: Near-black (#09090B)
Accent: Blue-purple (#6366F1)
Clean and contemporary

Midnight

Theme ID: 16Pure black OLED-friendly theme:

Main background: True black (#000000)
Accent: iOS blue (#007AFF)
Perfect for battery saving on OLED displays

Cyberpunk

Theme ID: 11High-contrast neon theme:

Main background: Deep black (#020205)
Accent: Neon yellow (#FFFF00)
Border: Hot pink (#FF0080)
Bold and futuristic aesthetic

Popular editor themes

Catppuccin

Theme ID: 2Beloved by developers:

Main background: Deep purple-blue (#1E1E2E)
Accent: Lavender purple (#CBB6F7)
Soft and warm dark theme

Dracula

Theme ID: 3One of the most popular dark themes:

Main background: Dark purple-gray (#282A36)
Accent: Bright purple (#BD93F9)
High contrast with vibrant colors

One Dark

Theme ID: 4Atom’s iconic theme:

Main background: Dark gray (#282C34)
Accent: Sky blue (#61AFEF)
Balanced and familiar to developers

Rose Pine

Theme ID: 5Elegant dark theme with rose accents:

Main background: Deep purple (#191724)
Accent: Dusty rose (#EBBCBA)
Unique and sophisticated

Nord

Theme ID: 6Arctic-inspired color palette:

Main background: Dark blue-gray (#2E3440)
Accent: Frost blue (#88C0D0)
Cool and harmonious

Tokyo Night

Theme ID: 7Inspired by Tokyo’s nightlife:

Main background: Deep navy (#1A1B26)
Accent: Bright blue (#7AA2F7)
Vibrant and modern

Nature-inspired dark themes

Everforest

Theme ID: 8Forest-themed with green accents:

Main background: Dark gray-green (#2D3436)
Accent: Soft green (#A7C080)
Easy on the eyes with natural colors

Gruvbox

Theme ID: 9Retro warm dark theme:

Main background: Dark brown-gray (#282828)
Accent: Bright yellow (#FABD2F)
High contrast with vintage feel

Solarized (Dark)

Theme ID: 10Dark variant of Solarized:

Main background: Deep blue-gray (#002B36)
Accent: Bright blue (#268BD2)
Scientifically optimized contrast

Theme structure

Each theme includes six color properties:

// 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
}

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

Changing themes

From the dashboard

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

// 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
    }
}

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

Theme picker layout

// 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

// 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

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:

// 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)

Creating custom themes

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

// 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
]

Remember to add your custom theme’s ID to the lightThemeIds array if it’s a light theme, so the correct ColorScheme is applied.

Theme in action

Themes affect every element of TypeSteps:

Charts

Accent color is used for chart lines, bars, and area fills

Backgrounds

Main and secondary backgrounds create depth and hierarchy

Text

Primary and secondary text colors ensure readability

Borders

Subtle borders define cards, panels, and separators

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

​Theme categories

Light themes

Dark themes

​Light themes

​Classic light themes

​Colorful light themes

​Specialized light themes

​Dark themes

​Modern dark themes

​Popular editor themes

​Nature-inspired dark themes

​Theme structure

​Changing themes

​From the dashboard

​Theme picker layout

​Theme persistence

​Creating custom themes

​Theme in action

Charts

Backgrounds

Text

Borders

Theme categories

Light themes

Classic light themes

Colorful light themes

Specialized light themes

Dark themes

Modern dark themes

Popular editor themes

Nature-inspired dark themes

Theme structure

Changing themes

From the dashboard

Theme picker layout

Theme persistence

Creating custom themes

Theme in action