tinted-nwg-dock

This repo provides templates for using Base16 color schemes with:

• nwg-dock;
• nwg-dock-hyperland;
• nwg-dock, written in Rust;
• nwg-drawer, written in Rust.

a GTK3-based dock for Sway and Hyperland.

All files in themes directory generated by tinted-builder-rust.

Examples

base16-onedark

base16-google-light

Usage

For any type of installation, you are expected to use the CSS @import directive to import the color scheme that tinty generates by default into ~/.local/share/tinted-theming/tinty/ folder.

For example:

/* Color scheme */
@import "/home/blueingreen68/.local/share/tinted-theming/tinty/tinted-nwg-dock-themes-file.css";

window {
  border-width: 3px;
  border-style: solid;
  border-radius: 10px;
  transition: all 200ms ease, opacity 200ms ease;
}

#box {
  /* Define attributes of the box surrounding icons here */
  padding: 5px;
}

button,
image {
  background: none;
  border-style: none;
  box-shadow: none;
}

button {
  padding: 4px;
  margin: 0 4px;
  font-size: 12px;
}

button:hover {
  border-radius: 2px;
}

button:focus {
  box-shadow: 0 0 2px;
}

Note

transition property support only: nwg-dock, nwg-dock-drawer written in Rust.

Warning

For the Rust-based version nwg-dock, there is an issue with dynamic theme switching involving the CSS @import directive; see the issue.

To fix it, use a hook specified below.

Manual

You can find an example config in examples/style.css.

Place this file in the directory depending on what you are using:

App	Path
nwg-dock	$XDG_CONFIG_HOME/nwg-dock/
nwg-drawer	$XDG_CONFIG_HOME/nwg-drawer/

Tinty

1. Add the following to ~/.config/tinted-theming/tinty/config.toml:

[[items]]
name = "tinted-nwg-dock"
path = "https://github.com/tinted-theming/tinted-nwg-dock"
themes-dir = "themes"
supported-systems = ["base16"]
hook = "sed -i -e '2s/^@/#/' ~/.config/nwg-dock/style.css && sed -i -e '2s/^#/@/' ~/.config/nwg-dock/style.css"

2. Add @import directive to your ~/.config/nwg-dock/style.css with path to ~/.local/share/tinted-theming/tinty/tinted-nwg-dock-themes-file.css, as in the usage section.

3. tinty apply base16-google-light to change the theme to base16-google-light.

License

MIT