Skip to content

Custom CSS

Foldex edited this page Jun 7, 2024 · 8 revisions

This allows you to extend the theme with your own Custom CSS.

Important Notes

⚠️ Potential Breakage ⚠️

  • It's entirely possible to break the UI by using this feature. Use with care.
  • Keep in mind that the upstream variables have no guarantees, they may change in the future.
  • Make sure to disable Custom CSS when troubleshooting issues.

Steam Website Pages

  • The New UI can no longer inject CSS into pages like the Store/Community/Profiles/Etc. The Library/Chat/Overlay are fair game however.

Overriding Theme Colors

A number of color theme presets are provided already, but you may still wish to override specific colors.

Here is an example of overriding accent colors:

:root
{
	--adw-accent-bg-rgb: 53, 132, 228;
	--adw-accent-fg-rgb: 255, 255, 255;
	--adw-accent-rgb: 120, 174, 237;
}

Full List of CSS Variables

CSS Variables

Advanced Editing

To do anything more advanced than editing the predefined variables, you are going to need to find out CSS Classes that Steam Uses for its UI.

See Inspecting Steam Classes