Skip to main content

Themes & Appearance

Rostyman ships with multiple built-in themes and supports fully custom themes with live preview.

Built-in Themes​

20 themes are available out of the box across three categories:

Rostyman Originals: Rostyman Dark (default), Rostyman Light

VS Code Inspired: Dark+, Light+, Monokai, Dracula, Solarized Dark, Solarized Light, One Dark, One Light, Nord, Tokyo Night, Catppuccin Mocha, Gruvbox Dark

Modern: Dark Horizon, Dark Modern, Midnight, Ayu Dark, Ayu Light, GitHub Dark

System Theme​

Select System in the theme picker to automatically follow your OS preference. When the OS switches between light and dark mode, Rostyman switches theme instantly without restarting.

  • Light OS mode → applies the last-used light theme (defaults to Rostyman Light)
  • Dark OS mode → applies the last-used dark theme (defaults to Rostyman Dark)

Switching Themes​

Go to Settings → Appearance, or open the Theme Manager from the sidebar. The theme gallery shows mini previews of each theme — click to apply instantly.

Custom Themes​

Create your own theme by cloning any built-in or custom theme:

  1. Open the Theme Manager
  2. Click Clone on any theme
  3. Name your custom theme
  4. Edit the CSS variables with the visual editor

Editable Variables​

Custom themes expose 70+ CSS variables. Here are the key categories:

Backgrounds

--bg-primary       /* Main app background */
--bg-secondary     /* Sidebar, panels */
--bg-tertiary      /* Inputs, dropdowns */
--bg-hover         /* Hover state */
--bg-active        /* Active/selected state */

Text

--text-primary     /* Main text */
--text-secondary   /* Muted/label text */
--text-disabled    /* Disabled elements */

Accent

--accent-primary   /* Buttons, links, focus rings */
--accent-hover     /* Accent hover state */

Borders

--border-primary   /* Panel and input borders */
--border-secondary /* Subtle dividers */

Status Colors

--status-success   /* Green — 2xx responses, passing tests */
--status-warning   /* Yellow/orange — 3xx, warnings */
--status-error     /* Red — 4xx/5xx, failures */
--status-info      /* Blue — informational highlights */

Live Preview​

Changes apply in real-time as you adjust values. Use the color picker or enter hex/RGB values directly. Click Save to keep your theme, or Discard to revert.

Font Size​

Adjust the global font size in Settings → Appearance. The setting applies to all panels, editors, and UI elements.

Tips​

  • Clone the theme closest to what you want and adjust from there
  • Use high contrast between --bg-primary and --text-primary for readability
  • Custom themes persist across app restarts and updates