Matugen is a cross-platform tool that generates a colorscheme either from an image or a color, and exports it to a file from a template. It can also set the wallpaper if one was provided.
Material Design 3 offers a new color system that allows for more flexible and dynamic use of color. The new system includes a wider range of colors, as well as a range of tints and shades that can be used to create subtle variations in color.
Note Want a feature that is not listed above? Simply open an issue.
shell
cargo install matugen
Add matugen to your flake inputs:
nix
inputs = {
matugen = {
url = "github:/InioX/Matugen";
# If you need a specific version:
ref = "refs/tags/matugen-v0.10.0"
};
# ...
};
Then you can add it to your packages:
nix
let
system = "x86_64-linux";
in {
environment.systemPackages = with pkgs; [
# ...
inputs.matugen.packages.${system}.default
];
}
shell
pkgin install matugen
or, if you prefer to build it from source
shell
cd /usr/pkgsrc/graphics/matugen
make install
Light | Dark | Amoled |
![]() |
![]() |
![]() |
Default | Triadic | Adjacent |
![]() |
![]() |
![]() |
Allows for dumping the schemes similarly to --show-colors
, but in a
machine-readable format. Can dump hex, rgba, hsl, etc.
Result
```json { "colors": { "amoled": { "background": "#000000", "error": "#ffb4ab", "error_container": "#93000a", "inverse_on_surface": "#323032", "inverse_primary": "#72518b", "inverse_surface": "#e7e1e4", "on_background": "#e7e1e4", "on_error": "#690005", "on_error_container": "#ffb4ab", "on_primary": "#412259", "on_primary_container": "#f2daff", "on_secondary": "#362d3b", "on_secondary_container": "#ecdef1", "on_surface": "#e7e1e4", "on_surface_variant": "#ccc4cc", "on_tertiary": "#47282a", "on_tertiary_container": "#ffdadb", "outline": "#958f96", "outline_variant": "#4a454c", "primary": "#dfb8fa", "primary_container": "#593972", "scrim": "#000000", "secondary": "#cfc2d4", "secondary_container": "#4d4352", "shadow": "#000000", "source_color": "#bb96d6", "surface": "#000000", "surface_variant": "#131015", "tertiary": "#ebbbbd", "tertiary_container": "#603d40" }, "dark": { "background": "#1d1b1d", "error": "#ffb4ab", "error_container": "#93000a", "inverse_on_surface": "#323032", "inverse_primary": "#72518b", "inverse_surface": "#e7e1e4", "on_background": "#e7e1e4", "on_error": "#690005", "on_error_container": "#ffb4ab", "on_primary": "#412259", "on_primary_container": "#f2daff", "on_secondary": "#362d3b", "on_secondary_container": "#ecdef1", "on_surface": "#e7e1e4", "on_surface_variant": "#ccc4cc", "on_tertiary": "#47282a", "on_tertiary_container": "#ffdadb", "outline": "#958f96", "outline_variant": "#4a454c", "primary": "#dfb8fa", "primary_container": "#593972", "scrim": "#000000", "secondary": "#cfc2d4", "secondary_container": "#4d4352", "shadow": "#000000", "source_color": "#bb96d6", "surface": "#1d1b1d", "surface_variant": "#4a454c", "tertiary": "#ebbbbd", "tertiary_container": "#603d40" }, "light": { "background": "#fffbff", "error": "#ba1a1a", "error_container": "#ffdad6", "inverse_on_surface": "#f5eff2", "inverse_primary": "#dfb8fa", "inverse_surface": "#323032", "on_background": "#1d1b1d", "on_error": "#ffffff", "on_error_container": "#410002", "on_primary": "#ffffff", "on_primary_container": "#2a0a43", "on_secondary": "#ffffff", "on_secondary_container": "#201926", "on_surface": "#1d1b1d", "on_surface_variant": "#4a454c", "on_tertiary": "#ffffff", "on_tertiary_container": "#2e1316", "outline": "#7b757c", "outline_variant": "#ccc4cc", "primary": "#72518b", "primary_container": "#f2daff", "scrim": "#000000", "secondary": "#655b6a", "secondary_container": "#ecdef1", "shadow": "#000000", "source_color": "#bb96d6", "surface": "#fffbff", "surface_variant": "#e9e0e8", "tertiary": "#7a5557", "tertiary_container": "#ffdadb" } }, "colors_android": { "amoled": { "accent_surface": "#fbecff", "color_accent_primary": "#f2daff", "color_accent_primary_variant": "#c29ddd", "color_accent_secondary": "#ecdef1", "color_accent_secondary_variant": "#b4a7b9", "color_accent_tertiary": "#ffdadb", "color_accent_tertiary_variant": "#cda0a3", "color_background": "#000000", "color_background_floating": "#000000", "color_surface": "#121013", "color_surface_highlight": "#1d1b1d", "color_surface_variant": "#272528", "off_state": "#323032", "scrim_android": "#cac5c8", "surface_header": "#1d1b1d", "text_color_primary": "#f5eff2", "text_color_primary_inverse": "#1d1b1d", "text_color_secondary": "#ccc4cc", "text_color_secondary_inverse": "#494649", "text_color_tertiary": "#958f96", "text_color_tertiary_inverse": "#7a7679", "text_primary_on_accent": "#1d1b1d", "text_secondary_on_accent": "#4a454c", "under_surface": "#000000", "volume_background": "#000000" }, "dark": { "accent_surface": "#fbecff", "color_accent_primary": "#f2daff", "color_accent_primary_variant": "#c29ddd", "color_accent_secondary": "#ecdef1", "color_accent_secondary_variant": "#b4a7b9", "color_accent_tertiary": "#ffdadb", "color_accent_tertiary_variant": "#cda0a3", "color_background": "#1d1b1d", "color_background_floating": "#1d1b1d", "color_surface": "#323032", "color_surface_highlight": "#555154", "color_surface_variant": "#494649", "off_state": "#323032", "scrim_android": "#cac5c8", "surface_header": "#494649", "text_color_primary": "#f5eff2", "text_color_primary_inverse": "#1d1b1d", "text_color_secondary": "#ccc4cc", "text_color_secondary_inverse": "#494649", "text_color_tertiary": "#958f96", "text_color_tertiary_inverse": "#7a7679", "text_primary_on_accent": "#1d1b1d", "text_secondary_on_accent": "#4a454c", "under_surface": "#000000", "volume_background": "#3d3a3d" }, "light": { "accent_surface": "#fbecff", "color_accent_primary": "#f2daff", "color_accent_primary_variant": "#72518b", "color_accent_secondary": "#ecdef1", "color_accent_secondary_variant": "#655b6a", "color_accent_tertiary": "#ffdadb", "color_accent_tertiary_variant": "#7a5557", "color_background": "#f5eff2", "color_background_floating": "#fef8fb", "color_surface": "#fef8fb", "color_surface_highlight": "#ffffff", "color_surface_variant": "#e7e1e4", "off_state": "#323032", "scrim_android": "#cac5c8", "surface_header": "#e7e1e4", "text_color_primary": "#1d1b1d", "text_color_primary_inverse": "#f5eff2", "text_color_secondary": "#4a454c", "text_color_secondary_inverse": "#cac5c8", "text_color_tertiary": "#7b757c", "text_color_tertiary_inverse": "#948f93", "text_primary_on_accent": "#1d1b1d", "text_secondary_on_accent": "#4a454c", "under_surface": "#000000", "volume_background": "#3d3a3d" } } } ```
sh
matugen --json <JSON> <other-arguments>
sh
matugen -h
matugen --help
sh
matugen --show-colors <other-arguments>
sh
matugen -v <other-arguments>
```sh
matugen image /path/to/wallpaper/ -m "dark"
matugen image /path/to/wallpaper/ -m "light"
matugen image /path/to/wallpaper/ -m "amoled"
Example:
sh
matugen image ~/wall/snow.png -l
```
```sh
matugen color hsl
matugen color hex
matugen color rgb
Example:
sh
matugen color hex "#ffbf9b"
matugen color rgb "rgb(63, 106, 171)" -m "light"
matugen color hsl "hsl(216.34, 45.75%, 45.88%)" -m "amoled"
```
The basic syntax for using colors is prefix + {color}
(The default prefix is @
, so the usage would be @{color}
).
If you want a specific scheme, you can use @{primary.light.hex}
. All available modes/schemes can be found here.
```css @define-color primary @{primary}; /* Result: #ffb783 / @define-color primary @{primary.hex}; / Result: #ffb783 / @define-color primary @{primary.rgb}; / Result: rgb(255, 183, 131) / @define-color primary @{primary.rgba}; / Result: rgba(255, 183, 131, 255) / @define-color primary @{primary.strip}; / Result: ffb783 / @define-color primary @{primary.hsl}; / Result: hsl(25, 100%, 76%) / @define-color primary @{primary.hsla}; / Result: hsla(242.2, 49.4%, 67.45%, 1) */
@define-color primary @{background.light.hex}; /* Result: #fffbff / @define-color primary @{background.dark.hex}; / Result: #1e1b19 / @define-color primary @{background.amoled.hex}; / Result: #000000 */ ```
You can get the source color (color used for generating colorscheme) by using:
css
@import url("@{source_color}"); /* Result: #ffb783*/
You can also get the image (if it was provided) by using:
css
@import url("@{image}"); /* Result: /home/ini/Downloads/wallpaper.jpg */
Note If no image was provided, Matugen will just skip over the image keyword
```css /colors.css/ @define-color primary @{primary}; @define-color onprimary @{onprimary}; @define-color primarycontainer @{primarycontainer}; @define-color onprimarycontainer @{onprimarycontainer}; @define-color secondary @{secondary}; @define-color onsecondary @{onsecondary}; @define-color secondarycontainer @{secondarycontainer}; @define-color onsecondarycontainer @{onsecondarycontainer}; @define-color tertiary @{tertiary}; @define-color ontertiary @{ontertiary}; @define-color tertiarycontainer @{tertiarycontainer}; @define-color ontertiarycontainer @{ontertiarycontainer}; @define-color error @{error}; @define-color onerror @{onerror}; @define-color errorcontainer @{errorcontainer}; @define-color onerrorcontainer @{onerrorcontainer}; @define-color background @{background}; @define-color onbackground @{onbackground}; @define-color surface @{surface}; @define-color onsurface @{onsurface}; @define-color surfacevariant @{surfacevariant}; @define-color onsurfacevariant @{onsurfacevariant}; @define-color outline @{outline}; @define-color shadow @{shadow}; @define-color scrim @{scrim}; @define-color inversesurface @{inversesurface}; @define-color inverseonsurface @{inverseonsurface}; @define-color inverseprimary @{inverseprimary};
@define-color sourcecolor @{sourcecolor}; @define-color coloraccentprimary @{coloraccentprimary}; @define-color coloraccentprimaryvariant @{coloraccentprimaryvariant}; @define-color coloraccentsecondary @{coloraccentsecondary}; @define-color coloraccentsecondaryvariant @{coloraccentsecondaryvariant}; @define-color coloraccenttertiary @{coloraccenttertiary}; @define-color coloraccenttertiaryvariant @{coloraccenttertiaryvariant}; @define-color textcolorprimary @{textcolorprimary}; @define-color textcolorsecondary @{textcolorsecondary}; @define-color textcolortertiary @{textcolortertiary}; @define-color textcolorprimaryinverse @{textcolorprimaryinverse}; @define-color textcolorsecondaryinverse @{textcolorsecondaryinverse}; @define-color textcolortertiaryinverse @{textcolortertiaryinverse}; @define-color colorbackground @{colorbackground}; @define-color colorbackgroundfloating @{colorbackgroundfloating}; @define-color colorsurface @{colorsurface}; @define-color colorsurfacevariant @{colorsurfacevariant}; @define-color colorsurfacehighlight @{colorsurfacehighlight}; @define-color surfaceheader @{surfaceheader}; @define-color undersurface @{undersurface}; @define-color offstate @{offstate}; @define-color accentsurface @{accentsurface}; @define-color textprimaryonaccent @{textprimaryonaccent}; @define-color textsecondaryonaccent @{textsecondaryonaccent}; @define-color volumebackground @{volumebackground}; @define-color scrimandroid @{scrimandroid}; ```
Here is a list of different locations for the configuration file:
- Windows: C:\Users\user\AppData\Roaming\InioX\matugen\config\config.toml
- Linux: /home/user/.config/matugen/config.toml
- MacOS: /Users/user/Library/Application Support/com.InioX.matugen/config.toml
Note You can also use a custom configuration path by using the
-c
argument
| Name | Type | Default | Description |
|----------------------|---------------|-----------|-------------------------------------------------------------------------------------------------|
| reloadapps | bool | false | Whether to reload apps. |
| setwallpaper | bool | false | Whether to set the wallpaper (if true
, requires wallpaper_tool
to be set). |
| wallpapertool | String | None | The wallpaper tool to use (Swwww
, Swaybg
, Feh
, Nitrogen
). |
| prefix | String | "@" | The prefix to use (for example: @{primary}
) |
| ~~reloadgtktheme~~ | ~~bool~~ | ~~false~~ | ~~Whether to reload the gtk theme.~~ REMOVED, USE gtk_theme
in config.reload_apps_list
. |
| runafter | Vec
| Name | Type | Default | Description | |-----------|------|---------|----------------------------------| | kitty | bool | true | Whether to reload kitty. | | waybar | bool | true | Whether to reload waybar. | | dunst | bool | true | Whether to reload dunst. | | gtk_theme | bool | true | Whether to reload the GTK theme. |
```toml
[config] reloadapps = true setwallpaper = true wallpapertool = 'Swww' prefix = '@' swwwoptions = [ "--transition-type", "center", ] run_after = [ [ "echo", "'hello'" ], [ "echo", "'hello again'" ], ]
[config.reloadappslist] waybar = true kitty = true gtk_theme = true dunst = true ```
| Name | Type | Default | Description |
|-----------------|-----------------------|---------------------------|-----------------------------------------|
| mode | Option\
Note The
mode
key will override the mode specified in the arguments, only for that template.
For all available modes, look at the usage.
```toml
[templates.test] # First way of adding template inputpath = '~/.config/example/template.css' outputpath = '~/.config/example' mode = "Light" # First letter MUST be upper-case
[templates] # Another way test2 = { inputpath = '~/.config/example/template2.css', outputpath = '~/.config/example2' } ```