Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/realfx-code/cider2-rose-pine
Cider 2.x Rose-Pine theme!
https://github.com/realfx-code/cider2-rose-pine
Last synced: about 1 month ago
JSON representation
Cider 2.x Rose-Pine theme!
- Host: GitHub
- URL: https://github.com/realfx-code/cider2-rose-pine
- Owner: RealFX-Code
- License: gpl-3.0
- Created: 2024-04-30T22:33:30.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2024-04-30T22:35:11.000Z (8 months ago)
- Last Synced: 2024-04-30T23:39:45.289Z (8 months ago)
- Language: JavaScript
- Size: 545 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# Cider 2 ThemeKit 🎨
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.
## 🌐 Pre-requisites
- [Cider 2.3 or higher](https://cidercollective.itch.io/cider)
- [NodeJS 18 or higher](https://nodejs.org)
## ⚡ Quick Start
- 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.
### 📮 Sharing your theme (temp)
- 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
## 🖥️ Available Commands
| 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` |
## 📄 theme.json Explained
- 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
## ⚠️ Quirks and Features (Important)
- 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.
### Example of targeting an SFC
```scss
[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
### Targeting the Light or Dark color schemes example
```scss
body.body--light {
// This will only apply to the light color scheme
}
body.body--dark {
// This will only apply to the dark color scheme
}
```
### Other attributes
```scss
#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?
```
## 📚 Resources
[ThemeKit Wiki](https://github.com/ciderapp/cider-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.