• Tech Dev NotesTech Dev Notes
Apps
  • App lookup
  • App compare
Market movement
  • App charts
  • App rankings
Visual proof
  • App screens
  • App listing screenshots
  • App icons
Build intelligence
  • App tech stacks
  • Tool releases
  • Developers
More
  • X feature flags
  • Grokipedia
  • Blog
  • Follow on X
Skip to content
All content/ filesChangelog

grok-build/latest/content · 0.2.69

docs/user-guide/06-theming.md

Docs·12.7 KB·294 lines

content/

  • .

    • README.md
  • docs/user-guide

    • 01-getting-started.md
    • 02-authentication.md
    • 03-keyboard-shortcuts.md
    • 04-slash-commands.md
    • 05-configuration.md
    • 06-theming.md
    • 07-mcp-servers.md
    • 08-skills.md
    • 09-plugins.md
    • 10-hooks.md
    • 11-custom-models.md
    • 12-project-rules.md
    • 13-memory.md
    • 14-headless-mode.md
    • 15-agent-mode.md
    • 16-subagents.md
    • 17-sessions.md
    • 18-sandbox.md
    • 19-plan-mode.md
    • 20-background-tasks.md
    • 21-terminal-support.md
    • 22-permissions-and-safety.md
  • skills/check-work

    • SKILL.md
  • skills/code-review

    • SKILL.md
  • skills/create-skill

    • SKILL.md
  • skills/docx

    • SKILL.md
  • skills/docx/scripts

    • __init__.py
    • accept_changes.py
    • comment.py
  • skills/docx/scripts/office

    • pack.py
    • soffice.py
    • unpack.py
    • validate.py
  • skills/docx/scripts/office/helpers

    • __init__.py
    • merge_runs.py
    • simplify_redlines.py
  • skills/docx/scripts/office/schemas/ecma/fouth-edition

    • opc-contentTypes.xsd
    • opc-coreProperties.xsd
    • opc-digSig.xsd
    • opc-relationships.xsd
  • skills/docx/scripts/office/schemas/ISO-IEC29500-4_2016

    • dml-chart.xsd
    • dml-chartDrawing.xsd
    • dml-diagram.xsd
    • dml-lockedCanvas.xsd
    • dml-main.xsd
    • dml-picture.xsd
    • dml-spreadsheetDrawing.xsd
    • dml-wordprocessingDrawing.xsd
    • pml.xsd
    • shared-additionalCharacteristics.xsd
    • shared-bibliography.xsd
    • shared-commonSimpleTypes.xsd
    • shared-customXmlDataProperties.xsd
    • shared-customXmlSchemaProperties.xsd
    • shared-documentPropertiesCustom.xsd
    • shared-documentPropertiesExtended.xsd
    • shared-documentPropertiesVariantTypes.xsd
    • shared-math.xsd
    • shared-relationshipReference.xsd
    • sml.xsd
    • vml-main.xsd
    • vml-officeDrawing.xsd
    • vml-presentationDrawing.xsd
    • vml-spreadsheetDrawing.xsd
    • vml-wordprocessingDrawing.xsd
    • wml.xsd
    • xml.xsd
  • skills/docx/scripts/office/schemas/mce

    • mc.xsd
  • skills/docx/scripts/office/schemas/microsoft

    • wml-2010.xsd
    • wml-2012.xsd
    • wml-2018.xsd
    • wml-cex-2018.xsd
    • wml-cid-2016.xsd
    • wml-sdtdatahash-2020.xsd
    • wml-symex-2015.xsd
  • skills/docx/scripts/office/validators

    • __init__.py
    • base.py
    • docx.py
    • pptx.py
    • redlining.py
  • skills/docx/scripts/templates

    • comments.xml
    • commentsExtended.xml
    • commentsExtensible.xml
    • commentsIds.xml
    • people.xml
  • skills/help

    • SKILL.md
  • skills/imagine

    • SKILL.md
  • skills/pptx

    • editing.md
    • pptxgenjs.md
    • SKILL.md
  • skills/pptx/scripts

    • __init__.py
    • add_slide.py
    • clean.py
    • thumbnail.py
  • skills/pptx/scripts/office

    • pack.py
    • soffice.py
    • unpack.py
    • validate.py
  • skills/pptx/scripts/office/helpers

    • __init__.py
    • merge_runs.py
    • simplify_redlines.py
  • skills/pptx/scripts/office/schemas/ecma/fouth-edition

    • opc-contentTypes.xsd
    • opc-coreProperties.xsd
    • opc-digSig.xsd
    • opc-relationships.xsd
  • skills/pptx/scripts/office/schemas/ISO-IEC29500-4_2016

    • dml-chart.xsd
    • dml-chartDrawing.xsd
    • dml-diagram.xsd
    • dml-lockedCanvas.xsd
    • dml-main.xsd
    • dml-picture.xsd
    • dml-spreadsheetDrawing.xsd
    • dml-wordprocessingDrawing.xsd
    • pml.xsd
    • shared-additionalCharacteristics.xsd
    • shared-bibliography.xsd
    • shared-commonSimpleTypes.xsd
    • shared-customXmlDataProperties.xsd
    • shared-customXmlSchemaProperties.xsd
    • shared-documentPropertiesCustom.xsd
    • shared-documentPropertiesExtended.xsd
    • shared-documentPropertiesVariantTypes.xsd
    • shared-math.xsd
    • shared-relationshipReference.xsd
    • sml.xsd
    • vml-main.xsd
    • vml-officeDrawing.xsd
    • vml-presentationDrawing.xsd
    • vml-spreadsheetDrawing.xsd
    • vml-wordprocessingDrawing.xsd
    • wml.xsd
    • xml.xsd
  • skills/pptx/scripts/office/schemas/mce

    • mc.xsd
  • skills/pptx/scripts/office/schemas/microsoft

    • wml-2010.xsd
    • wml-2012.xsd
    • wml-2018.xsd
    • wml-cex-2018.xsd
    • wml-cid-2016.xsd
    • wml-sdtdatahash-2020.xsd
    • wml-symex-2015.xsd
  • skills/pptx/scripts/office/validators

    • __init__.py
    • base.py
    • docx.py
    • pptx.py
    • redlining.py
  • skills/xlsx/scripts

    • recalc.py
  • skills/xlsx/scripts/office

    • pack.py
    • soffice.py
    • unpack.py
    • validate.py
  • skills/xlsx/scripts/office/helpers

    • __init__.py
    • merge_runs.py
    • simplify_redlines.py
  • skills/xlsx/scripts/office/schemas/ecma/fouth-edition

    • opc-contentTypes.xsd
  • skills/xlsx/scripts/office/validators

    • __init__.py
    • base.py
    • docx.py
    • pptx.py
    • redlining.py

