Custom Themes

Since version 0.4.0, Supersonic supports user-defined custom themes! To add custom themes, a <themename>.toml file must be created in the themes subdirectory of Supersonic's config directory. The path depends on the OS:

• Linux: ~/.config/supersonic/themes
• Windows: C:\Users\<yourname>\AppData\Roaming\supersonic\themes
• Mac OS: ~/Library/Application\ Support/supersonic/themes

You can refer to the default theme file as an example.

The header ([SupersonicTheme] section) is mandatory. Name and Version are mandatory. Version is the version of the theme file syntax, currently 0.2. Additionally, one or both of SupportsDark and SupportsLight must be true. For dark, and light, respectively, colors are defined in the [DarkColors] and [LightColors] sections. Either #RRGGBB or #RRGGBBAA color syntax is supported, but note that a semi-transparent window is not supported (i.e. the window background will always have full opacity). Not every color must be defined - if a color is not defined in the theme file, the default value for that color for the dark or light built-in theme will be used. The full list of colors can be found by referring to the theme file parser here. For the most part, the color names are self-explanatory but you can also refer to the Fyne UI library's theme code here which has a comment for each color name describing how it is used in the UI.

Once theme files are placed in the directory, they will show up on the next launch of Supersonic, in the Settings dialog. Tweaking a theme in real time is not supported, but changes to a theme file can be re-applied without quitting the app by switching to a different theme and then back to the theme you're editing.

Theme file syntax 0.2

Version 0.7.0 of Supersonic introduced the theme file syntax 0.2 which supports two new color names - Hyperlink, and PageHeader. With version 0.1 theme files, hyperlinks will continue to be drawn with the Primary color.

Community-supplied themes

Feel free to edit this page to share your custom themes here!

Breeze theme by SnipeX_

breeze.toml

[SupersonicTheme]
Name = "Breeze"
Version = "0.1"
SupportsDark = true
SupportsLight = true

[DarkColors]
PageBackground = "#1A1D1F"
ListHeader = "#31363B"
PageHeader = "#292D32"
Background = "#31363B"
ScrollBar = "#316D8E"
Button = "#31363B"
InputBackground = "#31363B"

[LightColors]
PageBackground = "#FFFFFF"
ListHeader = "#DDE0E2"
PageHeader = "#EFF0F1"
Background = "#DDE0E2"
ScrollBar = "#316D8E"
Button = "#DDE0E2"
InputBackground = "#DDE0E2"

Breeze Dark	Breeze Light

Flexoki theme by foldfree

flexoki.toml

[SupersonicTheme]
Name = "Flexoki"
Version = "0.2"
SupportsDark = true
SupportsLight = true

[DarkColors]
PageBackground = "#100F0F"
InputBackground = "#343331"
InputBorder = "#575653"
MenuBackground = "#343331"
OverlayBackground = "#343331"
Pressed = "#5E409D"
Hyperlink = "#CECDC3"
ListHeader = "#282726"
PageHeader = "#343331"
Background = "#1C1B1A"
ScrollBar = "#403E3C"
Button = "#403E3C"
DisabledButton = "#1C1B1A"
Separator = "#403E3C"
Foreground = "#CECDC3"

[LightColors]
PageBackground = "#FFFCF0"
InputBackground = "#E6E4D9"
InputBorder = "#B7B5AC"
MenuBackground = "#FFFCF0"
OverlayBackground = "#FFFCF0"
Pressed = "#8B7EC8"
Hyperlink = "#100F0F"
ListHeader = "#E6E4D9"
PageHeader = "#DAD8CE"
Background = "#F2F0E5"
ScrollBar = "#CECDC3"
Button = "#E6E4D9"
DisabledButton = "#F2F0E5"
Separator = "#CECDC3"
Foreground = "#100F0F"

Flexoki Dark	Flexoki Light

Nord theme by GavinL2001

nord.toml

[SupersonicTheme]
Name = "Nord"
Version = "0.2"
SupportsDark = true
SupportsLight = true

[DarkColors]
PageBackground = "#2E3440"
ListHeader = "#3B4252"
PageHeader = "#3B4252"
Background = "#3B4252"
ScrollBar = "#4C566A"
Button = "#434C5E32"
InputBackground = "#434C5E32"
Hyperlink = "#81A1C1"
Pressed = "#5E81AC"
Foreground = "#E5E9F0"

[LightColors]
PageBackground = "#E5E9F0"
ListHeader = "#D8DEE9"
PageHeader = "#D8DEE9"
Background = "#D8DEE9"
ScrollBar = "#D8DEE9"
Button = "#ECEFF4F0"
DisabledButton = "#D8DEE9F0"
Foreground = "#3B4252"
Hyperlink = "#4C566A"
Pressed = "#5E81AC"

Nord Dark	Nord Light