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.
- 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 theSDK
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
Command | Description | Example |
---|---|---|
npm run create-new {path-to-project} |
Create a new theme project | npm run create-new ./projects/my-theme |
npm run serve {path-to-project} |
Host an SDK instance for the Cider Theme Manager to connect to | npm run serve ./projects/my-theme |
npm run build {path-to-project} |
Builds a sharable theme.cider-theme file in {path-to-project}/dist |
npm run build ./projects/my-theme |
- 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 differentdata-
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.
- Targeting
[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
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.