❌ Dark Mode colours not working correctly #6340

imprisonedmind · 2025-01-13T08:35:46Z

imprisonedmind
Jan 13, 2025

Sidebar Block

In dark mode, colours are not displaying correctly.
Text colours in the side bar and table are too white.
as well as the divider line in the side bar and divider lines in the table element.

layout.tsx

import { ReactNode } from "react";
import "../styles/globals.css";
import { SidebarInset, SidebarProvider } from "@/components/ui/sidebar";
import { AppSidebar } from "@/app/components/sidebar/app-sidebar";
import Navbar from "@/app/components/navbar/navbar";
import { ThemeProvider } from "next-themes";

export const metadata = {
  title: "Next.js",
  description: "Generated by Next.js",
};

export default function RootLayout({ children }: { children: ReactNode }) {
  return (
    <html lang="en">
      <body>
        <ThemeProvider enableSystem={true} attribute="class">
          <SidebarProvider>
            <AppSidebar />
            <SidebarInset>
              <Navbar />
              <div className={"h-[calc(100svh-4rem)] w-full overflow-y-scroll"}>
                {children}
              </div>
            </SidebarInset>
          </SidebarProvider>
        </ThemeProvider>
      </body>
    </html>
  );
}

profile.tsx

export default async function Page() {
  const { user, memberships } = await getFullProfile();

  return (
    <div className={cn("grid w-full grid-cols-4 gap-4 p-4")}>
      <Card className={"col-span-6 flex flex-col"}>
        <div className={"flex justify-between border-b p-4"}>
          <div className={"flex flex-row items-center gap-2"}>
            <UserProfile className={"!size-10 border"} />
            <div className={"flex flex-col"}>
              <p
                className={"text-sm font-medium capitalize"}
              >{`${user.firstName} ${user.lastName}`}</p>
              <p className={"text-xs"}>{`${user.email}`}</p>
            </div>
          </div>
          <Button variant={"outline"}>Edit Profile</Button>
        </div>

        <Table className={"h-full w-full"}>
          <TableBody>
            <ProfileDataTableElement
              title={"Contact Number"}
              value={user.contactNumber}
            />
            <ProfileDataTableElement
              title={"Date Joined"}
              value={formatDateTime(user.dateJoined)}
            />
            <ProfileDataTableElement
              title={"Last Login"}
              value={formatDateTime(user.lastLogin)}
            />
            <ProfileDataTableElement
              title={"Email Verified"}
              value={<State state={user.emailVerified ? "yes" : "no"} />}
            />
            {user.isStaff && (
              <ProfileDataTableElement
                title={"Staff Member"}
                value={<State state={user.isStaff ? "yes" : "no"} />}
              />
            )}
            {user.isSuperuser && (
              <ProfileDataTableElement
                title={"Super User"}
                value={<State state={user.isSuperuser ? "yes" : "no"} />}
              />
            )}
          </TableBody>
        </Table>
      </Card>
    </div>
  );
}

export const ProfileDataTableElement: FC<ProfileDataTableElementProps> = ({
  title,
  value,
}) => {
  return (
    <TableRow>
      <TableCell className="text-xs">{title}</TableCell>
      <TableCell className="flex justify-end text-right text-xs uppercase">
        {value}
      </TableCell>
    </TableRow>
  );
};

