This repository is for user made themes for Super Productivity. The repository aims for easy theming from the CSS standpoint.

macOS oneliner:

wget https://raw.githubusercontent.com/johannesjo/super-productivity-themes/main/dist/dracula/dracula.css && mv dracula.css styles.css && cp styles.css ~/Library/Application\ Support/superProductivity/ && rm styles.css

macOS oneliner:

wget https://raw.githubusercontent.com/johannesjo/super-productivity-themes/main/dist/nord-polar-night/nord-polar-night.css && mv nord-polar-night.css styles.css && cp styles.css ~/Library/Application\ Support/superProductivity/ && rm styles.css

Linux oneline:

wget https://raw.githubusercontent.com/johannesjo/super-productivity-themes/main/dist/nord-polar-night/nord-polar-night.css && mv nord-polar-night.css styles.css && cp styles.css ~/.config/superProductivity/ && rm styles.css

macOS oneliner:

wget https://raw.githubusercontent.com/johannesjo/super-productivity-themes/main/dist/nord-snow-storm/nord-snow-storm.css && mv nord-snow-storm.css styles.css && cp styles.css ~/Library/Application\ Support/superProductivity/ && rm styles.css

macOS oneliner:

wget https://raw.githubusercontent.com/johannesjo/super-productivity-themes/main/dist/arc/arc.css && mv arc.css styles.css && cp styles.css ~/Library/Application\ Support/superProductivity/ && rm styles.css

Linux oneliner:

wget https://raw.githubusercontent.com/johannesjo/super-productivity-themes/main/dist/catppuccin-mocha/catppuccin-mocha.css && mv catppuccin-mocha.css styles.css && cp styles.css ~/.config/superProductivity/ && rm styles.css

1. Fork this repository
2. Clone the forked repository to your computer
3. Run npm install
4. Copy some existing theme under src/ so that your theme will be in single folder like src/yourtheme (assuming the name of your theme is "yourtheme" in this example). Check out dracula for example. You can see the stylable elements inside src/dark-base but if your theme does not contain any complex stuff like drop shadows you should only need one file to replace the color variables.
5. Keep command gulp running while developing your theme or if you prefer simply task compiling instead of watching files, run gulp styles after your changes
6. When you are done, send a Pull Request and we'll add your theme if it's good!

After 6.1.2 you can use themes in Desktop version of the app. Follow these instructions:

1. Choose your theme from this repository or develop your own
2. For example, if you'd like to use Dracula, copy dist/dracula.css and save it as styles.css and move to your user data folder. (or use oneliners for macOS under the screenshots)
3. Start/restart your desktop app and you should see the theme in effect immediately!

There are two ways to test themes and make changes.

1. Download the official release
2. Add your styles.css to app data by following these instructions
3. Open developer tools with F12 and make some notes

You can test your themes under the official super-productivity repository by doing the following:

1. git clone -branch styles-dev https://github.com/ronilaukkarinen/super-productivity.git
2. cd super-productivity
3. npm install
4. npm install -g @angular/cli
5. ng serve
6. Open a new Terminal window, navigate to project with cd command and run npm start
7. Go to src/styles.scss and import your styles
8. Use Chrome with Developer Tools or open devtools in mac app by pressing F12
9. Make your changes and commit them
10. Send a PR when you are ready!