Notice
If you are the author of this plugin, you can claim this topic by clicking > at the bottom of this post. Select Something Else as a reason and leave a comment explaining you want to claim the topic. Include a link to your git profile or pull request showing ownership of the plugin.
 |
Summary | Theme and CSS script manager located in main menu bar top right. |
 |
Repository | https://github.com/stashapp/CommunityScripts/tree/main/plugins/themeSwitch |
 |
Source URL | https://stashapp.github.io/CommunityScripts/stable/index.yml |
 |
Install | How to install a plugin? |
Information about plugin
Adds a button that shows a menu, allowing you to change CSS Themes and apply various CSS snippets for Stash App. The CSS isn’t made by myself and in the CSS files authors where known are referenced.
Only the CSS of one theme can be applied at a time, and any amount of snippets can be applied.
Clicking on any radio/checkbox to apply the CSS, saves the CSS content of the Stylesheet in the browsers local storage, with an applied flag, eitehr true or false which allows the script upon page navigation and refresh to apply previously selected stylesheets
Under Change Order of Menu Bar, you can drag the elements to reorder the main menu and upon dropping it will generate the required CSS. It should work on touchscreens also, tested on Chrome IOS.
Other Requirements
Usage
- Copy repository into Stash plugins folder.
- Reload plugins from settings and enable
Credit
The CSS code used is provided by Stash Community Themes and Stash Community Custom CSS Snippets.
Adding your own CSS
To add your own CSS open the themeSwitchCSS.js file. CSS is defined in const variables. They are ordered in categories. You can make your own categories too. Just define a variable to hold your css and put the css inbetween backticks ``.
Then look for the variable themeSwitchCSS at the bottom of the file. If adding to an existing category to just add a new number at the end. Or if you are reordering the CSS or themes. Be sure to update the numbering and there is no duplicate numbers within a theme or some won’t render. It’s stuctured like but can be seen better within the file itself.
const themeSwitchCSS = {
Theme: {
1: {
displayName: "Default",
styles: null,
key: "themeSwitchPlugin-theme-default",
version: null,
},
2: {
displayName: "Black Hole",
styles: blackHole,
key: "themeSwitchPlugin-theme-blackHole",
version: "2.0",
}
YourCategoryHere: {
1: {
displayName: "Your CSS Name Here",
styles: Your-CSS-Variable-Name-Here,
key: "themeSwitchPlugin-YourCategoryHere-AnIDforYourCSS",
version: VersionNumberOrNull,
}
}
}
}