Skip to content

Custom themes

Introduction

Rogallo is built using the Textual framework, and Textual has some degree of support for themes. Rogallo makes use of this, and the ability to register themes, to provide a way to add your own themes to the application.

Themes location

To add your own themes you create json files in a themes directory below where the configuration file lives. For example:

~/.config/rogallo/themes$ ls -1
amber.json
cbm64.json
cyan.json
green.json
speccy.json
teletext.json
turbo.json
white-inverted.json
white.json

Theme file content

A theme file should be a JSON document that contains the key/value pairs needed to provide the required variables for a Textual theme. An example could be this:

{
    "name": "terminal-white",
    "primary": "#D8D8D8",
    "secondary": "#9E9E9E",
    "accent": "#C4C4C4",
    "foreground": "#B8B8B8",
    "background": "#000000",
    "surface": "#121212",
    "panel": "#1E1E1E",
    "success": "#D8D8D8",
    "warning": "#C4C4C4",
    "error": "#4A4A4A",
    "dark": true,
    "luminosity_spread": 0.15,
    "text_alpha": 0.95,
    "variables": {
        "block-cursor-background": "#D8D8D8",
        "block-cursor-foreground": "#000000",
        "block-cursor-text-style": "none",
        "border": "#D8D8D8",
        "border-blurred": "#404040",
        "button-color-foreground": "#000000",
        "button-focus-text-style": "reverse",
        "footer-background": "#121212",
        "footer-description-foreground": "#B8B8B8",
        "footer-key-foreground": "#D8D8D8",
        "foreground": "#B8B8B8",
        "foreground-muted": "#404040",
        "input-cursor-background": "#C4C4C4",
        "input-cursor-foreground": "#000000",
        "input-selection-background": "#9E9E9E 40%",
        "input-selection-foreground": "#000000",
        "screen-selection-background": "#9E9E9E 40%",
        "screen-selection-foreground": "#B8B8B8",
        "scrollbar": "#9E9E9E",
        "scrollbar-active": "#C4C4C4",
        "scrollbar-background": "#000000",
        "scrollbar-background-active": "#1E1E1E",
        "scrollbar-background-hover": "#121212",
        "scrollbar-corner-color": "#000000",
        "scrollbar-hover": "#D8D8D8",
        "text": "#B8B8B8",
        "text-disabled": "#404040",
        "text-muted": "#404040"
    }
}

Getting help with making a theme

If you are trying to create a theme and are struggling with some aspect of it, please don't hesitate to drop into the Q&A section of discussions and ask for help. If I can figure out how to do it, I'll let you know (and likely improve the documentation).

Using a theme

Once you've created one or more theme files in the theme directory, just use the ChangeTheme command (bound to F9 by default) and pick the theme.

If you made a theme but it's missing

If you've created a theme and it doesn't show in the list of available themes, this means you've made a mistake, perhaps resulting in invalid JSON. Review your file, fix any problems, and try again.

As an example, if we load up Rogallo and select the theme example given above, we should see:

Rogallo in white Rogallo v1.5.0 ✓gemini://localhost/features.gmi │ │Welcome to Rogallo │ │ │Rogallo is a terminal-based client for browsing Geminispace, Gopherspace, and │Fingerspace. Its key features include: │ │•Support for the gemini protocol │•Support for the gopher protocol │•Support for the finger protocol │•A bookmark facility (with search) │•A location history facility (with search) │•A backward/forward navigation facility │•Copy-to-clipboard support for URIs or page contents │•Support for setting a home page │•Designed to work on macOS, GNU/Linux and Windows (and likely on other operating │systems that support modern Python) │•Mouse support │•A view source facility │•Has in-application help screens │•Has an easy-to-use command palette │•Hands unknown MIME types off to the operating system │•Optional support (on by default) for ANSI escape sequences in pages │•Support for viewing local Gemtext files │•Choice of themes │•Persistent user configuration across sessions │•Fully responsive layout that adjusts dynamically to terminal resizing │ │ │ text/gemini; charset=utf-8 >Enter a URI, file, or command  f1 Help  f2 History  f3 Bookmarks  ^[ Backward  ^] Forward  f10 Quit ▏^p Commands 

