Skip to content

Instantly share code, notes, and snippets.

@uSkizzik

uSkizzik/tutorial.md

Created February 2, 2023 10:22
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save uSkizzik/33508667f7a260195fc5ba42d4f168d9 to your computer and use it in GitHub Desktop.
Save uSkizzik/33508667f7a260195fc5ba42d4f168d9 to your computer and use it in GitHub Desktop.
Download ZIP
Creating Themes for Skizzium Launcher
Raw
tutorial.md

Creating Themes for Skizzium Launcher

In v3.0.0-beta.2, the Skizzium Launcher introduced support for user-created themes which customize the look and feel of the launcher trough CSS. To create a theme for the launcher, you'd need to have knowledge of CSS, obviously. So, unless you know what you're doing, please turn around and check out other people's themes instead.

The Theme File

The Launcher loads themes from %appdata%/Skizzium Launcher/themes. The files need to have the .theme.css extension to be loaded, otherwise they're ignored.

The theme files are normal CSS files that are loaded into the launcher. They can have any CSS, the only requirement is that they contain a header in the first lines that follows this format:

/**
* @displayName <Theme Name>
* @version <Theme Version>
* @author <Author>
* @description <Theme Description>
* @source <Source Code URL>
* @donate <Donations URL>
* @website <Theme Website>
*/

Only displayName, version and author are required. The order of the variables doesn't matter and there can be empty lines.

Creating Themes

  1. Enable Chrome Dev Tools in the launcher The first step to creating themes is enabling dev tools so you can see the DOM tree and the existing styles. To do this, simply go to User Data (%appdata%/Skizzium Launcher/Data), open settings.json and add dev-tools: true. Upon restarting your launcher, you'd be able to open the dev tools using Ctrl + Shift + I
  2. Create your theme file Now you need to create your theme file. Go to the themes folder (%appdata%/Skizzium Launcher/themes) and create a new empty file with the extension .theme.css (e.g. mytheme.theme.css). Now add the header from above and fill out the applicable fields. Any fields that you want to skip, simply delete. When you're done with this, go back in the launcher and enable your theme.
  3. Create your theme Now that you're all set up, you can use the dev tools and CSS to create your theme. The launcher will automatically refresh the theme when you make any changes to the file. You can also use preprocessors such as SASS or PostCSS, but keep in mind the launcher loads only CSS themes, so you'll need to process those files into CSS.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment