Skip to content

Home

Jump to bottom
ini edited this page Sep 28, 2023 · 12 revisions

Usage

Modes

Light Dark Amoled

Palettes

Default Triadic Adjacent

Json flag

Allows for dumping the schemes similarly to --show-colors, but in a machine-readable format. Can dump hex, rgba, hsl, etc.

Result 

{
  "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"
    }
  }
}
matugen --json <JSON> <other-arguments>

Help

matugen -h
matugen --help

Show colors

matugen --show-colors <other-arguments>

Verbose mode

matugen -v <other-arguments>

Generate from an image

# Dark mode
matugen image /path/to/wallpaper/ -m "dark"
# Light mode
matugen image /path/to/wallpaper/ -m "light"
# AMOLED/"pure dark" mode
matugen image /path/to/wallpaper/ -m "amoled"

Example:

matugen image ~/wall/snow.png -l

Generate from a color

# Dark mode
matugen color hsl <hsl color> -m "dark"
# Light mode
matugen color hex <hex color> -m "light"
# AMOLED/"pure dark" mode
matugen color rgb <rgb color> -m "amoled"

Example:

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"

Creating templates

The basic syntax for using colors is prefix + {color} (The default prefix is @, so the usage would be @{color}).

Keywords

If you want a specific scheme, you can use @{primary.light.hex}. All available modes/schemes can be found here.

@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:

@import url("@{source_color}"); /* Result: #ffb783*/

You can also get the image (if it was provided) by using:

@import url("@{image}"); /* Result: /home/ini/Downloads/wallpaper.jpg */

Note If no image was provided, Matugen will just skip over the image keyword

Example of all the color keywords:

/*colors.css*/
@define-color primary @{primary};
@define-color on_primary @{on_primary};
@define-color primary_container @{primary_container};
@define-color on_primary_container @{on_primary_container};
@define-color secondary @{secondary};
@define-color on_secondary @{on_secondary};
@define-color secondary_container @{secondary_container};
@define-color on_secondary_container @{on_secondary_container};
@define-color tertiary @{tertiary};
@define-color on_tertiary @{on_tertiary};
@define-color tertiary_container @{tertiary_container};
@define-color on_tertiary_container @{on_tertiary_container};
@define-color error @{error};
@define-color on_error @{on_error};
@define-color error_container @{error_container};
@define-color on_error_container @{on_error_container};
@define-color background @{background};
@define-color on_background @{on_background};
@define-color surface @{surface};
@define-color on_surface @{on_surface};
@define-color surface_variant @{surface_variant};
@define-color on_surface_variant @{on_surface_variant};
@define-color outline @{outline};
@define-color shadow @{shadow};
@define-color scrim @{scrim};
@define-color inverse_surface @{inverse_surface};
@define-color inverse_on_surface @{inverse_on_surface};
@define-color inverse_primary @{inverse_primary};

@define-color source_color @{source_color};
@define-color color_accent_primary @{color_accent_primary};
@define-color color_accent_primary_variant @{color_accent_primary_variant};
@define-color color_accent_secondary @{color_accent_secondary};
@define-color color_accent_secondary_variant @{color_accent_secondary_variant};
@define-color color_accent_tertiary @{color_accent_tertiary};
@define-color color_accent_tertiary_variant @{color_accent_tertiary_variant};
@define-color text_color_primary @{text_color_primary};
@define-color text_color_secondary @{text_color_secondary};
@define-color text_color_tertiary @{text_color_tertiary};
@define-color text_color_primary_inverse @{text_color_primary_inverse};
@define-color text_color_secondary_inverse @{text_color_secondary_inverse};
@define-color text_color_tertiary_inverse @{text_color_tertiary_inverse};
@define-color color_background @{color_background};
@define-color color_background_floating @{color_background_floating};
@define-color color_surface @{color_surface};
@define-color color_surface_variant @{color_surface_variant};
@define-color color_surface_highlight @{color_surface_highlight};
@define-color surface_header @{surface_header};
@define-color under_surface @{under_surface};
@define-color off_state @{off_state};
@define-color accent_surface @{accent_surface};
@define-color text_primary_on_accent @{text_primary_on_accent};
@define-color text_secondary_on_accent @{text_secondary_on_accent};
@define-color volume_background @{volume_background};
@define-color scrim_android @{scrim_android};

Configuration

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

Configuration items

Name Type Default Description
reload_apps bool false Whether to reload apps.
set_wallpaper bool false Whether to set the wallpaper (if true, requires wallpaper_tool to be set).
wallpaper_tool String None The wallpaper tool to use (Swwww, Swaybg, Feh, Nitrogen).
prefix String "@" The prefix to use (for example: @{primary})
reload_gtk_theme bool false Whether to reload the gtk theme. REMOVED, USE gtk_theme in config.reload_apps_list.
run_after Vec [] The commands to run after the templates have been generated.
swww_options <Vec> [] The options to use for Swwww
feh_options <Vec> [] The options to use for Feh

Apps

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.

Example

# config_directory/config.toml
[config]
reload_apps = true
set_wallpaper = true
wallpaper_tool = 'Swww'
prefix = '@'
swww_options = [
    "--transition-type",
    "center",
]
run_after = [
    [ "echo", "'hello'" ],
    [ "echo", "'hello again'" ],
]

[config.reload_apps_list]
waybar = true
kitty = true
gtk_theme = true
dunst = true

Adding templates

Name Type Default Description
mode Option<Modes> Mode provided in args Which scheme to use for the template.
input_path PathBuf None Path to the template file.
output_path PathBuf None Path to export the template to.

Modes

Note The mode key will override the mode specified in the arguments, only for that template.

For all available modes, look at the usage.

Example

# config_directory/config.toml

[templates.test] # First way of adding template
input_path = '~/.config/example/template.css'
output_path = '~/.config/example'
mode = "Light" # First letter MUST be upper-case

[templates] # Another way
test2 = { input_path = '~/.config/example/template2.css', output_path = '~/.config/example2' }
Clone this wiki locally