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 layoutTheme to dark or light in the Admin/src/store/layout.d.ts file.

Light Mode:

To display content in light mode, you can use the layoutTheme to "light" . 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 layoutTheme "dark" . 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 layoutTheme to "dark" and added the colors class in the body tag in Admin/src/store/layout.d.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/variables-config.json file. Set different color shared from light to dark.

const defaultTheme = require('tailwindcss/defaultTheme');
const colors = require('tailwindcss/colors');
module.exports = {
    variables: {
        DEFAULT: {
            colors: { 
                dark: {
                    50: colors.slate[50],
                    100: colors.slate[100],
                    200: colors.slate[200],
                    300: colors.slate[300],
                    400: colors.slate[400],
                    500: colors.slate[500],
                    600: colors.slate[600],
                    700: colors.slate[700],
                    800: colors.slate[800],
                    850: '#161c30',
                    900: colors.slate[900],
                    950: colors.slate[950],
                },
            }
        },
    },
}