Themes

With SlopCode you can select from one of several built-in themes, use a theme that adapts to your terminal theme, or define your own custom theme.

By default, SlopCode uses our own slopcode theme.

Terminal requirements

For themes to display correctly with their full color palette, your terminal must support truecolor (24-bit color). Most modern terminals support this by default, but you may need to enable it:

Check support: Run echo $COLORTERM - it should output truecolor or 24bit
Enable truecolor: Set the environment variable COLORTERM=truecolor in your shell profile
Terminal compatibility: Ensure your terminal emulator supports 24-bit color (most modern terminals like iTerm2, Alacritty, Kitty, Windows Terminal, and recent versions of GNOME Terminal do)

Without truecolor support, themes may appear with reduced color accuracy or fall back to the nearest 256-color approximation.

Built-in themes

SlopCode comes with several built-in themes.

Name	Description
`system`	Adapts to your terminal’s background color
`tokyonight`	Based on the Tokyonight theme
`everforest`	Based on the Everforest theme
`ayu`	Based on the Ayu dark theme
`catppuccin`	Based on the Catppuccin theme
`catppuccin-macchiato`	Based on the Catppuccin theme
`gruvbox`	Based on the Gruvbox theme
`kanagawa`	Based on the Kanagawa theme
`nord`	Based on the Nord theme
`matrix`	Hacker-style green on black theme
`one-dark`	Based on the Atom One Dark theme

And more, we are constantly adding new themes.

System theme

The system theme is designed to automatically adapt to your terminal’s color scheme. Unlike traditional themes that use fixed colors, the system theme:

Generates gray scale: Creates a custom gray scale based on your terminal’s background color, ensuring optimal contrast.
Uses ANSI colors: Leverages standard ANSI colors (0-15) for syntax highlighting and UI elements, which respect your terminal’s color palette.
Preserves terminal defaults: Uses none for text and background colors to maintain your terminal’s native appearance.

The system theme is for users who:

Want SlopCode to match their terminal’s appearance
Use custom terminal color schemes
Prefer a consistent look across all terminal applications

Using a theme

You can select a theme by bringing up the theme select with the /themes command. Or you can specify it in tui.json.

{
  "$schema": "https://slopcode.dev/tui.json",
  "theme": "tokyonight"
}

Custom themes

SlopCode supports a flexible JSON-based theme system that allows users to create and customize themes easily.

Hierarchy

Themes are loaded from multiple directories in the following order where later directories override earlier ones:

