Subscribe
Sign in
App Icon Template for Sketch
p/app-icon-template-for-sketchOptimized workflow for creating app icons in Sketch
Start new thread
Søren Clausen

Color System Plugin for Sketch - Light and dark mode directly in your design with one click

by•

With the Color System Plugin, setting up a color system is quick and easy. The plugin are lightweight and integrates with your Document Colors in Sketch, so you don't have to change your way of working.

Add a comment

Replies

Best
Søren Clausen
Maker
Hi everyone! :) I built this, and here's why: We all know that both Apple and Google are pushing Dark Modes in their newest OS's. Users will expect our product to support Dark Mode. This is an issue for several reasons: 1) Existing products are most likely not prepared for this, so it will be a lot of work to include the Dark Mode. 2) Working consistently with colors in todays design tools is not easy. Figma is almost there, but Sketch certainly is not. (I know nothing about XD, sorry) 3) Designing a product with different color modes often require designers to create duplicate styles or components. The funny thing is. The logic for switching colors are actually quite simple for developers. So I thought – why not build a plugin? It can't be that hard. Turns out it's way more tricky than I expected. But not impossible. So here we are. The Color System plugin for Sketch, is the plugin to quickly create a secondary color scheme for your product, and switch between the color modes almost instantly, as much as you want, while you are designing. I hope it will help designers save time, and to be more consistent with their colors. I certainly learned a lot building it, and have so many ideas for new features and enhancements! Enjoy!
Phil Schaffarzyk
@sclausen_dk Hey Søren, thanks for this awesome plugin. Unfortunately it doesn't work with massive color lists. In my case I have 5 colors with 10 tones in my palette an there isn't a scroll function so I can only see 37 colors in my case. A scroll view would be fantastic.
Søren Clausen
Maker
@psch996 Thank you :) I will look into this asap!
Steve Avery
Would there be any opportunity to also consider changing/updating font styles as in dark mode you may want font style to be bold and regular in light mode? This would be awesome if this is possible.
Søren Clausen
Maker
@steve_avery2 Hi Steve, I also replied on Twitter, but for everyone else here's my reply: It's definitely on the roadmap to update styles, and maybe even add styles for every color so they can be used in overrides :) It will probably be included in the next big update.
Ahmed Almadhoun
I was bought the plugin and I wonder how to work with it, where I can find documentation for this plugin
Søren Clausen
Maker
@ahmed_almadhoun Hi Ahmed, I'm working on an update for the plugin, and a guide to use it. Make sure to follow me on Twitter to see when this happens :)
Denis Reis
Thanks for the plugin it's very useful, do you plan to use layer style in sketch instead to create manually another swatch in the plugin ?
Søren Clausen
Maker
@denis_rda My pleasure. No I do not plan to use styles. The reason being that styles links fills, borders, shadows and other styles. Colors are way more flexible when it doesn't matter where they are used. But I will look into it :) I might add it as an option, to save colors as styles. Thank you for the suggestion :)
Steve Avery
Awesome! It would be great if there was a third option to not only switch between light and dark but also brand?
Søren Clausen
Maker
@steve_avery2 On the roadmap: Unlimited color schemes :)
Vlad Korobov
Thank you for that man!
Søren Clausen
Maker
@vladkorobov You're welcome! Let me know if you experience any bugs or have feature requests :) You can find me on Twitter!
Yash Bhardwaj
Is this coming on Figma?
Søren Clausen
Maker
@yash I'm looking into it. Figma's plugin API is very new and doesn't seem to support access to the color palette. But when it does, the plugin will actually work even better than the Sketch version, because of the Global Colors feature in Figma :)
MeetFox App
great founder story.
Lili Marina
seems like a super useful tool!
Nick Gertonson
Is there a support forum for this product? I'm having trouble with importing and exporting.
Søren Clausen
Maker
@nick_gertonson Hi Nick, there is not, but feel free to reach out on twitter or email. I'll gladly help you out :)
jasam_baraba
Hi! I have Sketch v67.2. Bought and installed your plugin today, but each time I try to delete a color from existing document colors of working projekct, my Sketch app crashes. When re-opened, I still get crashed Sketch once I try to delete a color (No matter if at that current stage your plugin is enabled or disabled). This problem starts when having symbols inside the project. I tryed new project with no symbols and it worked fine. Please help :)
Aku Ankka
I created a color system hooray, but what am i supposed to do with it? The "color variables" are not available in the inscpectors or sketch real color variables.
Aku Ankka
The documentation is so poor (none) that the plugin is quite useless.