Theming and Appearance Customization

Grok Build draws all TUI colors from a central theme. You can switch themes while Grok is running, follow your operating system's light or dark appearance, and adjust scrollback layout, animations, and block styling through configuration files.


Available Themes

Grok includes five built-in themes, plus an auto option that follows your system appearance:

Theme Config Names Description Truecolor Required
GrokNight groknight, grok-night, dark Neutral dark base with a magenta accent. Default theme. Survives quantization cleanly on 256-color and 16-color terminals. No
GrokDay grokday, grok-day, light, day Light theme for bright terminal backgrounds. No
TokyoNight tokyonight, tokyo-night, tokyo Dark, blue-tinted backgrounds from the Tokyo Night palette. Loses its character when quantized. Yes
RosePineMoon rosepine, rose-pine, rosepine-moon, rose-pine-moon Muted dark palette with mauve accents, from the Rosé Pine family. Yes
OscuraMidnight oscura, oscura-midnight Deep dark base with purple accents. Yes

Theme names are case-insensitive. The auto option (alias system) is documented under Auto Theme (System Appearance).


Switching Themes

In the TUI

Run the /theme slash command (alias /t) to open the theme picker. As you move through the list with the arrow keys, Grok previews each theme in real time. Press Enter to apply and save your choice, or press Escape to revert.

To switch without the picker, pass a name directly:

/theme tokyonight

Submitting /theme on its own -- without choosing from the picker -- cycles to the next theme.

Via Config File

Set the theme in ~/.grok/config.toml:

[ui]
theme = "tokyonight"

Auto Theme (System Appearance)

