> For the complete documentation index, see [llms.txt](https://docs.klai.studio/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.klai.studio/engineering-reference-docs/software-testing-overview/ux-ui-checklist/topics/dark-mode.md).

# Dark mode 🌑

For a designer, dark mode is larger than just flicking a switch and inverting some colors. The accessibility options completely change and your shades for structure and layout need to be re-evaluated - just for starters.

* [ ] Adaptable color palette

  What your product looks like visually with a dark setting

  ⭐️ A grey for your darkest color is more flexible in shadows and contrast than black

  ⭐️ The lower the saturation, the more accessible a color will be

  ⭐️ Ensure dark palette for backgrounds must allow white to be accessible
* [ ] Brand integrity

  Maintain your visual tone and style

  ⭐️ Invert monotone visuals

  ⭐️ Incorporate colours from your brand that are also present in light mode
* [ ] Elevation

  A way to structure elements to establish heirarchy

  ⭐️ Use lightness over shadows to give focus to certain containers or elements
* [ ] Switch to light mode

  Some products may be just one or the other, but if you offer both then allow the user to make a seamless switch between the two.