{
    "name": "terminal-white",
    "primary": "#D8D8D8",
    "secondary": "#9E9E9E",
    "accent": "#C4C4C4",
    "foreground": "#B8B8B8",
    "background": "#000000",
    "surface": "#121212",
    "panel": "#1E1E1E",
    "success": "#D8D8D8",
    "warning": "#C4C4C4",
    "error": "#4A4A4A",
    "dark": true,
    "luminosity_spread": 0.15,
    "text_alpha": 0.95,
    "variables": {
        "block-cursor-background": "#D8D8D8",
        "block-cursor-foreground": "#000000",
        "block-cursor-text-style": "none",
        "border": "#D8D8D8",
        "border-blurred": "#404040",
        "button-color-foreground": "#000000",
        "button-focus-text-style": "reverse",
        "footer-background": "#121212",
        "footer-description-foreground": "#B8B8B8",
        "footer-key-foreground": "#D8D8D8",
        "foreground": "#B8B8B8",
        "foreground-muted": "#404040",
        "input-cursor-background": "#C4C4C4",
        "input-cursor-foreground": "#000000",
        "input-selection-background": "#9E9E9E 40%",
        "input-selection-foreground": "#000000",
        "screen-selection-background": "#9E9E9E 40%",
        "screen-selection-foreground": "#B8B8B8",
        "scrollbar": "#9E9E9E",
        "scrollbar-active": "#C4C4C4",
        "scrollbar-background": "#000000",
        "scrollbar-background-active": "#1E1E1E",
        "scrollbar-background-hover": "#121212",
        "scrollbar-corner-color": "#000000",
        "scrollbar-hover": "#D8D8D8",
        "text": "#B8B8B8",
        "text-disabled": "#404040",
        "text-muted": "#404040"
    }
}

Or, if you selected a similar theme, made to make Rogallo look like it was running on an amber terminal:

Rogallo in amber Rogallo v1.5.0 ✓gemini://localhost/features.gmi │ │Welcome to Rogallo │ │ │Rogallo is a terminal-based client for browsing Geminispace, Gopherspace, and │Fingerspace. Its key features include: │ │•Support for the gemini protocol │•Support for the gopher protocol │•Support for the finger protocol │•A bookmark facility (with search) │•A location history facility (with search) │•A backward/forward navigation facility │•Copy-to-clipboard support for URIs or page contents │•Support for setting a home page │•Designed to work on macOS, GNU/Linux and Windows (and likely on other operating │systems that support modern Python) │•Mouse support │•A view source facility │•Has in-application help screens │•Has an easy-to-use command palette │•Hands unknown MIME types off to the operating system │•Optional support (on by default) for ANSI escape sequences in pages │•Support for viewing local Gemtext files │•Choice of themes │•Persistent user configuration across sessions │•Fully responsive layout that adjusts dynamically to terminal resizing │ │ │ text/gemini; charset=utf-8 >Enter a URI, file, or command  f1 Help  f2 History  f3 Bookmarks  ^[ Backward  ^] Forward  f10 Quit ▏^p Commands 

{
    "name": "terminal-amber",
    "primary": "#FFB000",
    "secondary": "#C88200",
    "accent": "#FFC947",
    "foreground": "#FFC107",
    "background": "#000000",
    "surface": "#140E00",
    "panel": "#241800",
    "success": "#FFB000",
    "warning": "#FFDC00",
    "error": "#593800",
    "dark": true,
    "luminosity_spread": 0.15,
    "text_alpha": 0.95,
    "variables": {
        "block-cursor-background": "#FFB000",
        "block-cursor-foreground": "#000000",
        "block-cursor-text-style": "none",
        "border": "#FFB000",
        "border-blurred": "#4D3300",
        "button-color-foreground": "#000000",
        "button-focus-text-style": "reverse",
        "footer-background": "#140E00",
        "footer-description-foreground": "#FFC107",
        "footer-key-foreground": "#FFB000",
        "foreground": "#FFC107",
        "foreground-muted": "#4D3300",
        "input-cursor-background": "#FFC947",
        "input-cursor-foreground": "#000000",
        "input-selection-background": "#C88200 40%",
        "input-selection-foreground": "#000000",
        "screen-selection-background": "#C88200 40%",
        "screen-selection-foreground": "#FFC107",
        "scrollbar": "#C88200",
        "scrollbar-active": "#FFC947",
        "scrollbar-background": "#000000",
        "scrollbar-background-active": "#241800",
        "scrollbar-background-hover": "#140E00",
        "scrollbar-corner-color": "#000000",
        "scrollbar-hover": "#FFB000",
        "text": "#FFC107",
        "text-disabled": "#4D3300",
        "text-muted": "#4D3300"
    }
}

Another option might be a classic green screen:

Rogallo in green Rogallo v1.5.0 ✓gemini://localhost/features.gmi │ │Welcome to Rogallo │ │ │Rogallo is a terminal-based client for browsing Geminispace, Gopherspace, and │Fingerspace. Its key features include: │ │•Support for the gemini protocol │•Support for the gopher protocol │•Support for the finger protocol │•A bookmark facility (with search) │•A location history facility (with search) │•A backward/forward navigation facility │•Copy-to-clipboard support for URIs or page contents │•Support for setting a home page │•Designed to work on macOS, GNU/Linux and Windows (and likely on other operating │systems that support modern Python) │•Mouse support │•A view source facility │•Has in-application help screens │•Has an easy-to-use command palette │•Hands unknown MIME types off to the operating system │•Optional support (on by default) for ANSI escape sequences in pages │•Support for viewing local Gemtext files │•Choice of themes │•Persistent user configuration across sessions │•Fully responsive layout that adjusts dynamically to terminal resizing │ │ │ text/gemini; charset=utf-8 >Enter a URI, file, or command  f1 Help  f2 History  f3 Bookmarks  ^[ Backward  ^] Forward  f10 Quit ▏^p Commands 

