johannesjo / super-productivity-themes

The repository for user made themes for Super Productivity <3

Themes for Super Productivity

✔️ Make theming easy

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

🍭 Themes

Dracula

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

Nord Polar Night

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

Nord Snow Storm

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

Arc

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

❓ How to add your theme

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!

💾 How to install a theme

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!

🌐 Testing themes

There are two ways to test themes and make changes.

1. Use the official app with developer tools (currently Mac only)

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

2. Use the official dev version

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!

super-productivity-themes's Issues

linux debian / styles.css / not working

howdy i would love to use the nordtheme for SP (which is absolutly awesome btw ;) )

i copied it straight into my ~/.config/superProductivity/styles.css

but its not loading, is this only for mac?

i run SP via AppImage or is this maybe the problem?

thanks in advanced and keep it up!
Hardy

Add to the stylus libary

Add all the themes to the stylus libary to use them inside the browser extention stylus without need to copy the raw css and paste it into stylus. That makes theming easily possible in web browsers.

• Dracula: https://userstyles.world/style/2749/super-productivity-dracula
• Arc
• Dark base
• Nord polar night
• Nord snow storm

Header isn't included in custom themes

The themes here do not include the header, where "Today" and the buttons for task icons sit. I can inspect element and see that

.wrapper[_ngcontent-hup-c124] {
background: #000000; <- THIS ONE
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
padding: 4px 8px;
min-height: 56px;
}

In this section if I change background it changes to the correct color, and by default it is transparent, but I have no clue how to include this in styles.css because I don't know anything about CSS. Any insight on this would be much appreciated.