Steam Material theme

[SoupcanUBG]

If anybody uses Millennium

basically theres a theme called Material Theme and it has a matugen mode i created a caelestia template that works with this and creates a correct css file, this is the steam template:

:root {
--theme-color: "Matugen";
--hue-rotate: 220deg;


--md-sys-color-background: {{background.rgb}};

--md-sys-color-blue: {{blue.rgb}};
--md-sys-color-blue-container: {{kvisited.rgb}};
--md-sys-color-blue-source: {{blue.rgb}};
--md-sys-color-blue-value: {{blue.rgb}};

--md-sys-color-cyan: {{lavender.rgb}};
--md-sys-color-cyan-container: {{onPrimary.rgb}};
--md-sys-color-cyan-source: {{lavender.rgb}};
--md-sys-color-cyan-value: {{lavender.rgb}};

--md-sys-color-error: {{error.rgb}};
--md-sys-color-error-container: {{errorContainer.rgb}};

--md-sys-color-green: {{success.rgb}};
--md-sys-color-green-container: {{successContainer.rgb}};
--md-sys-color-green-source: {{success.rgb}};
--md-sys-color-green-value: {{success.rgb}};

--md-sys-color-inverse-on-surface: {{outlineVariant.rgb}};
--md-sys-color-inverse-primary: {{term9.rgb}};
--md-sys-color-inverse-surface: {{inverseSurface.rgb}};

--md-sys-color-magenta: {{rosewater.rgb}};
--md-sys-color-magenta-container: {{flamingo.rgb}};
--md-sys-color-magenta-source: {{rosewater.rgb}};
--md-sys-color-magenta-value: {{rosewater.rgb}};

--md-sys-color-on-background: {{text.rgb}};

--md-sys-color-on-blue: {{kvisited.rgb}};
--md-sys-color-on-blue-container: {{kpositiveSelection.rgb}};

--md-sys-color-on-cyan: {{kpositive.rgb}};
--md-sys-color-on-cyan-container: {{kvisited.rgb}};

--md-sys-color-on-error: {{onError.rgb}};
--md-sys-color-on-error-container: {{onErrorContainer.rgb}};

--md-sys-color-on-green: {{onSuccess.rgb}};
--md-sys-color-on-green-container: {{onSuccessContainer.rgb}};

--md-sys-color-on-magenta: {{onPrimary.rgb}};
--md-sys-color-on-magenta-container: {{onPrimary.rgb}};

--md-sys-color-on-primary: {{onPrimary.rgb}};
--md-sys-color-on-primary-container: {{onPrimaryContainer.rgb}};

--md-sys-color-on-primary-fixed: {{onPrimaryFixed.rgb}};
--md-sys-color-on-primary-fixed-variant: {{onPrimaryFixedVariant.rgb}};

--md-sys-color-on-red: {{onError.rgb}};
--md-sys-color-on-red-container: {{onErrorContainer.rgb}};

--md-sys-color-on-secondary: {{onSecondary.rgb}};
--md-sys-color-on-secondary-container: {{onSecondaryContainer.rgb}};

--md-sys-color-on-secondary-fixed: {{onSecondaryFixed.rgb}};
--md-sys-color-on-secondary-fixed-variant: {{onSecondaryFixedVariant.rgb}};

--md-sys-color-on-surface: {{onSurface.rgb}};
--md-sys-color-on-surface-variant: {{onSurfaceVariant.rgb}};

--md-sys-color-on-tertiary: {{onTertiary.rgb}};
--md-sys-color-on-tertiary-container: {{onTertiaryContainer.rgb}};

--md-sys-color-on-tertiary-fixed: {{onTertiaryFixed.rgb}};
--md-sys-color-on-tertiary-fixed-variant: {{onTertiaryFixedVariant.rgb}};

--md-sys-color-on-white: {{text.rgb}};
--md-sys-color-on-white-container: {{text.rgb}};

--md-sys-color-on-yellow: {{onPrimary.rgb}};
--md-sys-color-on-yellow-container: {{onSuccessContainer.rgb}};

--md-sys-color-outline: {{outline.rgb}};
--md-sys-color-outline-variant: {{outlineVariant.rgb}};

--md-sys-color-primary: {{primary.rgb}};
--md-sys-color-primary-container: {{primaryContainer.rgb}};
--md-sys-color-primary-fixed: {{primaryFixed.rgb}};
--md-sys-color-primary-fixed-dim: {{primaryFixedDim.rgb}};

--md-sys-color-red: {{red.rgb}};
--md-sys-color-red-container: {{errorContainer.rgb}};
--md-sys-color-red-source: {{red.rgb}};
--md-sys-color-red-value: {{red.rgb}};

--md-sys-color-scrim: {{scrim.rgb}};

--md-sys-color-secondary: {{secondary.rgb}};
--md-sys-color-secondary-container: {{secondaryContainer.rgb}};
--md-sys-color-secondary-fixed: {{secondaryFixed.rgb}};
--md-sys-color-secondary-fixed-dim: {{secondaryFixedDim.rgb}};

--md-sys-color-shadow: {{shadow.rgb}};

--md-sys-color-source-color: {{blue.rgb}};

--md-sys-color-surface: {{surface.rgb}};
--md-sys-color-surface-bright: {{surfaceBright.rgb}};

--md-sys-color-surface-container: {{surfaceContainer.rgb}};
--md-sys-color-surface-container-high: {{surfaceContainerHigh.rgb}};
--md-sys-color-surface-container-highest: {{surfaceContainerHighest.rgb}};
--md-sys-color-surface-container-low: {{surfaceContainerLow.rgb}};
--md-sys-color-surface-container-lowest: {{surfaceContainerLowest.rgb}};

--md-sys-color-surface-dim: {{surfaceDim.rgb}};

--md-sys-color-surface-tint: {{surfaceTint.rgb}};

--md-sys-color-surface-variant: {{surfaceVariant.rgb}};

--md-sys-color-tertiary: {{tertiary.rgb}};
--md-sys-color-tertiary-container: {{tertiaryContainer.rgb}};
--md-sys-color-tertiary-fixed: {{tertiaryFixed.rgb}};
--md-sys-color-tertiary-fixed-dim: {{tertiaryFixedDim.rgb}};

--md-sys-color-white: {{surfaceContainerLowest.rgb}};
--md-sys-color-white-container: {{surfaceContainerLow.rgb}};
--md-sys-color-white-source: {{surfaceContainerLowest.rgb}};
--md-sys-color-white-value: {{surfaceContainerLowest.rgb}};

--md-sys-color-yellow: {{yellow.rgb}};
--md-sys-color-yellow-container: {{successContainer.rgb}};
--md-sys-color-yellow-source: {{yellow.rgb}};
--md-sys-color-yellow-value: {{yellow.rgb}};


}

[evertiro]

I really want to like this (and my issue with it isn't your fault), but the Material theme has some areas that need work. Most notably, the corners on dropdowns are rough at best, and menus that overlap sidebars are difficult to visually differentiate. Probably not too hard to fix, but it's worth mentioning.

[ZeNx98]

does this use matugen? Cuz I cant find .config/matugen at all , or is it something else

[soramanew]

Caelestia does not use matugen. It uses its own colour generator which is part of the cli. You can use custom templates similar to matugen, see the cli readme for more info

[SoupcanUBG]

does this use matugen? Cuz I cant find .config/matugen at all , or is it something else

does not use matugen