diff --git a/src/components/column/card.tsx b/src/components/column/card.tsx
index 96df98f..ca943bf 100644
--- a/src/components/column/card.tsx
+++ b/src/components/column/card.tsx
@@ -44,9 +44,9 @@ export const CardWrapper = forwardRef<HTMLDivElement, ItemsProps>(({ id, isDragg
       ref={ref}
       className={clsx(
         "flex flex-col h-500px rounded-2xl p-4 cursor-default",
-        "bg-op-40 backdrop-blur-5 transition-opacity-300",
+        "backdrop-blur-5 transition-opacity-300",
         isDragged && "op-50",
-        `bg-${sources[id].color}`,
+        `bg-${sources[id].color}-500 dark:bg-${sources[id].color} bg-op-40!`,
       )}
       style={{
         transformOrigin: "50% 50%",
diff --git a/src/components/column/dnd.tsx b/src/components/column/dnd.tsx
index 2968c86..d3b854e 100644
--- a/src/components/column/dnd.tsx
+++ b/src/components/column/dnd.tsx
@@ -136,9 +136,8 @@ function DndWrapper({ items, setItems, children }: PropsWithChildren<DndProps>)
 function CardOverlay({ id }: { id: SourceID }) {
   return (
     <div className={clsx(
-      "flex flex-col rounded-2xl p-4",
-      "backdrop-blur-5 bg-op-40",
-      `bg-${sources[id].color}`,
+      "flex flex-col rounded-2xl p-4 backdrop-blur-5",
+      `bg-${sources[id].color}-500 dark:bg-${sources[id].color} bg-op-40!`,
     )}
     >
       <div className={clsx("flex justify-between mx-2 items-center")}>
diff --git a/src/components/header/menu.tsx b/src/components/header/menu.tsx
index a6c8a3f..7f4d643 100644
--- a/src/components/header/menu.tsx
+++ b/src/components/header/menu.tsx
@@ -52,7 +52,7 @@ export function Menu() {
             id="dropdown-menu"
             className={clsx([
               "w-200px",
-              "bg-primary p-1px backdrop-blur-5 bg-op-70! rounded-lg",
+              "bg-primary p-2px backdrop-blur-5 bg-op-70! rounded-lg",
             ])}
             initial={{
               scale: 0.9,
diff --git a/uno.config.ts b/uno.config.ts
index ae60665..c539fff 100644
--- a/uno.config.ts
+++ b/uno.config.ts
@@ -14,14 +14,11 @@ export default defineConfig({
   rules: [
     [/^sprinkle-(.+)$/, ([_, d], { theme }) => {
       // @ts-expect-error >_<
-      if (theme.colors[d]) {
-        // @ts-expect-error >_<
-        const hex: any = theme.colors[d]?.[400]
-        if (hex) {
-          return {
-            "background-image": `radial-gradient(ellipse 80% 80% at 50% -30%,
+      const hex: any = theme.colors?.[d]?.[400]
+      if (hex) {
+        return {
+          "background-image": `radial-gradient(ellipse 80% 80% at 50% -30%,
          rgba(${hex2rgba(hex)?.join(", ")}, 0.3), rgba(255, 255, 255, 0));`,
-          }
         }
       }
     }],
@@ -35,11 +32,14 @@ export default defineConfig({
   ],
   shortcuts: {
     "color-base": "color-neutral-800 dark:color-neutral-300",
-    "bg-base": "bg-white dark:bg-dark-600",
+    "bg-base": "bg-zinc-50 dark:bg-dark-600",
     "btn": "op50 hover:op85",
   },
   safelist: [
-    ...["bg", "color", "border", "sprinkle", "shadow"].map(t => [...Object.values(sources)].map(c => `${t}-${c.color}`)).flat(1),
+    ...[...new Set(Object.values(sources).map(k => k.color))].map(k =>
+      `bg-${k} color-${k} border-${k} sprinkle-${k} shadow-${k}
+       bg-${k}-500 color-${k}-500
+       dark:bg-${k} dark:color-${k}`.trim().split(/\s+/)).flat(),
   ],
   extendTheme: (theme) => {
     // @ts-expect-error >_<