Custom Themes - Heroic-Games-Launcher/HeroicGamesLauncher GitHub Wiki
This page is meant for users wanting to create custom themes for Heroic Games Launcher.
How To
To create a theme, you only need to place one .css
file (and only one for each theme) with CSS definitions in a specific location defined by the user in the Accessibility settings.
Once a custom theme is selected, Heroic injects the content of the .css
file in the body of the app. Any CSS rule applies for themes too (specificity, valid properties/values, etc).
Themes Location
Heroic does not enforce a specific locations for custom themes. Users must specify a folder to look for .css
files in the Accessibilty configuration. Once the path is set, Heroic will parse the content of that folder and include any .css
file in the Select Theme
drop down.
Naming Conventions
File name
In order for the theme to work properly, there are some considerations to follow:
- Only
.css
files are used as themes - Files can include any type of character, keep in mind complex file names may create issues with the CSS rules (we recommend sticking to simple CSS-class-friendly file names)
CSS body class
Heroic will set a CSS class in the body element based on the theme's file name:
- The
.css
extension is removed form the name - Any white space and dot (
.
character) is replaced with a_
- Uncommon characters are used as-is and not removed (this may affect your CSS definitions)
Examples:
my-theme.css
will set the classmy-theme
My Theme.css
will set the classMy_Theme
Crazy?Theme?.css
will set the classCrazy?Theme?
If using uncommon characters like ?
in the file name, to properly match them as CSS selectors you have to escape them. From the previous example, the CSS selector will be .Crazy\?Theme\?
.
Reserved Names
Heroic includes this CSS classes for the built-in themes: default
, classic
, old-school
, dracula
, marine
, marine-classic
, zombie
, and zombie-classic
.
We recommend NOT using them as file names unless you want to extend the built-in style, since the theme's styles are always included.
General Tips When Creating Themes
- You can turn on devtools in Heroic by clicking the tray icon > Debug, you can use that to inspect the selectors you need
- You can check the current themes files for idea on some common selectors and CSS variables for theming https://github.com/Heroic-Games-Launcher/HeroicGamesLauncher/blob/main/src/frontend/themes.scss
- You can check the main CSS files for available CSS variables https://github.com/Heroic-Games-Launcher/HeroicGamesLauncher/blob/main/src/frontend/index.scss#L1
- When editing a theme, you must unselect > reselect it in for Heroic to reload it
- CSS supports selectors nesting as a native feature, but it's different than SASS/SCSS nesting, be sure to use the correct syntax if using nesting
General Tips When Sharing Themes
- You can submit and find community themes at https://github.com/Heroic-Games-Launcher/heroic-themes
- Don't overuse animations/transitions (some animations can impact performance a lot)
- Use the body class name as the base selector for all rules
- If linking to external resources, make sure they are optimized in size and quality