module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx}",
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
    "./lib/**/*.{js,ts,jsx,tsx}",
  ],
  darkMode: ["class"],
  theme: {
    extend: {
      gridTemplateRows: {
        inline: "4rem",
        stacked: "4rem 4rem",
        "stacked-open": "4rem",
      },
      fontFamily: {
        sans: [
          "Inter",
          "-apple-system",
          "BlinkMacSystemFont",
          "Segoe UI",
          "Roboto",
          "Oxygen",
          "Ubuntu",
          "Cantarell",
          "Fira Sans",
          "Droid Sans",
          "Helvetica Neue",
          "sans-serif",
        ],
      },
      colors: {
        "dark-primary": "#121212",
        "dark-secondary": "#1E1E1E",
        "dark-tertiary": "#343434",
        "dark-quaternary": "#404040",
        "dark-quinary": "#4B4B4B",
        "dark-text": "#BDC1C6",
        secondary: "#9F9F9F",
        primary: "#D6D6D6",
        tertiary: "#1C3CCC",
        "chart-unknown": "#e5e7eb",
        "chart-alarm": "#fdba74",
        "chart-online": "#86efac",
        "chart-offline": "#fca5a5",
        "chart-ack": "#93c5fd",
        "chart-activated": "#a5b4fc",
        "dark-chart-unknown": "rgba(107,114,128,0.7)",
        "dark-chart-alarm": "rgba(249,115,22,0.7)",
        "dark-chart-online": "rgba(34,197,94,0.7)",
        "dark-chart-offline": "rgba(239,68,68,0.7)",
        "dark-chart-ack": "rgba(59,130,246,0.7)",
        "chart-created": "#cbd5e1",
        "chart-registered": "#93c5fd",
        "chart-ready": "#7dd3fc",
        "chart-active": "#86efac",
        "chart-transit": "#fdba74",
        "chart-deactivated": "#fca5a5",
        "chart-deleted": "#ef4444",
        "dark-chart-created": "rgba(107,114,128,0.7)",
        "dark-chart-registered": "rgba(59,130,246,0.7)",
        "dark-chart-ready": "rgba(14,165,233,0.7)",
        "dark-chart-active": "rgba(34,197,94,0.7)",
        "dark-chart-transit": "rgba(249,115,22,0.7)",
        "dark-chart-deactivated": "rgba(239,68,68,0.7)",
        "dark-chart-deleted": "rgba(185,28,28,0.7)",
        sidebar: {
          DEFAULT: "hsl(var(--sidebar-background))",
          foreground: "hsl(var(--sidebar-foreground))",
          primary: "hsl(var(--sidebar-primary))",
          "primary-foreground": "hsl(var(--sidebar-primary-foreground))",
          accent: "hsl(var(--sidebar-accent))",
          "accent-foreground": "hsl(var(--sidebar-accent-foreground))",
          border: "hsl(var(--sidebar-border))",
          ring: "hsl(var(--sidebar-ring))",
        },
      },
      borderRadius: {
        large: "30px",
        lg: "var(--radius)",
        md: "calc(var(--radius) - 2px)",
        sm: "calc(var(--radius) - 4px)",
      },
      dropShadow: {
        large: "0px 0px 23px 4px rgba(227,13,13,0.84)",
      },
      transitionProperty: {
        width: "width",
        col: "col-span, grid, grid-col",
      },
      scale: {
        35: ".35",
      },
      height: {
        500: "500px",
        600: "600px",
        700: "700px",
        800: "800px",
        900: "900px",
        "calc-60": "calc(100% - 60px)",
        "nav-content": "calc(100vh - 131px)",
        "nav-content-small": "calc(100vh - 135px)",
        "alarm-wrapper": "calc(100vh - 202px)",
        "site-alarm-wrapper": "calc(100vh - 129px)",
        "main-content": "100%",
        "data-wrapper": "calc(100vh - 131px)",
        "data-wrapper-mobile": "calc(100vh - 192px)",
        "profile-wrapper": "calc(100vh - 96px)",
      },
      animation: {
        "ping-slow": "ping 3s ease-in-out infinite ",
        "spin-slow": "spin 2s ease-in-out infinite",
      },
      border: {
        1: "1px",
        2: "2px",
        5: "5px",
      },
      screens: {
        standalone: {
          raw: "(display-mode: standalone)",
        },
      },
      overflow: {
        wrap: "break-word",
      },
    },
  },
  variants: {
    extend: {
      cursor: ["hover"],
      padding: ["hover"],
      scale: ["hover"],
      transform: ["hover"],
      fontWeight: ["hover"],
    },
  },
  plugins: [require("tailwindcss-animate")],
};

@tailwind base;
@tailwind components;
@tailwind utilities;


@font-face {
    font-family: Inter;
    src: url('../fonts/Inter.ttf');
}

html, body {
    padding: 0;
    margin: 0;
    overflow-y: hidden;
}

h4 {
    font-family: OpenSans;
}

p {
    font-weight: normal;
}

a {
    color: inherit;
    text-decoration: none;
}

* {
    box-sizing: border-box;
}

/*CORNER BOX*/
::-webkit-scrollbar-corner {
    background: rgba(0, 0, 0, 0);
}


