Custom theme support

[TheSunCat]

Hi! I am loving this app so far, and when building it with Wayland support as described in #54 it looks great. Thanks for your work maintaining it! However, as it uses the Fyne toolkit, it does not follow my system theme (Catppuccin Mocha) like GTK and Qt apps. I am not aware of a way to force a Fyne app to use different theme colors and, looking at the recent light theme pull request, it seems the colors need to be hardcoded. If that is the case, I would love to see this be configurable within the settings (or even as an editable config file) so I can make Supersonic fit in with my other programs.

[dweymouth]

This was something I was planning on adding eventually, so I'll see if I can work it into the next release! I think building a settings UI to edit the themes is too complicated and (for now at least) low-priority, so I was planning a config file format (probably TOML-based since it's nicely user-editable and the internal config file already uses TOML). Probably look something like

[SupersonicTheme]
Name = "Catppuccin"
Version = "1.0"
SupportsDark = true
SupportsLight = true

[DarkColors]
Foreground = "#ffffff"
Background = "#ffffff"
PageBackground = "#ffffff"
# etc

[LightColors]
# etc

[dweymouth]

One thing to note though is that the app currently uses several PNG-based icons (all the navigation buttons), and those can't be themed, and there are Fyne bugs currently preventing me from moving to all themeable SVG icons, so for now, the only supported icon colors would be black and white, as they currently are in the light and dark themes.

[TheSunCat]

Great news! I think this is fine staying as a config-file-only option for now given that an app restart would probably be required anyways, so editing the colors within the settings GUI would not have many benefits versus just typing in the colors from a predetermined palette. The TOML format looks good to me, and would allow for easy sharing of themes. Would each theme have its own separate file?

I don't think the icon colors would be a big issue for now, as long as they provide enough contrast (which can be done by having the theme specify whether it is dark or light and using the corresponding icons). Of course it would be nice to have them match the foreground color, but this is a great start already :)

[bbsixzz]

I would like something in-between light and dark as a default theme option, the contrast is currently a bit much on the eyes with simple black/white options.

Suggestion:

[dweymouth]

The default theme, and any builtin themes, will have to support both a dark and a light mode, for the auto-switching according to the OS preference to work properly. However I will allow custom themes to support only one palette if desired, and disabling auto-switching mode in the case that such a custom theme is loaded.

I can add other builtin themes, as part of the work for custom theme support. Potentially a Solarized builtin theme. Even though Solarized is usually for text editing/coding, I think the palette could work well in Supersonic too.

[dweymouth]

The Fyne theming works by allowing you to supply custom color values for a whole list of theme color names, which describe which GUI elements the color is applied to. The full list of color names is here (everything that starts ColorName...), and I've added my own ColorNamePageBackground to the Supersonic theme.

I was thinking of just exposing all of the Fyne ColorNameXYZ values (plus PageBackground) to be customized in a Supersonic theme file, and if a theme left any of them out it would fallback to the default one for light or dark, appropriately. Does this make sense @TheSunCat for writing custom themes? Is it too complicated - should I come up with my own more restricted set of color names that can be customized and map one Supersonic theme color to two or more Fyne colors in some cases?

[TheSunCat]

This sounds great! I don't think it is too complicated as the Fyne color names are already quite descriptive. It would be nice to have a reference somehow to see where each color is used (maybe an example theme could be provided with comments explaining the main elements affected by each color?). As for themes only supporting one palette, why not switch between the default palette and the theme's (depending on whether it defines itself as dark or light)? I don't personally use the switching feature, but I feel it may be annoying to have to forego that feature if you use a theme like Dracula which does not provide a light version.

[foldfree]

Hi, I spend some time on making a theme for supersonic, It is based on Flexoki - it's like Solarized by with more contrast, which works better with GUI elements in my opinion. Feel free to add it to the community themes :)

.config/supersonic/themes/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"