Default Theme

This page explains the Modern Blue theme colors used in DocuBook, which is a default theme provided by DocuBook.

Styles

note:

You can override the default styles by adding your own CSS variables in the globals.css and syntax.css files.

globals.css
/* Modern Blue Theme */
@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%; /* #2281E3 */
    --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);
    }
}
Edit this page

Published on Nov 15, 1925