Enabling Dark Mode

what is dark mode? 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 does greater green support dark mode? yes! greater green supports several options for dark mode it can be set at a theme level, where only site admins can change the ui from a light theme to a dark theme using this setting locks the color mode it can be set at a user level, allowing users to chose which color theme they prefer using this setting allows a toggle to display in the footer that the user can change how does greater green know what colors to use for dark mode switching? 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 these scales are set up in groups 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 the scales are made up of two parts a light mode scale and a dark mode scale 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 turning on dark mode globally 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 steps to turn on dark mode globally navigate to https //builder io/content and click on 'structured data models' 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 allowing a user to toggle between dark and light mode you may prefer to allow your customers to switch the theme to dark mode on their own how user theme switching works steps to turn on dark mode globally follow the above steps to get to your 'theme settings' toggle 'enable theme switching' and that's it you can now update your site to allow users to enable dark mode, or change it globally at an admin level