Theme Colors

Color system used in DocuBook for styling UI elements

DocuBook comes with a carefully designed color system that ensures consistency and accessibility across your documentation. The theme includes both light and dark modes, automatically adapting to the user's system preferences.

You can override the default styles by adding your own CSS variables in the globals.css and overrides.css files to apply your own theme.

Default Theme

The theme color with a modern blue concept is used by the official DocuBook website.

globals.css
/* Modern Blue Theme - start here */
@layer base {
  :root {
    --background: 210 40% 98%;
    --foreground: 220 30% 15%;
    --card: 0 0% 100%;
    --card-foreground: 220 30% 15%;
    --popover: 0 0% 100%;
    --popover-foreground: 220 30% 15%;
    --primary: 210 81% 56%;
    --primary-foreground: 0 0% 100%;
    --secondary: 210 30% 90%;
    --secondary-foreground: 220 30% 15%;
    --muted: 210 20% 92%;
    --muted-foreground: 220 15% 50%;
    --accent: 200 100% 40%;
    --accent-foreground: 0 0% 100%;
    --destructive: 0 85% 60%;
    --destructive-foreground: 0 0% 100%;
    --border: 210 20% 85%;
    --input: 210 20% 85%;
    --ring: 210 81% 56%;
    --radius: 0.5rem;
    --chart-1: 210 81% 56%;
    --chart-2: 200 100% 40%;
    --chart-3: 220 76% 60%;
    --chart-4: 190 90% 50%;
    --chart-5: 230 86% 45%;
    --line-number-color: rgba(0, 0, 0, 0.05);
  }

  .dark {
    --background: 220 25% 10%;
    --foreground: 210 30% 96%;
    --card: 220 25% 15%;
    --card-foreground: 210 30% 96%;
    --popover: 220 25% 15%;
    --popover-foreground: 210 30% 96%;
    --primary: 210 100% 65%;
    --primary-foreground: 220 25% 10%;
    --secondary: 215 25% 20%;
    --secondary-foreground: 210 30% 96%;
    --muted: 215 20% 25%;
    --muted-foreground: 215 20% 65%;
    --accent: 200 100% 60%;
    --accent-foreground: 0 0% 100%;
    --destructive: 0 85% 70%;
    --destructive-foreground: 0 0% 100%;
    --border: 215 20% 25%;
    --input: 215 20% 25%;
    --ring: 210 100% 65%;
    --chart-1: 210 100% 65%;
    --chart-2: 200 100% 60%;
    --chart-3: 220 90% 70%;
    --chart-4: 190 100% 65%;
    --chart-5: 230 90% 60%;
    --line-number-color: rgba(255, 255, 255, 0.1);
  }
}

Freshlime

The warm feel of the lime theme is designed for better contrast in dark mode.

globals.css
/* Fresh Lime Theme - start here */
@layer base {
    :root {
        --background: 85 45% 98%;
        --foreground: 85 30% 10%;
        --card: 0 0% 100%;
        --card-foreground: 85 30% 10%;
        --popover: 0 0% 100%;
        --popover-foreground: 85 30% 10%;
        --primary: 85 70% 45%;
        --primary-foreground: 0 0% 100%;
        --secondary: 85 40% 90%;
        --secondary-foreground: 85 30% 10%;
        --muted: 85 30% 92%;
        --muted-foreground: 85 15% 45%;
        --accent: 85 60% 40%;
        --accent-foreground: 0 0% 100%;
        --destructive: 0 85% 60%;
        --destructive-foreground: 0 0% 100%;
        --border: 85 25% 88%;
        --input: 85 25% 88%;
        --ring: 85 70% 45%;
        --radius: 0.5rem;
        --chart-1: 85 70% 45%;
        --chart-2: 85 60% 40%;
        --chart-3: 85 80% 40%;
        --chart-4: 85 85% 35%;
        --chart-5: 85 90% 30%;
        --line-number-color: rgba(0, 0, 0, 0.05);
    }

    .dark {
        --background: 85 20% 8%;
        --foreground: 85 30% 96%;
        --card: 85 20% 10%;
        --card-foreground: 85 30% 96%;
        --popover: 85 20% 10%;
        --popover-foreground: 85 30% 96%;
        --primary: 85 75% 55%;
        --primary-foreground: 85 20% 8%;
        --secondary: 85 25% 18%;
        --secondary-foreground: 85 30% 96%;
        --muted: 85 20% 20%;
        --muted-foreground: 85 20% 70%;
        --accent: 85 70% 50%;
        --accent-foreground: 0 0% 100%;
        --destructive: 0 85% 65%;
        --destructive-foreground: 0 0% 100%;
        --border: 85 25% 22%;
        --input: 85 25% 22%;
        --ring: 85 75% 55%;
        --chart-1: 85 75% 55%;
        --chart-2: 85 70% 50%;
        --chart-3: 85 80% 45%;
        --chart-4: 85 85% 40%;
        --chart-5: 85 90% 35%;
        --line-number-color: rgba(255, 255, 255, 0.1);
    }
}

