Textual Color Theming: Ayu Theme

[mitosch]

NOTE: Theming is currently not officially supported according to the documentation. This may be subject of change in the future and is an in-official method for changing the theme / base colors.

This example shows, how you can apply or change the base colors of textual and re-use those in CSS ($primary, $secondary, etc.).

To change the colors, the DEFAULT_COLORS has to be overwritten:

import textual
textual.app.DEFAULT_COLORS = CUSTOM_COLORS

Running the textual demo with the Ayu dark and light theme:

from textual.demo import DemoApp

# ColorSystem for theming:
from textual.design import ColorSystem

# only for accessing the demo.css in the textual package
import os
import textual
TEXTUAL_PATH = os.path.dirname(textual.__file__)

"""
CUSTOM_COLORS:
define the base colors according to the guide:
https://textual.textualize.io/guide/design/

the following CUSTOM_COLORS are based on the ayu-theme:
https://github.com/ayu-theme/ayu-colors
"""
CUSTOM_COLORS = {
    "dark": ColorSystem(
        primary="#39BAE6",      # syntax.tag
        secondary="#FFB454",    # syntax.func
        accent="#59C2FF",       # syntax.entity
        warning="#E6B450",      # common.accent
        error="#D95757",        # common.error
        success="#7FD962",      # vcs.added
        background="#0B0E14",   # ui.bg
        boost="#47526633",      # ui.selection.normal
        surface="#0F131A",      # ui.panel.bg
        panel="#565B66",        # ui.fg
        dark=True,
    ),

    "light": ColorSystem(
        primary="#55B4D4",
        secondary="#F2AE49",
        accent="#399EE6",
        warning="#FFAA33",
        error="#E65050",
        success="#6CBF43",
        background="#F8F9FA",
        boost="#6B7D8F1F",
        surface="#F3F4F5",
        panel="#8A9199",
        dark=False,
    )
}
textual.app.DEFAULT_COLORS = CUSTOM_COLORS


class DemoAppWrapper(DemoApp):
    CSS_PATH = TEXTUAL_PATH + "/demo.css"


if __name__ == "__main__":
    app = DemoAppWrapper()
    app.run()

The comments behind the colors refer to the Ayu Colors SVG

Result:

Dark:

Light:

PS: There is also a possibility without overwriting DEFAULT_COLORS and change it during runtime (with a small side-effect of flickering sometimes):

    # On your main App, set the design and refresh the CSS:
    def on_mount(self) -> None:
    	self.design = CUSTOM_COLORS
	self.refresh_css()