bknd/app/src/ui/main.css

@import "tailwindcss";

@custom-variant dark (&:where(.dark, .dark *));

#bknd-admin,
.bknd-admin {
   --color-primary: rgb(9 9 11); /* zinc-950 */
   --color-background: rgb(250 250 250); /* zinc-50 */
   --color-muted: rgb(228 228 231); /* ? */
   --color-darkest: rgb(0 0 0); /* black */
   --color-lightest: rgb(255 255 255); /* white */

   @mixin light {
      --mantine-color-body: rgb(250 250 250);
   }
   @mixin dark {
      --mantine-color-body: rgb(9 9 11);
   }

   table {
      font-size: inherit;
   }
}

.dark,
#bknd-admin.dark,
.bknd-admin.dark {
   --color-primary: rgb(250 250 250); /* zinc-50 */
   --color-background: rgb(30 31 34);
   --color-muted: rgb(47 47 52);
   --color-darkest: rgb(255 255 255); /* white */
   --color-lightest: rgb(24 24 27); /* black */
}

@theme {
   --color-primary: var(--color-primary);
   --color-background: var(--color-background);
   --color-muted: var(--color-muted);
   --color-darkest: var(--color-darkest);
   --color-lightest: var(--color-lightest);
}

#bknd-admin {
   @apply bg-background text-primary overflow-hidden h-dvh w-dvw;

   ::selection {
      @apply bg-muted;
   }

   input {
      &::selection {
         @apply bg-primary/15;
      }
   }
}

body,
#bknd-admin {
   @apply flex flex-1 flex-col h-dvh w-dvw;
}

.link {
   @apply active:translate-y-px;
}

.img-responsive {
   @apply max-h-full w-auto;
}

#bknd-admin,
.bknd-admin {
   /* Chrome, Edge, and Safari */
   & *::-webkit-scrollbar {
      @apply w-1;
      &:horizontal {
         @apply h-px;
      }
   }

   & *::-webkit-scrollbar-track {
      @apply bg-transparent w-1;
   }

   & *::-webkit-scrollbar-thumb {
      @apply bg-primary/25;
   }
}