/* --------------------------------------- --------------------------------------- --------------------------------------- LIGHT THEME --------------------------------------- --------------------------------------- --------------------------------------- */ :root, .dark .light { /* --------------------------------------- Light Brand Colors --------------------------------------- These colors are defined this way so they can be defaulted in dark mode if there are no dark mode specific brand colors. */ /* Gray Light */ --mpc-color-light-gray-50: var(--mpc-custom-color-gray-50, var(--mpc-colors-gray-50)); --mpc-color-light-gray-100: var(--mpc-custom-color-gray-100, var(--mpc-colors-gray-100)); --mpc-color-light-gray-200: var(--mpc-custom-color-gray-200, var(--mpc-colors-gray-200)); --mpc-color-light-gray-300: var(--mpc-custom-color-gray-300, var(--mpc-colors-gray-300)); --mpc-color-light-gray-400: var(--mpc-custom-color-gray-400, var(--mpc-colors-gray-400)); --mpc-color-light-gray-500: var(--mpc-custom-color-gray-500, var(--mpc-colors-gray-500)); --mpc-color-light-gray-600: var(--mpc-custom-color-gray-600, var(--mpc-colors-gray-600)); --mpc-color-light-gray-700: var(--mpc-custom-color-gray-700, var(--mpc-colors-gray-700)); --mpc-color-light-gray-800: var(--mpc-custom-color-gray-800, var(--mpc-colors-gray-800)); --mpc-color-light-gray-900: var(--mpc-custom-color-gray-900, var(--mpc-colors-gray-900)); /* Primary Light */ --mpc-color-light-primary-50: var(--mpc-custom-color-primary-50, var(--mpc-colors-blue-50)); --mpc-color-light-primary-100: var(--mpc-custom-color-primary-100, var(--mpc-colors-blue-100)); --mpc-color-light-primary-200: var(--mpc-custom-color-primary-200, var(--mpc-colors-blue-200)); --mpc-color-light-primary-300: var(--mpc-custom-color-primary-300, var(--mpc-colors-blue-300)); --mpc-color-light-primary-400: var(--mpc-custom-color-primary-400, var(--mpc-colors-blue-400)); --mpc-color-light-primary-500: var(--mpc-custom-color-primary-500, var(--mpc-colors-blue-500)); --mpc-color-light-primary-600: var(--mpc-custom-color-primary-600, var(--mpc-colors-blue-600)); --mpc-color-light-primary-700: var(--mpc-custom-color-primary-700, var(--mpc-colors-blue-700)); --mpc-color-light-primary-800: var(--mpc-custom-color-primary-800, var(--mpc-colors-blue-800)); --mpc-color-light-primary-900: var(--mpc-custom-color-primary-900, var(--mpc-colors-blue-900)); /* Accent Light */ --mpc-color-light-accent-50: var(--mpc-custom-color-accent-50, var(--mpc-colors-blue-50)); --mpc-color-light-accent-100: var(--mpc-custom-color-accent-100, var(--mpc-colors-blue-100)); --mpc-color-light-accent-200: var(--mpc-custom-color-accent-200, var(--mpc-colors-blue-200)); --mpc-color-light-accent-300: var(--mpc-custom-color-accent-300, var(--mpc-colors-blue-300)); --mpc-color-light-accent-400: var(--mpc-custom-color-accent-400, var(--mpc-colors-blue-400)); --mpc-color-light-accent-500: var(--mpc-custom-color-accent-500, var(--mpc-colors-blue-500)); --mpc-color-light-accent-600: var(--mpc-custom-color-accent-600, var(--mpc-colors-blue-600)); --mpc-color-light-accent-700: var(--mpc-custom-color-accent-700, var(--mpc-colors-blue-700)); --mpc-color-light-accent-800: var(--mpc-custom-color-accent-800, var(--mpc-colors-blue-800)); --mpc-color-light-accent-900: var(--mpc-custom-color-accent-900, var(--mpc-colors-blue-900)); /* Third Light */ --mpc-color-light-third-50: var(--mpc-custom-color-third-50, var(--mpc-colors-gray-50)); --mpc-color-light-third-100: var(--mpc-custom-color-third-100, var(--mpc-colors-gray-100)); --mpc-color-light-third-200: var(--mpc-custom-color-third-200, var(--mpc-colors-gray-200)); --mpc-color-light-third-300: var(--mpc-custom-color-third-300, var(--mpc-colors-gray-300)); --mpc-color-light-third-400: var(--mpc-custom-color-third-400, var(--mpc-colors-gray-400)); --mpc-color-light-third-500: var(--mpc-custom-color-third-500, var(--mpc-colors-gray-500)); --mpc-color-light-third-600: var(--mpc-custom-color-third-600, var(--mpc-colors-gray-600)); --mpc-color-light-third-700: var(--mpc-custom-color-third-700, var(--mpc-colors-gray-700)); --mpc-color-light-third-800: var(--mpc-custom-color-third-800, var(--mpc-colors-gray-800)); --mpc-color-light-third-900: var(--mpc-custom-color-third-900, var(--mpc-colors-gray-900)); /* --------------------------------------- Active Colors --------------------------------------- */ /* Grays */ --mpc-color-gray-50: var(--mpc-color-light-gray-50); --mpc-color-gray-100: var(--mpc-color-light-gray-100); --mpc-color-gray-200: var(--mpc-color-light-gray-200); --mpc-color-gray-300: var(--mpc-color-light-gray-300); --mpc-color-gray-400: var(--mpc-color-light-gray-400); --mpc-color-gray-500: var(--mpc-color-light-gray-500); --mpc-color-gray-600: var(--mpc-color-light-gray-600); --mpc-color-gray-700: var(--mpc-color-light-gray-700); --mpc-color-gray-800: var(--mpc-color-light-gray-800); --mpc-color-gray-900: var(--mpc-color-light-gray-900); /* Primary */ --mpc-color-primary-50: var(--mpc-color-light-primary-50); --mpc-color-primary-100: var(--mpc-color-light-primary-100); --mpc-color-primary-200: var(--mpc-color-light-primary-200); --mpc-color-primary-300: var(--mpc-color-light-primary-300); --mpc-color-primary-400: var(--mpc-color-light-primary-400); --mpc-color-primary-500: var(--mpc-color-light-primary-500); --mpc-color-primary-600: var(--mpc-color-light-primary-600); --mpc-color-primary-700: var(--mpc-color-light-primary-700); --mpc-color-primary-800: var(--mpc-color-light-primary-800); --mpc-color-primary-900: var(--mpc-color-light-primary-900); /* Accent */ --mpc-color-accent-50: var(--mpc-color-light-accent-50); --mpc-color-accent-100: var(--mpc-color-light-accent-100); --mpc-color-accent-200: var(--mpc-color-light-accent-200); --mpc-color-accent-300: var(--mpc-color-light-accent-300); --mpc-color-accent-400: var(--mpc-color-light-accent-400); --mpc-color-accent-500: var(--mpc-color-light-accent-500); --mpc-color-accent-600: var(--mpc-color-light-accent-600); --mpc-color-accent-700: var(--mpc-color-light-accent-700); --mpc-color-accent-800: var(--mpc-color-light-accent-800); --mpc-color-accent-900: var(--mpc-color-light-accent-900); /* Third */ --mpc-color-third-50: var(--mpc-color-light-third-50); --mpc-color-third-100: var(--mpc-color-light-third-100); --mpc-color-third-200: var(--mpc-color-light-third-200); --mpc-color-third-300: var(--mpc-color-light-third-300); --mpc-color-third-400: var(--mpc-color-light-third-400); --mpc-color-third-500: var(--mpc-color-light-third-500); --mpc-color-third-600: var(--mpc-color-light-third-600); --mpc-color-third-700: var(--mpc-color-light-third-700); --mpc-color-third-800: var(--mpc-color-light-third-800); --mpc-color-third-900: var(--mpc-color-light-third-900); /* Success */ --mpc-color-success-50: var(--mpc-custom-color-success-50, var(--mpc-colors-success-50)); --mpc-color-success-100: var(--mpc-custom-color-success-100, var(--mpc-colors-success-100)); --mpc-color-success-200: var(--mpc-custom-color-success-200, var(--mpc-colors-success-200)); --mpc-color-success-300: var(--mpc-custom-color-success-300, var(--mpc-colors-success-300)); --mpc-color-success-400: var(--mpc-custom-color-success-400, var(--mpc-colors-success-400)); --mpc-color-success-500: var(--mpc-custom-color-success-500, var(--mpc-colors-success-500)); --mpc-color-success-600: var(--mpc-custom-color-success-600, var(--mpc-colors-success-600)); --mpc-color-success-700: var(--mpc-custom-color-success-700, var(--mpc-colors-success-700)); --mpc-color-success-800: var(--mpc-custom-color-success-800, var(--mpc-colors-success-800)); --mpc-color-success-900: var(--mpc-custom-color-success-900, var(--mpc-colors-success-900)); /* Warning */ --mpc-color-warning-50: var(--mpc-custom-color-warning-50, var(--mpc-colors-warning-50)); --mpc-color-warning-100: var(--mpc-custom-color-warning-100, var(--mpc-colors-warning-100)); --mpc-color-warning-200: var(--mpc-custom-color-warning-200, var(--mpc-colors-warning-200)); --mpc-color-warning-300: var(--mpc-custom-color-warning-300, var(--mpc-colors-warning-300)); --mpc-color-warning-400: var(--mpc-custom-color-warning-400, var(--mpc-colors-warning-400)); --mpc-color-warning-500: var(--mpc-custom-color-warning-500, var(--mpc-colors-warning-500)); --mpc-color-warning-600: var(--mpc-custom-color-warning-600, var(--mpc-colors-warning-600)); --mpc-color-warning-700: var(--mpc-custom-color-warning-700, var(--mpc-colors-warning-700)); --mpc-color-warning-800: var(--mpc-custom-color-warning-800, var(--mpc-colors-warning-800)); --mpc-color-warning-900: var(--mpc-custom-color-warning-900, var(--mpc-colors-warning-900)); /* Error */ --mpc-color-error-50: var(--mpc-custom-color-error-50, var(--mpc-colors-error-50)); --mpc-color-error-100: var(--mpc-custom-color-error-100, var(--mpc-colors-error-100)); --mpc-color-error-200: var(--mpc-custom-color-error-200, var(--mpc-colors-error-200)); --mpc-color-error-300: var(--mpc-custom-color-error-300, var(--mpc-colors-error-300)); --mpc-color-error-400: var(--mpc-custom-color-error-400, var(--mpc-colors-error-400)); --mpc-color-error-500: var(--mpc-custom-color-error-500, var(--mpc-colors-error-500)); --mpc-color-error-600: var(--mpc-custom-color-error-600, var(--mpc-colors-error-600)); --mpc-color-error-700: var(--mpc-custom-color-error-700, var(--mpc-colors-error-700)); --mpc-color-error-800: var(--mpc-custom-color-error-800, var(--mpc-colors-error-800)); --mpc-color-error-900: var(--mpc-custom-color-error-900, var(--mpc-colors-error-900)); /* Background */ --mpc-color-bg: var(--mpc-custom-color-bg, var(--mpc-colors-bg)); --mpc-color-bg-alt: var(--mpc-custom-color-bg-alt, var(--mpc-colors-bg-alt)); /* White */ --mpc-color-white: var(--mpc-custom-color-white, var(--mpc-colors-white)); --mpc-color-white-bg: var(--mpc-custom-color-white-bg, var(--mpc-colors-white)); /* .bg-white */ --mpc-color-bg-white: var(--mpc-color-white-bg); } /* --------------------------------------- --------------------------------------- --------------------------------------- DARK THEME --------------------------------------- --------------------------------------- --------------------------------------- Overwrite the default light theme vars. Dark mode can be disabled for any element by adding the "light" class name. It can also be applied to any element by adding the "dark" class name. */ .dark:not(.dark-disabled) { /* --------------------------------------- Active Colors --------------------------------------- */ /* Grays */ --mpc-color-gray-50: var(--mpc-custom-color-dark-gray-50, var(--mpc-color-light-gray-900)); --mpc-color-gray-100: var(--mpc-custom-color-dark-gray-100, var(--mpc-color-light-gray-800)); --mpc-color-gray-200: var(--mpc-custom-color-dark-gray-200, var(--mpc-color-light-gray-700)); --mpc-color-gray-300: var(--mpc-custom-color-dark-gray-300, var(--mpc-color-light-gray-600)); --mpc-color-gray-400: var(--mpc-custom-color-dark-gray-400, var(--mpc-color-light-gray-500)); --mpc-color-gray-500: var(--mpc-custom-color-dark-gray-500, var(--mpc-color-light-gray-400)); --mpc-color-gray-600: var(--mpc-custom-color-dark-gray-600, var(--mpc-color-light-gray-300)); --mpc-color-gray-700: var(--mpc-custom-color-dark-gray-700, var(--mpc-color-light-gray-200)); --mpc-color-gray-800: var(--mpc-custom-color-dark-gray-800, var(--mpc-color-light-gray-100)); --mpc-color-gray-900: var(--mpc-custom-color-dark-gray-900, var(--mpc-color-light-gray-50)); /* Primary */ --mpc-color-primary-50: var(--mpc-custom-color-dark-primary-50, var(--mpc-color-light-primary-50)); --mpc-color-primary-100: var(--mpc-custom-color-dark-primary-100, var(--mpc-color-light-primary-100)); --mpc-color-primary-200: var(--mpc-custom-color-dark-primary-200, var(--mpc-color-light-primary-200)); --mpc-color-primary-300: var(--mpc-custom-color-dark-primary-300, var(--mpc-color-light-primary-300)); --mpc-color-primary-400: var(--mpc-custom-color-dark-primary-400, var(--mpc-color-light-primary-400)); --mpc-color-primary-500: var(--mpc-custom-color-dark-primary-500, var(--mpc-color-light-primary-500)); --mpc-color-primary-600: var(--mpc-custom-color-dark-primary-600, var(--mpc-color-light-primary-600)); --mpc-color-primary-700: var(--mpc-custom-color-dark-primary-700, var(--mpc-color-light-primary-700)); --mpc-color-primary-800: var(--mpc-custom-color-dark-primary-800, var(--mpc-color-light-primary-800)); --mpc-color-primary-900: var(--mpc-custom-color-dark-primary-900, var(--mpc-color-light-primary-900)); /* Accent */ --mpc-color-accent-50: var(--mpc-custom-color-dark-accent-50, var(--mpc-color-light-accent-50)); --mpc-color-accent-100: var(--mpc-custom-color-dark-accent-100, var(--mpc-color-light-accent-100)); --mpc-color-accent-200: var(--mpc-custom-color-dark-accent-200, var(--mpc-color-light-accent-200)); --mpc-color-accent-300: var(--mpc-custom-color-dark-accent-300, var(--mpc-color-light-accent-300)); --mpc-color-accent-400: var(--mpc-custom-color-dark-accent-400, var(--mpc-color-light-accent-400)); --mpc-color-accent-500: var(--mpc-custom-color-dark-accent-500, var(--mpc-color-light-accent-500)); --mpc-color-accent-600: var(--mpc-custom-color-dark-accent-600, var(--mpc-color-light-accent-600)); --mpc-color-accent-700: var(--mpc-custom-color-dark-accent-700, var(--mpc-color-light-accent-700)); --mpc-color-accent-800: var(--mpc-custom-color-dark-accent-800, var(--mpc-color-light-accent-800)); --mpc-color-accent-900: var(--mpc-custom-color-dark-accent-900, var(--mpc-color-light-accent-900)); /* Third */ --mpc-color-third-50: var(--mpc-custom-color-dark-third-50, var(--mpc-color-light-third-50)); --mpc-color-third-100: var(--mpc-custom-color-dark-third-100, var(--mpc-color-light-third-100)); --mpc-color-third-200: var(--mpc-custom-color-dark-third-200, var(--mpc-color-light-third-200)); --mpc-color-third-300: var(--mpc-custom-color-dark-third-300, var(--mpc-color-light-third-300)); --mpc-color-third-400: var(--mpc-custom-color-dark-third-400, var(--mpc-color-light-third-400)); --mpc-color-third-500: var(--mpc-custom-color-dark-third-500, var(--mpc-color-light-third-500)); --mpc-color-third-600: var(--mpc-custom-color-dark-third-600, var(--mpc-color-light-third-600)); --mpc-color-third-700: var(--mpc-custom-color-dark-third-700, var(--mpc-color-light-third-700)); --mpc-color-third-800: var(--mpc-custom-color-dark-third-800, var(--mpc-color-light-third-800)); --mpc-color-third-900: var(--mpc-custom-color-dark-third-900, var(--mpc-color-light-third-900)); /* Background */ --mpc-color-bg: var(--mpc-custom-color-dark-bg, var(--mpc-colors-dark-bg)); --mpc-color-bg-alt: var(--mpc-custom-color-dark-bg-alt, var(--mpc-colors-dark-bg-alt)); /* White */ --mpc-color-dark-white: var(--mpc-custom-color-dark-white, var(--mpc-colors-dark-white)); --mpc-color-white-bg: var(--mpc-color-bg); /* .bg-white */ --mpc-color-bg-white: var(--mpc-color-dark-white); /* --mpc-color-dark-white is a version of --mpc-color-white for dark mode We can not assume all whites should be dark in dark mode. There are many UI's where white should be white on all color modes (Primary). Therefore, set a minimum assumtion of what should be transformed and leave others to be managed manually in UI or overwritted with the ".light" class name */ /* Replacement "white" color */ /* @media (--viewportLarge) { & .lg\:bg-white { background-color: rgb(var(--mpc-color-bg-white) / var(--tw-bg-opacity, 1)) !important; } } */ } .dark:not(.dark-disabled) .bg-white:not(.bg-transparent), .dark:not(.dark-disabled) [type='text'], .dark:not(.dark-disabled) [type='email'], .dark:not(.dark-disabled) [type='url'], .dark:not(.dark-disabled) [type='password'], .dark:not(.dark-disabled) [type='number'], .dark:not(.dark-disabled) [type='date'], .dark:not(.dark-disabled) [type='datetime-local'], .dark:not(.dark-disabled) [type='month'], .dark:not(.dark-disabled) [type='search'], .dark:not(.dark-disabled) [type='tel'], .dark:not(.dark-disabled) [type='time'], .dark:not(.dark-disabled) [type='week'], .dark:not(.dark-disabled) [multiple], .dark:not(.dark-disabled) textarea, .dark:not(.dark-disabled) select:not(.bg-transparent) { background-color: rgb(var(--mpc-color-bg-white) / var(--tw-bg-opacity, 1)); }