Site Themes & Modes
zenCSS ships with light & dark mode plus 7 dynamic, accessable themes.
We offer a default, light and dark theme, plus 4 individual themes based on your brand colors, allowing you to style individual content items and their children based on your signature style. These seven meticulously developed themes offer instant color and styling flexibility while maintaining WCAG 2.1 AA compliance. Our system lets you easily override background and text colors on any theme element using our Smart-Color System.
Default Theme
Lorem ipsum dolor sit amet consectetur adipisicing elit. Id, mollitia at velit veritatis odit in atque aut perferendis? Ipsum Dolor
theme-light
Lorem ipsum dolor sit amet consectetur adipisicing elit. Id, mollitia at velit veritatis odit in atque aut perferendis? Ipsum Dolor
theme-dark
Lorem ipsum dolor sit amet consectetur adipisicing elit. Id, mollitia at velit veritatis odit in atque aut perferendis? Ipsum Dolor
theme-primary
Lorem ipsum dolor sit amet consectetur adipisicing elit. Id, mollitia at velit veritatis odit in atque aut perferendis? Ipsum Dolor
theme-cta
Lorem ipsum dolor sit amet consectetur adipisicing elit. Id, mollitia at velit veritatis odit in atque aut perferendis? Ipsum Dolor
theme-secondary
Lorem ipsum dolor sit amet consectetur adipisicing elit. Id, mollitia at velit veritatis odit in atque aut perferendis? Ipsum Dolor
theme-accent
Lorem ipsum dolor sit amet consectetur adipisicing elit. Id, mollitia at velit veritatis odit in atque aut perferendis? Ipsum Dolor
Embracing Dark Mode in zenCSS
zenCSS introduces Dark Mode, blending aesthetics with comfort and accessibility. This mode minimizes eye strain in low-light conditions and integrates seamlessly with our seven dynamic themes, maintaining WCAG 2.1 AA compliance.
Seamless Theme Integration
Dark Mode works in harmony with all zenCSS themes, ensuring a consistent user experience without compromising design or accessibility standards.
Customizable & Accessible
Adhering to accessibility standards, Dark Mode in zenCSS offers customizable options through the Smart-Color System, allowing easy background and text color modifications while maintaining brand consistency.
Easy Activation
Activating Dark Mode is straightforward. Adding the zen-dark class to the body enables a user-friendly, eye-comforting theme, reflecting your brand's commitment to diverse user needs.
The Zen Test
Every component, section, and utility we ship will pass layout, color, and functional tests to ensure they perform flawlessly in today's modern browsers.
So you can be assured it "just works". Try it out below.