{
    "name": "terminal-green",
    "primary": "#33FF33",
    "secondary": "#00AA44",
    "accent": "#66FF66",
    "foreground": "#33FF33",
    "background": "#000000",
    "surface": "#001A08",
    "panel": "#003311",
    "success": "#33FF33",
    "warning": "#CCFF33",
    "error": "#004D1A",
    "dark": true,
    "luminosity_spread": 0.15,
    "text_alpha": 0.95,
    "variables": {
        "block-cursor-background": "#33FF33",
        "block-cursor-foreground": "#000000",
        "block-cursor-text-style": "none",
        "border": "#33FF33",
        "border-blurred": "#004D1A",
        "button-color-foreground": "#000000",
        "button-focus-text-style": "reverse",
        "footer-background": "#001A08",
        "footer-description-foreground": "#33FF33",
        "footer-key-foreground": "#33FF33",
        "foreground": "#33FF33",
        "foreground-muted": "#004D1A",
        "input-cursor-background": "#66FF66",
        "input-cursor-foreground": "#000000",
        "input-selection-background": "#00AA44 40%",
        "input-selection-foreground": "#000000",
        "screen-selection-background": "#00AA44 40%",
        "screen-selection-foreground": "#33FF33",
        "scrollbar": "#00AA44",
        "scrollbar-active": "#66FF66",
        "scrollbar-background": "#000000",
        "scrollbar-background-active": "#003311",
        "scrollbar-background-hover": "#001A08",
        "scrollbar-corner-color": "#000000",
        "scrollbar-hover": "#33FF33",
        "text": "#33FF33",
        "text-disabled": "#004D1A",
        "text-muted": "#004D1A"
    }
}

Or how about something that invokes the age of microcomputers?

Micro colourful Rogallo v1.5.0 ✓gemini://localhost/features.gmi │ │Welcome to Rogallo │ │ │Rogallo is a terminal-based client for browsing Geminispace, Gopherspace, and │Fingerspace. Its key features include: │ │•Support for the gemini protocol │•Support for the gopher protocol │•Support for the finger protocol │•A bookmark facility (with search) │•A location history facility (with search) │•A backward/forward navigation facility │•Copy-to-clipboard support for URIs or page contents │•Support for setting a home page │•Designed to work on macOS, GNU/Linux and Windows (and likely on other operating │systems that support modern Python) │•Mouse support │•A view source facility │•Has in-application help screens │•Has an easy-to-use command palette │•Hands unknown MIME types off to the operating system │•Optional support (on by default) for ANSI escape sequences in pages │•Support for viewing local Gemtext files │•Choice of themes │•Persistent user configuration across sessions │•Fully responsive layout that adjusts dynamically to terminal resizing │ │ │ text/gemini; charset=utf-8 >Enter a URI, file, or command  f1 Help  f2 History  f3 Bookmarks  ^[ Backward  ^] Forward  f10 Quit ▏^p Commands 

{
    "name": "micro-cbm64",
    "primary": "#7068EB",
    "secondary": "#4038B0",
    "accent": "#A098FF",
    "foreground": "#7068EB",
    "background": "#4038B0",
    "surface": "#302898",
    "panel": "#201880",
    "success": "#7068EB",
    "warning": "#A098FF",
    "error": "#201880",
    "dark": true,
    "luminosity_spread": 0.15,
    "text_alpha": 0.95,
    "variables": {
        "block-cursor-background": "#7068EB",
        "block-cursor-foreground": "#4038B0",
        "block-cursor-text-style": "none",
        "border": "#7068EB",
        "border-blurred": "#201880",
        "button-color-foreground": "#4038B0",
        "button-focus-text-style": "reverse",
        "footer-background": "#302898",
        "footer-description-foreground": "#7068EB",
        "footer-key-foreground": "#7068EB",
        "foreground": "#7068EB",
        "foreground-muted": "#201880",
        "input-cursor-background": "#A098FF",
        "input-cursor-foreground": "#4038B0",
        "input-selection-background": "#7068EB 40%",
        "input-selection-foreground": "#4038B0",
        "screen-selection-background": "#7068EB 40%",
        "screen-selection-foreground": "#7068EB",
        "scrollbar": "#7068EB",
        "scrollbar-active": "#A098FF",
        "scrollbar-background": "#4038B0",
        "scrollbar-background-active": "#201880",
        "scrollbar-background-hover": "#302898",
        "scrollbar-corner-color": "#4038B0",
        "scrollbar-hover": "#A098FF",
        "text": "#7068EB",
        "text-disabled": "#201880",
        "text-muted": "#201880"
    }
}

Sharing themes

If you'd like to share a theme you've made, please feel free to post a screenshot, the JSON, and any other details, in the themes discussion group.