Color Schemes
The project uses tailwind-like color schemes arranged in monochromatic pairs. Color schemes can be applied to several elements, perhaps most importantly to slide layouts and some components.
These boxes show the options and names:
B&W Schemes
Light Schemes
Regular Schemes
Add-ons
These are non-tailwind colors that are used in the project:
Applying Schemes
Each scheme sets the following CSS vars:
--neversink-bg-color
--neversink-bg-code-color
--neversink-fg-code-color
--neversink-fg-color
--neversink-text-color
--neversink-border-color
--neversink-highlight-colorwhich contains values for these options which might go well together in a monochromatic scheme.
To apply the theme to a element you simply add the neversink-{name}-scheme class to the element and then add another class which binds the CSS vars as you like.
There is one built-in one called .ns-c-bind-scheme which applies the color to the background, text, and border of the element. It's definition looks like this:
.ns-c-bind-scheme {
background-color: var(--neversink-bg-color);
color: var(--neversink-text-color);
border-color: var(--neversink-border-color);
}For example, to apply the red scheme from above to a div element you would add the following classes:
<div class="neversink-red-scheme ns-c-bind-scheme">This is a red div</div>You can also define you own custom binding classes if you want to map the colors from the theme in a different way. For example, you could define a class like this:
.my-bind-scheme {
background-color: var(--neversink-text-color);
}This provides you flexibility in how you decided to bind elements of the color scheme to your elements.