/* width */
::-webkit-scrollbar {
    width: 7px;
    height: 5px;
    z-index: 50 !important;
}

/* Track */
::-webkit-scrollbar-track {
    @apply bg-neutral-100 rounded-t-full dark:bg-dark-tertiary;
}

/* Handle */
::-webkit-scrollbar-thumb {
    @apply bg-gray-300 rounded-full dark:bg-dark-quaternary;
}


/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    @apply bg-dark-secondary cursor-auto dark:bg-dark-quinary;
}

.dark ::-webkit-scrollbar-thumb:hover {
    @apply bg-dark-quinary;
}

#logoFile {
    @apply hidden
}

@layer base {
    :root {
        --background: 0 0% 100%;
        --foreground: 240 10% 3.9%;
        --card: 0 0% 100%;
        --card-foreground: 240 10% 3.9%;
        --popover: 0 0% 100%;
        --popover-foreground: 240 10% 3.9%;
        --primary: 240 5.9% 10%;
        --primary-foreground: 0 0% 98%;
        --secondary: 240 4.8% 95.9%;
        --secondary-foreground: 240 5.9% 10%;
        --muted: 240 4.8% 95.9%;
        --muted-foreground: 240 3.8% 46.1%;
        --accent: 240 4.8% 95.9%;
        --accent-foreground: 240 5.9% 10%;
        --destructive: 0 84.2% 60.2%;
        --destructive-foreground: 0 0% 98%;
        --border: 240 5.9% 90%;
        --input: 240 5.9% 90%;
        --ring: 240 5.9% 10%;
        --radius: 0.3rem;
        --chart-1: 12 76% 61%;
        --chart-2: 173 58% 39%;
        --chart-3: 197 37% 24%;
        --chart-4: 43 74% 66%;
        --chart-5: 27 87% 67%;
        --sidebar-background: 0 0% 98%;
        --sidebar-foreground: 240 5.3% 26.1%;
        --sidebar-primary: 240 5.9% 10%;
        --sidebar-primary-foreground: 0 0% 98%;
        --sidebar-accent: 240 4.8% 95.9%;
        --sidebar-accent-foreground: 240 5.9% 10%;
        --sidebar-border: 220 13% 91%;
        --sidebar-ring: 217.2 91.2% 59.8%;
    }

    .dark {
        --background: 240 10% 3.9%;
        --foreground: 0 0% 98%;
        --card: 240 10% 3.9%;
        --card-foreground: 0 0% 98%;
        --popover: 240 10% 3.9%;
        --popover-foreground: 0 0% 98%;
        --primary: 0 0% 98%;
        --primary-foreground: 240 5.9% 10%;
        --secondary: 240 3.7% 15.9%;
        --secondary-foreground: 0 0% 98%;
        --muted: 240 3.7% 15.9%;
        --muted-foreground: 240 5% 64.9%;
        --accent: 240 3.7% 15.9%;
        --accent-foreground: 0 0% 98%;
        --destructive: 0 62.8% 30.6%;
        --destructive-foreground: 0 0% 98%;
        --border: 240 3.7% 15.9%;
        --input: 240 3.7% 15.9%;
        --ring: 240 4.9% 83.9%;
        --chart-1: 220 70% 50%;
        --chart-2: 160 60% 45%;
        --chart-3: 30 80% 55%;
        --chart-4: 280 65% 60%;
        --chart-5: 340 75% 55%;
        --sidebar-background: 240 5.9% 10%;
        --sidebar-foreground: 240 4.8% 95.9%;
        --sidebar-primary: 224.3 76.3% 48%;
        --sidebar-primary-foreground: 0 0% 100%;
        --sidebar-accent: 240 3.7% 15.9%;
        --sidebar-accent-foreground: 240 4.8% 95.9%;
        --sidebar-border: 240 3.7% 15.9%;
        --sidebar-ring: 217.2 91.2% 59.8%;
    }
}

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

❌ Dark Mode colours not working correctly #6340

{{title}}

Replies: 0 comments

Select a reply

❌ Dark Mode colours not working correctly #6340

imprisonedmind Jan 13, 2025

Sidebar Block

Replies: 0 comments

imprisonedmind
Jan 13, 2025