Dark mode is a display setting that uses light-colored fonts, icons, and other design elements on a dark background. This high-contrast display transforms the user interface of websites, apps, and more from a traditional light-themed UI into this darker version. 

Dark mode has grown immensly in popularity but it's use is based largely on personal preference. Some people find dark modes more comfortable to use at night or in poor lighting conditions, as dark mode may relieve eye strain, thanks to darker background colors. Dark mode also claims to reduce blue light exposure, which harms the eyes during periods of prolonged screen time. 



Yes! Greater Green supports several options for Dark Mode.



Greater Green is built specifically to suppport dark mode options without compromising contrast requirements by the WCAG.

Greater Green uses color scales developed by Radix. These color scales have been thoroughly tested and vetted against strictest accessibility tests to always meet AA accessibility standards. This standard helps to ensure that as many users as possible, including those with vision impairments, can comfortably view your content.

As part of your initial implementation of Greater Green, we have set up AA compliant color scales to match your brand.

Primary

The primary color scale is intended for full color backgrounds, headlines, subheads, and other high value content.

Secondary

The secondary scale can be thought of as your 'pop color' it is generally a brighter, more disctinct color scale and is used to draw specific attention to elements like buttons, links, product badges, and other calls to action

Neutral

The neutral scale is generally used for core and base elements of your site such as body copy, borders, dividers, and secondary content areas. It is designed for maximum legibility.

This is how your site knows which colors to use when in dark or light mode. When an admin or a user switches on dark mode, the site intuitively switches to the appropriate scale.



If you want your users to always see a dark version or always see a light version of your site, that is as easy as flipping a switch.

2. Click on 'Theme Settings'

3. Toggle 'Enable Dark Mode'

4. Main Nav Dark Mode:

This setting allows you to always force a specific mode onto your main navigation.

Because we use a dark main navigation when in light mode, switching to dark mode would display the opposite, a light navigation. This may be visually appealing to you or not, and we leave that choice to you with this setting.



You may prefer to allow your customers to switch the theme to dark mode on their own.

How User-Theme Switching works: