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/partials/body.html 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 Admin/src/partials/body.html 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],
                },
            }
        },
    },
}