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.
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.
layoutTheme: localStorage.getItem("layoutTheme") || "light",
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.
layoutTheme: localStorage.getItem("layoutTheme") || "dark",
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.
darkModeColors: localStorage.getItem('darkModeColors') || "zinc"
darkModeColors: localStorage.getItem('darkModeColors') || "stone"
darkModeColors: localStorage.getItem('darkModeColors') || "neutral"
darkModeColors: localStorage.getItem('darkModeColors') || "gray"
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], }, } }, }, }
Be the first to know about new updates and exclusive discounts. No spam, just great offers!
How about
With over 7 years of experienced team, we specialize in delivering custom projects for startups, blue-chip companies, and government agencies. We have successfully completed over 250+ projects, providing tailored solutions that meet the unique needs of each client.
Hire Us© Domiex Created & Crafted by SRBThemes.