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 - Linux (Flatpak):
~/.var/app/io.github.dweymouth.supersonic/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.
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.
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 |
|---|---|
 |
 |
Aqua theme by Masterlocker
aqua.toml
[SupersonicTheme]
Name = "Aqua"
Version = "0.2"
SupportsDark = true
SupportsLight = true
[DarkColors]
PageBackground = "#0f3c3e"
InputBackground = "#3b658d"
InputBorder = "#56a1a9"
MenuBackground = "#000000"
OverlayBackground = "#000000"
Pressed = "#5E409D"
Hyperlink = "#0f9361"
ListHeader = "#00838a"
PageHeader = "#00494d"
Background = "#104c4f"
ScrollBar = "#F3F3F3"
Button = "#16415f"
DisabledButton = "#1C1B1A"
Separator = "#403E3C"
Foreground = "#00e5ff"
[LightColors]
PageBackground = "#0990ae"
InputBackground = "#3b658d"
InputBorder = "#56a1a9"
MenuBackground = "#3ca9d3"
OverlayBackground = "#3ca9d3"
Pressed = "#6a47b4"
Hyperlink = "#1241db"
ListHeader = "#03a5ae"
PageHeader = "#09a3bf"
Background = "#0989c1"
ScrollBar = "#F3F3F3"
Button = "#0162b9"
DisabledButton = "#06426e"
Separator = "#615e5a"
Foreground = "#ffffff"| Aqua Dark | Aqua Light |
|---|---|
 |
 |
Adwaita theme by Tuba2
Adwaita.toml
[SupersonicTheme]
Name = "Adwaita"
Version = "0.2"
SupportsDark = true
SupportsLight = true
[DarkColors]
PageBackground = "#1E1E1E"
Foreground = "#FFFFFF"
InputBackground = "#454545"
InputBorder = "#00000000"
MenuBackground = "#383838"
OverlayBackground = "#383838"
Pressed = "#666666"
Hyperlink = "#A5A5A5"
ListHeader = "#242424"
PageHeader = "#242424"
Background = "#303030"
ScrollBar = "#636363"
Button = "#303030"
DisabledButton = "#242424"
Disabled = "#6E6E6E"
Error = "#C01C28"
Focus = "#4C4C4C"
Placeholder = "#A5A5A5"
Primary = "#78AEED"
Hover = "#3E3E3E"
Separator = "#00000000"
Shadow = "0000005c"
Success = "26A269"
Warning = "#CD9309"
[LightColors]
PageBackground = "#FAFAFA"
Foreground = "#000000cc"
InputBackground = "#F0F0F0"
InputBorder = "#00000000"
MenuBackground = "#FAFAFA"
OverlayBackground = "#FAFAFA"
Pressed = "#DCDCDC"
# Hyperlink value was originally #919191, but contrast was poor.
# Thus I instead borrowed the foreground text color value from Libadwaita.
Hyperlink = "#000000cc"
ListHeader = "#FAFAFA"
PageHeader = "#FAFAFA"
Background = "#FFFFFF"
ScrollBar = "#D5D5D5"
Button = "#FFFFFF"
DisabledButton = "#FAFAFA"
Disabled = "#C2C2C2"
Error = "#E01B24"
Focus = "#D8D8D8"
Placeholder = "#919191"
Primary = "#1C71D8"
# Hover value was originally #F1F1F1, but contrast was poor.
# Thus I instead borrowed the search bar background color value from Tab View in Adwaita Demo.
Hover = "#E6E6E6"
Separator = "#00000000"
Shadow = "0000001f"
Success = "2EC27E"
Warning = "#E5A50A"| Adwaita Dark | Adwaita Light |
|---|---|
 |
 |