Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/Fixius50/WorlBuilding-Writting-App/llms.txt

Use this file to discover all available pages before exploring further.

Chronos Atlas uses a fully dynamic, CSS-variable-driven color system. Every color in the application — backgrounds, text, borders, accents, and canvas surfaces — is expressed as a semantic token. Switching between themes or toggling light/dark mode requires only a CSS class change on the root element; no component code needs to change.

​
Light and Dark Mode

Theme variants are applied by setting a CSS class on the root element. Dark themes use the .dark or .theme-dark class; each named theme has its own dark and light variant classes:
ClassMode
.dark / .theme-darkGeneric dark mode
.theme-deep_spaceDeep Space — dark
.theme-deep_space_lightDeep Space — light
.theme-nebulaNebula — dark
.theme-nebula_lightNebula — light
.theme-writerWriter — dark
.theme-writer_lightWriter — light
Themes are toggled from the Appearance & Editor tab in Settings. The chosen theme ID (e.g., "nebula_light") is persisted to SQLite and applied on application load. The base (:root) token set defines the light theme default — a soft emerald-green accent on a pure white background: 
/* :root — light theme defaults (Soft Emerald Green) */
:root {
  --background: 0 0% 100%;
  --foreground: 240 10% 3.9%;
  --primary: 142 70% 45%;          /* emerald green accent */
  --primary-foreground: 0 0% 98%;
  --radius: 0px;                   /* sharp / monolithic borders */
}
The generic .dark / .theme-dark variant switches to a near-black base with an indigo accent: 
/* .dark, .theme-dark — generic dark mode */
.dark,
.theme-dark {
  --background: 240 10% 4%;
  --foreground: 0 0% 98%;
  --primary: 243 75% 59%;          /* indigo accent */
  --primary-foreground: 210 40% 98%;
}
All values are expressed as raw HSL channels (no hsl() wrapper), which allows Tailwind’s opacity modifier syntax — hsl(var(--background) / 0.5) — to work without any workaround.

​
Named Theme Variants

Each named theme defines its own --background, --foreground, and --primary values independently for the dark and light modes.

​
Deep Space

/* Dark variant */
.theme-deep_space {
  --background: 240 10% 2%;
  --foreground: 0 0% 95%;
  --primary: 243 75% 59%;          /* indigo */
}

/* Light variant */
.theme-deep_space_light {
  --background: 0 0% 100%;
  --foreground: 240 10% 10%;
  --primary: 142 70% 45%;          /* emerald green */
}

​
Nebula

/* Dark variant */
.theme-nebula {
  --background: 260 40% 5%;
  --foreground: 0 0% 95%;
  --primary: 270 100% 80%;         /* soft lavender */
}

/* Light variant */
.theme-nebula_light {
  --background: 260 20% 99%;
  --foreground: 260 10% 15%;
  --primary: 270 90% 60%;          /* purple */
}

​
Writer

The Writer theme is fully monochromatic — it strips all saturation for a pure ink-on-paper aesthetic: 
/* Dark variant */
.theme-writer {
  --background: 0 0% 3%;
  --foreground: 0 0% 88%;
  --primary: 0 0% 95%;
  --primary-foreground: 0 0% 5%;
}

/* Light variant */
.theme-writer_light {
  --background: 0 0% 98%;
  --foreground: 0 0% 12%;
  --primary: 0 0% 0%;
  --primary-foreground: 0 0% 100%;
}

​
Color Tokens

Beyond the foundational four, each theme defines a full palette of semantic color tokens. These tokens back the text-*, bg-*, and border-* classes used throughout the component layer. 
/* Semantic color tokens — light theme (:root) values */
:root {
  --color-indigo:   243 75% 59%;   /* foreground: 0 0% 100% */
  --color-emerald:  160 84% 39%;   /* foreground: 0 0% 100% */
  --color-red:      0 72% 51%;     /* foreground: 0 0% 100% */
  --color-amber:    38 92% 50%;    /* foreground: 240 10% 4% (dark text) */
  --color-purple:   270 70% 60%;   /* foreground: 0 0% 100% */
  --color-orange:   25 95% 53%;    /* foreground: 0 0% 100% */
  --color-blue:     217 91% 60%;   /* foreground: 0 0% 100% */
  --color-cyan:     187 89% 48%;   /* foreground: 240 10% 4% (dark text) */

  --color-destructive:            0 72% 51%;
  --color-destructive-foreground: 0 0% 100%;
}
These tokens color-code entity types in the Graph, power the StatCard accent colors in Analytics, and drive badge/tag colors across the World Bible. The Writer theme overrides all color tokens to desaturated grays for a pure monochrome aesthetic: 
/* Writer theme — monochrome overrides */
.theme-writer {
  --background:     0 0% 3%;
  --foreground:     0 0% 88%;
  --primary:        0 0% 95%;
  --primary-foreground: 0 0% 5%;

  --color-indigo:   0 0% 60%;
  --color-emerald:  0 0% 70%;
  --color-red:      0 0% 50%;
  --color-amber:    0 0% 75%;
  --color-purple:   0 0% 65%;
  --color-orange:   0 0% 55%;
  --color-blue:     0 0% 80%;
  --color-cyan:     0 0% 85%;
}

