Set a Shared Standard for Themes Online
Most of the time you need to pick between more control and more complexity or more simplicity less control. But every now and again theres an area where a perfect solution can give you both at the same time. A theme management library that's flexible and simple, allowing you to create semantic color themes effortlessly. It's scalable and customizable, enabling you to modify your colors or add/remove theme sections with ease. Plus, it supports dark/light mode switching with a single line of code and ensures readability values are enforced. You can switch your entire theme on the fly or add subSchemes for added complexity without any code rewrites. Allways able to retroactively add complexity to your theme with no rewrites.
Foreground & Background
All shapes exist only at the mercy of this color range. A simple relationship between two color choices. The contrast between them defines a potental range of auto generated colors which make up the appropriate color space of the theme with very few inputs.
Some Title
Lorem, ipsum dolor sit.
Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Lorem, ipsum dolor sit.
Accent
Describes an aditional type of foreground color used sparringly to create drama in the theme. This color is resposible for defining the flavor and feel of the theme. Often the best place to represent branding colors.
Some Title
Lorem, ipsum dolor sit.
Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Lorem, ipsum dolor sit.
A
chip
Title
2 months ago
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos in cum ea eum nulla sit, repellendus optio quidem obcaecati perferendis similique dolor reiciendis repudiandae doloremque omnis saepe sapiente nostrum iusto!
Range
12 shades split in 3 groups All shapes exist only at the mercy of this color range. A simple relationship between two color choices. The contrast between them defines a potental range of auto generated colors which make up the appropriate color space of the theme with very few inputs. Background, foreground, accent.
- background
- panel background
- borders
- solid backgrounds
- text & icons
Base
- background
- background-10
- background-20
- background-30
- foreground
- foreground-10
- foreground-20
- foreground-30
Brand
- accent
- accent-10
- accent-20
- accent-30
- accent-40
- accent-50
- accent-60
- contrast
Selected theme: default
default
A
cherryberry
A
cyberpunk
A
nightshade
A
Theme is: light
Minimum Readability: 4 good
Colors
Edit
#ffffff
red
copy
Background
Edit
#000000
red
copy
Foreground
Edit
#006585
red
copy
Accent
What's included
😽 Scalable/Granular
Increase or decrease the complexity of your theme with 0 friction
😽 Dynamic/Mutable
oriented around the idea that your theme is mutable and any part should be able to be changed at any time with all other parts adjusting seamlessly
😽 Simple/Progresive
Just a simple JS function that lets you progressivley define your theme with a single value or many values. Start with 1 or 2 and get more complex as you need
👨🦽 Powerfull
Dark mode, light mode, and everything in between on the fly
🛠️ Maintainable
Enforces a single source of truth for your entire color system
👨🦽 Accessible
Understands readability because it defines all colors in relationship to each other. Control readability scores to enforce good readability or just help monitor
🔭 Typesafe
Great auto suggestions even if you dont use TypeScript