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 admin/src/lib/stores/layout.ts file.

Light Mode:

To display content in light mode, you can use the userSettings.layoutTheme="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 userSettings.layoutTheme="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 userSettings.layoutTheme="dark" attribute and added the colors class in the body tag in admin/src/lib/stores/layout.ts 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/src/lib/css/themes-color/dark-color.css file. Set different color shared from light to dark.

[data-mode=dark].zinc {
    --color-dark-50:                oklch(0.985 0 0);
    --color-dark-100:               oklch(0.967 0.001 286.375);
    --color-dark-200:               oklch(0.92 0.004 286.32);
    --color-dark-300:               oklch(0.871 0.006 286.286);
    --color-dark-400:               oklch(0.705 0.015 286.067);
    --color-dark-500:               oklch(0.552 0.016 285.938);
    --color-dark-600:               oklch(0.442 0.017 285.786);
    --color-dark-700:               oklch(0.37 0.013 285.805);
    --color-dark-800:               oklch(0.274 0.006 286.033);
    --color-dark-850:               oklch(30.12% 0 0);
    --color-dark-900:               oklch(0.21 0.006 285.885);
    --color-dark-950:               oklch(0.141 0.005 285.823);
}

[data-mode=dark].stone {
    --color-dark-50:                oklch(0.985 0.001 106.423);
    --color-dark-100:               oklch(0.97 0.001 106.424);
    --color-dark-200:               oklch(0.923 0.003 48.717);
    --color-dark-300:               oklch(0.869 0.005 56.366);
    --color-dark-400:               oklch(0.709 0.01 56.259);
    --color-dark-500:               oklch(0.553 0.013 58.071);
    --color-dark-600:               oklch(0.444 0.011 73.639);
    --color-dark-700:               oklch(0.374 0.01 67.558);
    --color-dark-800:               oklch(0.268 0.007 34.298);
    --color-dark-850:               oklch(25.53% 0.0082 59.29);
    --color-dark-900:               oklch(0.216 0.006 56.043);
    --color-dark-950:               oklch(0.147 0.004 49.25);
}

[data-mode=dark].neutral {
    --color-dark-50:                oklch(0.985 0 0);
    --color-dark-100:               oklch(0.97 0 0);
    --color-dark-200:               oklch(0.922 0 0);
    --color-dark-300:               oklch(0.87 0 0);
    --color-dark-400:               oklch(0.708 0 0);
    --color-dark-500:               oklch(0.556 0 0);
    --color-dark-600:               oklch(0.439 0 0);
    --color-dark-700:               oklch(0.371 0 0);
    --color-dark-800:               oklch(0.269 0 0);
    --color-dark-850:               oklch(23.5% 0 0);
    --color-dark-900:               oklch(0.205 0 0);
    --color-dark-950:               oklch(0.145 0 0);
}

[data-mode=dark].gray {
    --color-dark-50:                oklch(0.985 0.002 247.839);
    --color-dark-100:               oklch(0.967 0.003 264.542);
    --color-dark-200:               oklch(0.928 0.006 264.531);
    --color-dark-300:               oklch(0.872 0.01 258.338);
    --color-dark-400:               oklch(0.707 0.022 261.325);
    --color-dark-500:               oklch(0.551 0.027 264.364);
    --color-dark-600:               oklch(0.446 0.03 256.802);
    --color-dark-700:               oklch(0.373 0.034 259.733);
    --color-dark-800:               oklch(0.278 0.033 256.848);
    --color-dark-850:               oklch(25.89% 0.0374 268.25);
    --color-dark-900:               oklch(0.21 0.034 264.665);
    --color-dark-950:               oklch(0.13 0.028 261.692);
}