Skip to content

Backends

Jump to bottom
guglicap edited this page May 18, 2018 · 6 revisions

A "backend" in wal-discord is a scss file which is imported from master.scss, the main file from which the final css is generated.

A backend must define 5 colors:

  • bg - background color of the chat
  • bgDarker - background color of the sidebars and the titlebar
  • colorUrgent - used for notifying of things like new messages
  • colorAccent - used on elements to encourage user interaction, is the background of the input bar, the search bar, the background when hovering channels, etc.
  • fg - used for text

The reason for having different backends is that different pywal backends generate different palettes.

For instance, when using the default pywal backend, color1 is usually different from the rest of the palette.
If you have, say, a mostly blue image, color1 could be green and the rest of the colors will be different shades of blue.
The pywal haishoku backend, on the other hand, would generate 6 different shades of blue, ranging color1 - color6.
color7 is almost always white.

Custom backends

wal-discord accepts anything as a backend name as long as it can find a $HOME/.config/wal-discord/backends/$name.scss file.
This allows for the creation of custom backends.

Since the default backends are expecting the palette to be composed of different shades of the same color, some pywal themes don't work very well as they are composed of different colors.

For instance, here is Gruvbox with the default wal backend: gruvbox_wal

It's not too bad, but I think the red doesn't really fit the background color. I copied backends/wal.scss to backends/gruvbox.scss and changed $colorAccent: $color1 to $colorAccent: $color2

Here is the result, which, in my opinion, looks better: gruvbox_custom

Of course, this is personal taste, but you can change it however you want.

It is also worth noting that you are not limited to setting colors in your backend file.
For example, you can define one to change the font by setting .theme-dark { font-family: "Your font"; }.
This way, if you like the colors the default backends are generating, but want to do modifications such as the above, you can define a custom backend, @import "backend.scss, and append all your modificatons.

Notice that, when importing other files, the path must be relative to $HOME/.config/wal-discord.

Pull requests

Pull requests adding custom backends for pywal themes are welcome :)

Clone this wiki locally