Built-in themes - These are embedded in the binary
User config directory - Defined in ~/.config/slopcode/themes/*.json or $XDG_CONFIG_HOME/slopcode/themes/*.json
Project root directory - Defined in the <project-root>/.slopcode/themes/*.json
Current working directory - Defined in ./.slopcode/themes/*.json

If multiple directories contain a theme with the same name, the theme from the directory with higher priority will be used.

Creating a theme

To create a custom theme, create a JSON file in one of the theme directories.

For user-wide themes:

mkdir -p ~/.config/slopcode/themes
vim ~/.config/slopcode/themes/my-theme.json

And for project-specific themes.

mkdir -p .slopcode/themes
vim .slopcode/themes/my-theme.json

JSON format

Themes use a flexible JSON format with support for:

Hex colors: "#ffffff"
ANSI colors: 3 (0-255)
Color references: "primary" or custom definitions
Dark/light variants: {"dark": "#000", "light": "#fff"}
No color: "none" - Uses the terminal’s default color or transparent

Color definitions

The defs section is optional and it allows you to define reusable colors that can be referenced in the theme.

Terminal defaults

The special value "none" can be used for any color to inherit the terminal’s default color. This is particularly useful for creating themes that blend seamlessly with your terminal’s color scheme:

"text": "none" - Uses terminal’s default foreground color
"background": "none" - Uses terminal’s default background color

Example

Here’s an example of a custom theme:

{
  "$schema": "https://slopcode.dev/theme.json",
  "defs": {
    "nord0": "#2E3440",
    "nord1": "#3B4252",
    "nord2": "#434C5E",
    "nord3": "#4C566A",
    "nord4": "#D8DEE9",
    "nord5": "#E5E9F0",
    "nord6": "#ECEFF4",
    "nord7": "#8FBCBB",
    "nord8": "#88C0D0",
    "nord9": "#81A1C1",
    "nord10": "#5E81AC",
    "nord11": "#BF616A",
    "nord12": "#D08770",
    "nord13": "#EBCB8B",
    "nord14": "#A3BE8C",
    "nord15": "#B48EAD"
  },
  "theme": {
    "primary": {
      "dark": "nord8",
      "light": "nord10"
    },
    "secondary": {
      "dark": "nord9",
      "light": "nord9"
    },
    "accent": {
      "dark": "nord7",
      "light": "nord7"
    },
    "error": {
      "dark": "nord11",
      "light": "nord11"
    },
    "warning": {
      "dark": "nord12",
      "light": "nord12"
    },
    "success": {
      "dark": "nord14",
      "light": "nord14"
    },
    "info": {
      "dark": "nord8",
      "light": "nord10"
    },
    "text": {
      "dark": "nord4",
      "light": "nord0"
    },
    "textMuted": {
      "dark": "nord3",
      "light": "nord1"
    },
    "background": {
      "dark": "nord0",
      "light": "nord6"
    },
    "backgroundPanel": {
      "dark": "nord1",
      "light": "nord5"
    },
    "backgroundElement": {
      "dark": "nord1",
      "light": "nord4"
    },
    "border": {
      "dark": "nord2",
      "light": "nord3"
    },
    "borderActive": {
      "dark": "nord3",
      "light": "nord2"
    },
    "borderSubtle": {
      "dark": "nord2",
      "light": "nord3"
    },
    "diffAdded": {
      "dark": "nord14",
      "light": "nord14"
    },
    "diffRemoved": {
      "dark": "nord11",
      "light": "nord11"
    },
    "diffContext": {
      "dark": "nord3",
      "light": "nord3"
    },
    "diffHunkHeader": {
      "dark": "nord3",
      "light": "nord3"
    },
    "diffHighlightAdded": {
      "dark": "nord14",
      "light": "nord14"
    },
    "diffHighlightRemoved": {
      "dark": "nord11",
      "light": "nord11"
    },
    "diffAddedBg": {
      "dark": "#3B4252",
      "light": "#E5E9F0"
    },
    "diffRemovedBg": {
      "dark": "#3B4252",
      "light": "#E5E9F0"
    },
    "diffContextBg": {
      "dark": "nord1",
      "light": "nord5"
    },
    "diffLineNumber": {
      "dark": "nord2",
      "light": "nord4"
    },
    "diffAddedLineNumberBg": {
      "dark": "#3B4252",
      "light": "#E5E9F0"
    },
    "diffRemovedLineNumberBg": {
      "dark": "#3B4252",
      "light": "#E5E9F0"
    },
    "markdownText": {
      "dark": "nord4",
      "light": "nord0"
    },
    "markdownHeading": {
      "dark": "nord8",
      "light": "nord10"
    },
    "markdownLink": {
      "dark": "nord9",
      "light": "nord9"
    },
    "markdownLinkText": {
      "dark": "nord7",
      "light": "nord7"
    },
    "markdownCode": {
      "dark": "nord14",
      "light": "nord14"
    },
    "markdownBlockQuote": {
      "dark": "nord3",
      "light": "nord3"
    },
    "markdownEmph": {
      "dark": "nord12",
      "light": "nord12"
    },
    "markdownStrong": {
      "dark": "nord13",
      "light": "nord13"
    },
    "markdownHorizontalRule": {
      "dark": "nord3",
      "light": "nord3"
    },
    "markdownListItem": {
      "dark": "nord8",
      "light": "nord10"
    },
    "markdownListEnumeration": {
      "dark": "nord7",
      "light": "nord7"
    },
    "markdownImage": {
      "dark": "nord9",
      "light": "nord9"
    },
    "markdownImageText": {
      "dark": "nord7",
      "light": "nord7"
    },
    "markdownCodeBlock": {
      "dark": "nord4",
      "light": "nord0"
    },
    "syntaxComment": {
      "dark": "nord3",
      "light": "nord3"
    },
    "syntaxKeyword": {
      "dark": "nord9",
      "light": "nord9"
    },
    "syntaxFunction": {
      "dark": "nord8",
      "light": "nord8"
    },
    "syntaxVariable": {
      "dark": "nord7",
      "light": "nord7"
    },
    "syntaxString": {
      "dark": "nord14",
      "light": "nord14"
    },
    "syntaxNumber": {
      "dark": "nord15",
      "light": "nord15"
    },
    "syntaxType": {
      "dark": "nord7",
      "light": "nord7"
    },
    "syntaxOperator": {
      "dark": "nord9",
      "light": "nord9"
    },
    "syntaxPunctuation": {
      "dark": "nord4",
      "light": "nord0"
    }
  }
}