Light & Dark

Domiex offers an intuitive solution for implementing Light and Dark modes, combining ease of use with clean, efficient code for a seamless user experience. It can be quick change to dark mode or light mode by simply changing the data-mode attribute in the symfony/templates/partials/master.html.twig file.

Light Mode:

To display content in light mode, you can use the data-mode="light" attribute. This typically results in a theme with a light background and dark text, which is the default for most websites.

Dark Mode

To display content in dark mode, you can use the data-mode="dark" attribute. This usually results in a theme with a dark background and light text, which is easier on the eyes in low-light conditions.

Dark Mode Variations

To display different background colors in dark mode, you can use the data-mode="dark" attribute and added the colors class in the body tag in symfony/templates/partials/master.html.twig file. This usually results in a theme with a dark background and light text, which is easier on the eyes in low-light conditions.

Use Custom Colors in Dark mode

You can simply customize your own colors in dark mode by doing couple of changes in the Admin/Main/assets/css/components/theme.css file. Set different color shared from light to dark.

@theme {
    /* //dark mode colors */
    --color-dark-50:                var(--color-slate-50);
    --color-dark-100:               var(--color-slate-100);
    --color-dark-200:               var(--color-slate-200);
    --color-dark-300:               var(--color-slate-300);
    --color-dark-400:               var(--color-slate-400);
    --color-dark-500:               var(--color-slate-500);
    --color-dark-600:               var(--color-slate-600);
    --color-dark-700:               var(--color-slate-700);
    --color-dark-800:               var(--color-slate-800);
    --color-dark-850:               oklch(23.13% 0.0399 270.37);
    --color-dark-900:               var(--color-slate-900);
    --color-dark-950:               var(--color-slate-950);
}