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-bs-theme attribute in the Admin/apps/views/partials/main.php file.

Light Mode:

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

data-bs-theme="light"

Dark Mode

To display content in dark mode, you can use the data-bs-theme="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.

data-bs-theme="dark"

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/assets/scss/_variables-dark.scss file. Set different color shared from light to dark.

$dark-gray-50:  #f8fafc;
$dark-gray-100: #f1f5f9;
$dark-gray-200: #e2e8f0;
$dark-gray-300: #cbd5e1;
$dark-gray-400: #94a3b8;
$dark-gray-500: #64748b;
$dark-gray-600: #475569;
$dark-gray-700: #334155;
$dark-gray-800: #1e293b;
$dark-gray-850: #161c30;
$dark-gray-900: #0f172a;
$dark-gray-950: #020617;