This is my own fork of this to get a git-tracked theme working. it's I'm stupid, but you'll have to live with it.

• Cider 2.3 or higher
• NodeJS 18 or higher

• Clone this repo
• Run npm install
• Create a project with npm run create-new ./projects/my-theme
• Run npm run serve ./projects/my-theme
• Open Cider 2 and go to Settings > Experimental > Theme Manager
• In the Main Menu, click Theme Manager and then click the SDK tab
• The SDK tab should say "SDK is connected!"
• Under the Themes tab you should see your theme listed, from here it can temporarily be enabled or disabled as well as installed permanently.

Be sure to read the Quirks and Features section before getting started.

• Run npm run build ./projects/my-theme
• The theme will be built into ./projects/my-theme/dist/theme.cider-theme
• This file can installed by others by clicking Install from File in the Theme Manager

• Author
  • Your name
• Identifier
  • A unique identifier for your theme
• Name
  • The name of your theme
• Styles*
  • An array of stylesheets to be loaded into the theme
  • Currently they will all load at the same time, being able to toggle them individually like Cider 1.x is planned in the future

• In Cider itself, you may notice some HTML elements have an attribute called [sfc-name="NameOfSFC"] this is added to easily target specific Vue Single File Components. When building your theme, we highly recommend you use these attributes to target specific elements. This is because the HTML structure of Cider is subject to change and we want to make sure your theme doesn't break when we make changes as well as when Vite decides to generate different data- tags.
  • Targeting [sfc-name] also has the benefit of not accidentally targeting multiple elements with the same class name that have different purposes and appearances.

[sfc-name='NavigationButton'] {
    // Here we are modifying the .nav-icon class inside of the NavigationButton SFC, doing it this way ensures that other elements with the .nav-icon class are not affected by mistake.
    .nav-icon {
        color: red;
    }
}

• Every CSS declaration is rewritten to use the !important flag. This is to ensure that the theme overrides the default styles.
• Assets are inlined into the theme file and use paths are relative to the project folder itself. Example url('picture.png')
  • In compiled files these assets get automatically inlined
  • In dev mode the assets are served from the project folder

body.body--light {
    // This will only apply to the light color scheme
}

body.body--dark {
    // This will only apply to the dark color scheme
}

#app-viewport[top-player='true | false'] // is the player on the top?
#app-viewport[left-drawer='true | false'] // left sidebar opened
#app-viewport[right-drawer='true | false'] // right sidebar opened
#app-viewport[right-drawer-type='inline | overlay'] // right sidebar type
#app-viewport[data-framework='electron | sabiiro'] // Client Type

body[window-blurred='true | false'] // is the window blurred or focused?
html[dark-acrylic] // is the acrylic effect enabled?

ThemeKit Wiki ⚠️ Work in progress

If there are any other CSS selectors, variables, or attributes to expose you would like to suggest for ThemeKit, please let us know by creating an issue on this repository.