​
Layer Opacity System

Rather than hard-coding semi-transparent or muted colors, Chronos Atlas uses the foreground/X opacity pattern everywhere. This means the same markup works across all themes because it reads the current --foreground value (which is already inverted for light vs dark) and applies an opacity fraction.
Tailwind classUsage
bg-foreground/5Hover backgrounds, subtle fills
bg-foreground/10Secondary backgrounds
border-foreground/10Default hairline borders
border-foreground/20Sunken panel borders
border-foreground/40Primary panel borders (--panel-border)
text-foreground/40Muted meta-text, labels
text-foreground/60Secondary text
These are supported by pre-computed derived tokens in the universal * rule: 
* {
  --panel-border:    hsl(var(--foreground) / 0.4);
  --divider-border:  hsl(var(--foreground) / 0.1);
  --sunken-border:   hsl(var(--foreground) / 0.2);
  --sunken-shadow:   hsl(var(--foreground) / 0.1);

  --editor-base-bg:      hsl(var(--background));
  --editor-elevated-bg:  hsl(var(--background) / 0.92);
  --editor-placeholder:  hsl(var(--foreground) / 0.45);
}
Avoid hard-coding hex colors (#rrggbb or bg-[#xxx]) in components. Always use CSS variable tokens for proper theme switching. Hard-coded hex values will not invert between light and dark modes and will appear broken on themes other than the one they were tested against.

​
Canvas Tokens

The Map and Graph canvas components (built on Konva / custom SVG) cannot use Tailwind classes directly on canvas elements. Instead, they read raw HSL channel values from a set of dedicated canvas tokens, which are also defined in the * rule: 
* {
  /* Canvas / Konva surface tokens */
  --canvas-bg:             var(--background);
  --canvas-grid:           var(--foreground);
  --canvas-node-fill:      var(--background);
  --canvas-node-stroke:    var(--primary);
  --canvas-edge:           var(--primary);
  --canvas-label:          var(--foreground);
  --canvas-drawing-stroke: var(--foreground);

  /* Canvas popup tokens */
  --canvas-popup-bg:     var(--background);
  --canvas-popup-fg:     var(--foreground);
  --canvas-popup-border: var(--foreground);
  --canvas-popup-shadow: var(--foreground);
}
JavaScript canvas code reads these via getComputedStyle(element).getPropertyValue('--canvas-node-stroke') and passes the resolved HSL string directly to Konva fill/stroke properties. This ensures the graph and map canvases theme-switch correctly alongside the rest of the UI.

​
World Bible Card Tokens

A second group of specialty tokens powers the card grid in the World Bible: 
* {
  --bible-card-shell-bg:           hsl(var(--background));
  --bible-card-bookmark-bg:        hsl(var(--background));
  --bible-card-folder-color:       hsl(var(--color-indigo) / 0.8);
  --bible-card-folder-color-hover: hsl(var(--color-indigo) / 1);
  --bible-card-entity-color:       hsl(var(--foreground) / 0.55);
  --bible-card-entity-color-hover: hsl(var(--foreground) / 0.9);
  --bible-card-meta-color:         hsl(var(--foreground) / 0.45);
  --bible-card-meta-color-hover:   hsl(var(--foreground) / 0.72);
  --bible-card-action-hover-bg:    hsl(var(--foreground));
  --bible-card-action-hover-fg:    hsl(var(--background));
  --bible-card-image-blend:        normal; /* "screen" in dark themes */
}
Dark themes (.dark, .theme-dark, .theme-deep_space, .theme-nebula, .theme-writer) override --bible-card-image-blend to screen so that entity portrait images composite correctly against the dark background without appearing washed out.

Build docs developers (and LLMs) love

Get started for freeTalk to us