Set theme = "auto" to have Grok follow your operating system's light/dark appearance and switch themes automatically:

[ui]
theme = "auto"

By default, dark mode maps to GrokNight and light mode maps to GrokDay. Override either mapping with auto_dark_theme and auto_light_theme:

[ui]
theme = "auto"
auto_dark_theme = "tokyonight"
auto_light_theme = "grokday"

theme = "system" is an alias for theme = "auto".

How Detection Works

Platform Method
macOS Reads AppleInterfaceStyle system preference
Linux Queries XDG Desktop Portal (org.freedesktop.appearance.color-scheme)
Windows Reads the system personalization registry
SSH / headless Falls back to an OSC 11 terminal background query at startup

Once running, Grok polls for appearance changes every 5 seconds. Toggling your OS between light and dark mode takes effect within seconds without restarting.

Via the Settings Pane

Run /settings (alias /config) and open the Appearance category to set the Auto dark theme and Auto light theme interactively. Selecting auto in the /theme picker enables auto mode using these mappings.


Color Support Detection

On startup, Grok detects your terminal's color capability level:

Level Description Detection
Truecolor (24-bit) Full RGB color. All themes render as designed. COLORTERM=truecolor or equivalent terminal capability
256-color Indexed palette. RGB values are mapped to the nearest palette entry. Standard xterm-256color
16-color ANSI names only. Colors are mapped to the closest ANSI color. Basic terminal support

When you set NO_COLOR, Grok emits no color and renders in monochrome.

Automatic Quantization

Every theme is defined using full RGB values. At startup, Grok quantizes all colors to match the detected capability level. This means:

  • On truecolor terminals, colors pass through unchanged.
  • On 256-color terminals, each RGB value is mapped to the nearest indexed palette entry.
  • On 16-color terminals, colors map to ANSI names.

GrokNight and GrokDay use neutral grays that quantize cleanly. TokyoNight, RosePineMoon, and OscuraMidnight use distinctive tinted backgrounds that lose their character when quantized, which is why the theme picker hides them on non-truecolor terminals.

Runtime-Generated Colors

Colors generated at runtime (syntax highlighting, background blending) are also quantized through the same pipeline, ensuring consistent appearance across all terminal types.


Cursor Color

Grok sets your terminal cursor to the current theme's accent_user color using the OSC 12 escape sequence, to indicate an active Grok session. The cursor color is:

  • Applied on startup and on theme switch.
  • Reset to the terminal's default on exit via OSC 112.

This works in terminals that support OSC 12 (most modern terminals).


Compact Mode

Toggle compact mode with the /compact-mode slash command. Compact mode:

  • Removes outer vertical padding (top/bottom margins become 0).
  • Reduces horizontal padding to the minimum (1 column).
  • Reduces top padding in the prompt area and info blocks.

The setting is persisted in ~/.grok/config.toml under [ui].compact_mode and survives restarts.

Use compact mode on small screens to maximize content area.


Syntax Highlighting

Grok bundles three .tmTheme files for code-block syntax highlighting and selects one based on the active theme:

  • grok-night.tmTheme -- GrokNight, RosePineMoon, and OscuraMidnight
  • grok-day.tmTheme -- GrokDay
  • tokyo-night.tmTheme -- TokyoNight

Grok selects the matching file automatically when you switch themes. The .tmTheme files are built into the binary, so you cannot replace them with your own.


Deep Customization with pager.toml

For fine-grained control over the TUI appearance, create ~/.grok/pager.toml. This file controls scrollback layout, block styling, animations, and more. All settings have defaults; specify only the values you override.

Layout

Control viewport padding and block spacing:

[scrollback.layout]
outer_vpad = 1          # Vertical padding (top/bottom) for the viewport
outer_hpad_left = 2     # Left margin (minimum: 1)
outer_hpad_right = 2    # Right margin (minimum: 1)
block_pad_left = 2      # Padding between accent line and content
block_pad_right = 2     # Padding after content at right edge

Scrollbar

[scrollback.scrollbar]
enabled = true          # Show/hide the scrollbar
gap_left = 0            # Gap between content and scrollbar (0 = adjacent)
gap_right = 0           # Gap between scrollbar and screen edge (0 = at edge)
# scrollbar_bg = "none" # Override background color (or "none" for theme default)
# scrollbar_fg = "none" # Override thumb color (or "none" for theme default)

