give dark mode some love 🖤

apps/dashboard/src/components/overview/overview-live-histogram.tsx

@@ -81,7 +81,7 @@ export function OverviewLiveHistogram({
         {staticArray.map((percent, i) => (
           <div
             key={i}
-            className="flex-1 animate-pulse rounded bg-slate-200 dark:bg-slate-800"
+            className="bg-def-200 flex-1 animate-pulse rounded"
             style={{ height: `${percent}%` }}
           />
         ))}
@@ -102,7 +102,7 @@ export function OverviewLiveHistogram({
               <div
                 className={cn(
                   'flex-1 rounded transition-all ease-in-out hover:scale-110',
-                  minute.count === 0 ? 'bg-slate-200' : 'bg-blue-600'
+                  minute.count === 0 ? 'bg-def-200' : 'bg-highlight'
                 )}
                 style={{
                   height:

apps/dashboard/src/components/overview/overview-metrics.tsx

@@ -199,7 +199,7 @@ export default function OverviewMetrics({ projectId }: OverviewMetricsProps) {
               key={index}
               className={cn(
                 'col-span-2 flex-1 p-4 shadow-[0_0_0_0.5px] shadow-border md:col-span-1',
-                index === metric && 'bg-slate-50'
+                index === metric && 'bg-def-100'
               )}
               onClick={() => {
                 setMetric(index);