Coffee

The brown color with coffee elements is elegant but looks simple and has an expensive impression.

globals.css
/* Rich Coffee Theme - start here */
@layer base {
    :root {
        --background: 35 40% 96%;
        --foreground: 25 25% 10%;
        --card: 0 0% 100%;
        --card-foreground: 25 25% 10%;
        --popover: 0 0% 100%;
        --popover-foreground: 25 25% 10%;
        --primary: 25 60% 40%;
        --primary-foreground: 0 0% 100%;
        --secondary: 35 30% 90%;
        --secondary-foreground: 25 25% 10%;
        --muted: 35 20% 94%;
        --muted-foreground: 25 15% 35%;
        --accent: 30 50% 38%;
        --accent-foreground: 0 0% 100%;
        --destructive: 5 85% 45%;
        --destructive-foreground: 0 0% 100%;
        --border: 30 15% 85%;
        --input: 30 15% 88%;
        --ring: 25 60% 40%;
        --radius: 0.5rem;
        --chart-1: 25 60% 45%;
        --chart-2: 30 55% 45%;
        --chart-3: 35 50% 42%;
        --chart-4: 20 45% 38%;
        --chart-5: 40 45% 40%;
        --line-number-color: rgba(0, 0, 0, 0.08);
    }

    .dark {
        --background: 30 10% 6%;
        --foreground: 35 20% 94%;
        --card: 30 10% 8%;
        --card-foreground: 35 20% 94%;
        --popover: 30 10% 8%;
        --popover-foreground: 35 20% 94%;
        --primary: 30 45% 52%;
        --primary-foreground: 30 10% 6%;
        --secondary: 30 12% 14%;
        --secondary-foreground: 35 20% 94%;
        --muted: 30 10% 16%;
        --muted-foreground: 30 15% 60%;
        --accent: 28 40% 48%;
        --accent-foreground: 0 0% 100%;
        --destructive: 5 80% 55%;
        --destructive-foreground: 0 0% 100%;
        --border: 30 10% 20%;
        --input: 30 10% 20%;
        --ring: 30 45% 52%;
        --chart-1: 30 45% 52%;
        --chart-2: 28 40% 50%;
        --chart-3: 32 45% 50%;
        --chart-4: 25 35% 46%;
        --chart-5: 35 40% 48%;
        --line-number-color: rgba(255, 255, 255, 0.12);
    }
}

Llms

This document explains how to create and implement custom color themes using AI with LLMS context. The context includes a consistent color palette for both light and dark modes, along with syntax highlighting colors for code.

styles
globals.css
overrides.css

Generate New Theme

1

Step 1: Access LLM for Color Generation

Ensure you have access to a language model (LLM) that supports color palette generation

2

Step 2: Prepare Color Context

Share the content of the llms.txt file with the AI to provide the current color scheme context.

3

Step 3: Define Color Requirements

Determine your preferred color scheme or theme requirements

4

Step 4: Generate New Theme

Use the following prompt to request a new theme from the AI:

Create a new color theme based on the provided context with the following requirements:
1. Different primary color #2281E3
2. Maintain good contrast for accessibility
3. Include variants for both light and dark modes
4. Keep the same structure as the provided context

changes the value of Hex color #2281E3 into your brand colors.

Implementation

After receiving the new color palette:

  1. Copy the generated CSS code to your theme file
  2. Update CSS variables in globals.css
  3. Adjust syntax colors in overrides.css if needed
  4. Test the theme across different devices and display modes

Example Implementation

:root {
  --primary: 210 81% 56%;  /* Primary color */
  --secondary: 210 30% 90%;  /* Secondary color */
  /* ... and so on */
}

.dark {
  --primary: 210 100% 65%;  /* Dark mode primary color */
  /* ... and so on */
}

Tips and Recommendations

  • Always test color contrast to ensure accessibility
  • Maintain consistency with existing themes
  • Use tools like WebAIM Contrast Checker to verify contrast ratios
  • Keep backups of previous theme versions before making major changes

Troubleshooting

  • If colors don't change, ensure CSS variables are properly imported
  • Check CSS selector specificity if styles conflict
  • Verify dark/light mode toggling is working correctly
Edit this page

Published on May 20, 2025