Implement Dark Mode in your app

0
Hi,Since Atlas 4 and the usage of CSS variables, it should be easier to implement dark modes in your app. However, I can only find how-tos/guides to implement dark mode for earlier Mendix/Atlas versions. I was wondering if there is a guide or if somebody can share what the best practices are for implementing a dark mode using Atlas 4Thanks!
asked
1 answers
1

Hi Kevin Geevers


You just redefine those variables under a [data-theme="dark"] selector every component flips automatically. Let me navigate this

  1. Define variables in custom-variable.scss
[:root { --color-background-primary: #ffffff; --color-text-primary: #1a1a1a; }
[data-theme="dark"] { --color-background-primary: #121212; --color-text-primary: #f0f0f0; }]

2. Then have a Toggle button to switch between dark and light via JS Action

example

export async function ToggleDarkMode() {
  const root = document.documentElement;
  const isDark = root.getAttribute('data-theme') === 'dark';
  root.setAttribute('data-theme', isDark ? 'light' : 'dark');
  localStorage.setItem('theme', isDark ? 'light' : 'dark');
}

3. Restore on load by calling from App Layout nanoflow

export async function InitTheme() {
  const saved = localStorage.getItem('theme') || 'light';
  document.documentElement.setAttribute('data-theme', saved);
}

4. In your custom SCSS file have the color like the example below

example: ✅ background: var(--color-background-primary);


I hope this helps


answered