Scroll Behavior

[scrollback.scroll]
margin = 0                  # Context lines above/below selected entry (0 = edge)
min_page_fraction = 0       # Minimum scroll as % of viewport (0-100)
follow_indicator = "center" # "center" = show down-arrow, "none" = hidden
follow_auto_select = true   # Auto-select latest entry when following
follow_by_overscroll = true # Scrolling past bottom engages follow mode
anchor_on_fold = true       # Keep block header at same screen position when folding

Display Options

[scrollback.display]
sticky_headers = true              # Pin user prompts as headers when scrolled past
tab_width = 4                      # Spaces per tab character (0 = pass through)
expandable_indicator = true        # Show "›" on foldable collapsed entries
expandable_indicator_char = "›"    # Character to use (default: "›")
collapsed_accent_char = "❙"        # Accent for collapsed groupable blocks (falls back to "|" on the legacy Windows console)
dim_accent = 0.5                   # Blend factor for dimmed accents (0.0-1.0)
line_under_last_entry = false      # Horizontal line below last entry
selection_buttons = false          # Show copy/view buttons on selection box

Animation

[animation]
fps = 30           # Frame rate (1-60). Higher = smoother, more CPU
wave_rows = 32     # Rows per wave cycle for accent animation

Block Styling: Edit Diffs

[scrollback.blocks.edit]
indent = true                   # Indent diff content
vpad = false                    # Vertical padding around diffs
expanded_by_default = true      # Start diffs expanded (false = collapsed)
hunk_separator = "…"            # Separator between hunks ("…", "───", "⋯", or "" for none)
dual_line_numbers = false       # Two-column line numbers (old + new, like GitHub)
line_summary = false            # Show +N/-M line counts in header
# bg = "none"                   # Block background ("none", "light", "dark")

Block Styling: Thinking/Reasoning

[scrollback.blocks.thinking]
accent_enabled = true       # Show accent line for thinking blocks
animate = true              # Animate accent line while thinking
truncated_lines = 3         # Lines to show in truncated mode
bg_blend = 70               # Markdown-color blend with background (0-100)
header = true               # Show "Thinking..." header
header_bright = false       # Bright header style (vs dim/muted)

Block Styling: Tool Calls

[scrollback.blocks.tool]
muted_collapsed = true     # Gray out collapsed tool calls
dim_details = true          # Dim parenthetical details (line counts, match counts)
bullet = "diamond"          # Bullet style before tool headers

Available bullet styles:

Config Value Character Description
none (none) No bullet
dot · Middle dot (smallest)
small-circle • Bullet
circle ● Filled circle
small-triangle ▸ Right-pointing small triangle
triangle ▶ Right-pointing triangle
diamond ◆ Filled diamond (default)

Block Styling: Execute (Shell Commands)

[scrollback.blocks.execute]
first_lines = 2                   # Output lines shown at start in truncated mode
last_lines = 3                    # Output lines shown at end in truncated mode
accent_enabled = true             # Show accent line (animated while running)
header_style = "label"            # "shell" ($ prefix) or "label" (Run prefix)
muted_command_collapsed = true    # Mute command text when collapsed

Block Styling: User Prompts (Scrollback)

[scrollback.blocks.prompt]
vpad = true            # Vertical padding
invert = false         # Inverted text style
bg = "light"           # Background ("none", "light", "dark")
show_prefix = true     # Show the prompt prefix character
min_lines = 2          # Minimum content lines in truncated/sticky mode

Prompt Input Widget

[prompt]
collapse_unfocused = true    # Collapse when scrollback is focused
mouse_hover = true           # Show hover highlight on mouse over
show_prefix = true           # Show the prompt prefix character

Todo Badges

[todo]
badge_format = "default"   # "default" = [1 2 3 4], "colon" = [▶:1 □:4 ✓:3 ✗:2], "comma" = [1
…
Previousdocs/user-guide/05-configuration.mdNextdocs/user-guide/07-mcp-servers.md

© 2026 Tech Dev Notes

RSSAboutAPIPrivacyTermsSitemap@techdevnotes