-
Notifications
You must be signed in to change notification settings - Fork 149
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Dark mode Issues #208
Comments
I am facing the same issue, the picker has a white background in both light and dark mode (also using a template with a colors array in tailwind.config.js) |
What is your |
@Fhasaj I haven't touched that component since November, but yesterday i had to fix it and in order to make it work, you need to make sure that the colors object inside your tailwind config file is inside the theme -> extend object: That way the template colors will just extend the original tailwind colors and the datepicker colors will work as expected |
Thank you I will give that a go and let you know the outcome |
Hi Guys,
I am having a little trouble with the date picker using a template. when i try and switch to dark mode the date picker is not switching. after a few weeks of me pulling my hair out i have seem to found and isolated the issue, it was a configuration in the tailwind.config file. I have included that portion of the code here. I unfortunately cannot just delete that section on the configuration. Does any one have any ideas on a work around.
colors: { white: "#ffffff", lightPrimary: "#F4F7FE", blueSecondary: "#4318FF", brandLinear: "#868CFF", gray: { 50: "#F5F6FA", 100: "#EEF0F6", 200: "#DADEEC", 300: "#C9D0E3", 400: "#B0BBD5", 500: "#B5BED9", 600: "#A3AED0", 700: "#707eae", 800: "#2D396B", 900: "#1B2559", }, navy: { 50: "#d0dcfb", 100: "#aac0fe", 200: "#a3b9f8", 300: "#728fea", 400: "#3652ba", 500: "#1b3bbb", 600: "#24388a", 700: "#1B254B", 800: "#111c44", 900: "#0b1437", }, red: { 50: "#ee5d501a", 100: "#fee2e2", 200: "#fecaca", 300: "#fca5a5", 400: "#f87171", 500: "#f53939", 600: "#ea0606", 700: "#b91c1c", 800: "#991b1b", 900: "#7f1d1d", }, orange: { 50: "#fff7ed", 100: "#ffedd5", 200: "#fed7aa", 300: "#fdba74", 400: "#fb923c", 500: "#f97316", 600: "#ea580c", 700: "#c2410c", 800: "#9a3412", 900: "#7c2d12", }, amber: { 50: "#fffbeb", 100: "#fef3c7", 200: "#fde68a", 300: "#fcd34d", 400: "#fbbf24", 500: "#f59e0b", 600: "#d97706", 700: "#b45309", 800: "#92400e", 900: "#78350f", }, yellow: { 50: "#fefce8", 100: "#fef9c3", 200: "#fef08a", 300: "#fde047", 400: "#fbcf33", 500: "#eab308", 600: "#ca8a04", 700: "#a16207", 800: "#854d0e", 900: "#713f12", }, lime: { 50: "#f7fee7", 100: "#ecfccb", 200: "#d9f99d", 300: "#bef264", 400: "#98ec2d", 500: "#82d616", 600: "#65a30d", 700: "#4d7c0f", 800: "#3f6212", 900: "#365314", }, green: { 50: "#05cd991a", 100: "#dcfce7", 200: "#bbf7d0", 300: "#86efac", 400: "#4ade80", 500: "#22c55e", 600: "#17ad37", 700: "#15803d", 800: "#166534", 900: "#14532d", }, teal: { 50: "#f0fdfa", 100: "#ccfbf1", 200: "#99f6e4", 300: "#5eead4", 400: "#2dd4bf", 500: "#14b8a6", 600: "#0d9488", 700: "#0f766e", 800: "#115e59", 900: "#134e4a", }, cyan: { 50: "#ecfeff", 100: "#cffafe", 200: "#a5f3fc", 300: "#67e8f9", 400: "#21d4fd", 500: "#17c1e8", 600: "#0891b2", 700: "#0e7490", 800: "#155e75", 900: "#164e63", }, blue: { 50: "#eff6ff", 100: "#dbeafe", 200: "#bfdbfe", 300: "#93c5fd", 400: "#60a5fa", 500: "#3b82f6", 600: "#2152ff", 700: "#1d4ed8", 800: "#344e86", 900: "#00007d", }, indigo: { 50: "#eef2ff", 100: "#e0e7ff", 200: "#c7d2fe", 300: "#a5b4fc", 400: "#818cf8", 500: "#6366f1", 600: "#4f46e5", 700: "#4338ca", 800: "#3730a3", 900: "#312e81", }, purple: { 50: "#faf5ff", 100: "#f3e8ff", 200: "#e9d5ff", 300: "#d8b4fe", 400: "#c084fc", 500: "#a855f7", 600: "#9333ea", 700: "#7928ca", 800: "#6b21a8", 900: "#581c87", }, pink: { 50: "#fdf2f8", 100: "#fce7f3", 200: "#fbcfe8", 300: "#f9a8d4", 400: "#f472b6", 500: "#ff0080", 600: "#db2777", 700: "#be185d", 800: "#9d174d", 900: "#831843", }, brand: { 50: "#E9E3FF", 100: "#C0B8FE", 200: "#A195FD", 300: "#8171FC", 400: "#7551FF", 500: "#422AFB", 600: "#3311DB", 700: "#2111A5", 800: "#190793", 900: "#11047A", }, shadow: { 500: "rgba(112, 144, 176, 0.08)", }, transparent: "transparent", }, },
As a troubleshooting step I have disabled that section of code and it does work.
Any help would be grateful.
The text was updated successfully, but these errors were encountered: