better graph colors

Author: ImShyMike

frontend/package-lock.json

@@ -1,19 +1,53 @@
 import type { UsageStat } from '$lib/types/dashboard';
 import type { ApexOptions } from 'apexcharts';
 
+const FALLBACK_COLORS: Record<'light' | 'dark', string[]> = {
+	dark: [
+		'#f5c2e7',
+		'#cba6f7',
+		'#f38ba8',
+		'#fab387',
+		'#f9e2af',
+		'#a6e3a1',
+		'#94e2d5',
+		'#89dceb',
+		'#74c7ec',
+		'#89b4fa',
+		'#b4befe'
+	],
+	light: [
+		'#ea76cb',
+		'#8839ef',
+		'#d20f39',
+		'#fe640b',
+		'#df8e1d',
+		'#40a02b',
+		'#179299',
+		'#04a5e5',
+		'#209fb5',
+		'#1e66f5',
+		'#7287fd'
+	]
+};
+
+const resolveColors = (colors: string[], theme: 'light' | 'dark') =>
+	colors.length > 0 ? colors : FALLBACK_COLORS[theme];
+
 export function createPieChartOptions(
 	data: UsageStat[],
 	colors: string[],
 	theme: 'light' | 'dark' = 'dark'
 ): ApexOptions {
 	const textColor = theme === 'dark' ? '#E6EEF3' : '#111827';
 	const gridBorderColor = theme === 'dark' ? 'rgba(255,255,255,0.06)' : 'rgba(0,0,0,0.08)';
+	const resolvedColors = resolveColors(colors, theme);
 	return {
 		series: data.map((item) => item.total_seconds),
 		chart: {
 			foreColor: textColor,
 			type: 'pie',
 			height: 350,
+			background: 'transparent',
 			animations: {
 				enabled: true,
 				speed: 800
@@ -23,7 +57,12 @@ export function createPieChartOptions(
 		dataLabels: {
 			enabled: false
 		},
-		colors: colors,
+		colors: resolvedColors,
+		fill: {
+			type: 'solid',
+			colors: resolvedColors,
+			opacity: 1
+		},
 		legend: {
 			position: 'right',
 			offsetY: 0,
@@ -71,6 +110,7 @@ export function createBarChartOptions(
 	const textColor = theme === 'dark' ? '#E6EEF3' : '#111827';
 	const gridBorderColor = theme === 'dark' ? 'rgba(255,255,255,0.06)' : 'rgba(0,0,0,0.08)';
 	const strokeColor = theme === 'dark' ? '#ffffff' : '#000000';
+	const resolvedColors = resolveColors(colors, theme);
 	return {
 		series: [
 			{
@@ -85,6 +125,7 @@ export function createBarChartOptions(
 			foreColor: textColor,
 			type: 'bar',
 			height: 350,
+			background: 'transparent',
 			animations: {
 				enabled: true,
 				speed: 800
@@ -100,14 +141,19 @@ export function createBarChartOptions(
 				distributed: true
 			}
 		},
-		colors: colors,
+		colors: resolvedColors,
 		dataLabels: {
 			enabled: false
 		},
 		stroke: {
 			width: 1,
 			colors: [strokeColor]
 		},
+		fill: {
+			type: 'solid',
+			colors: resolvedColors,
+			opacity: 1
+		},
 		xaxis: {
 			categories: data.map((item) => item.name),
 			labels: {
@@ -166,6 +212,7 @@ export function createDateBarChartOptions(
 	const textColor = theme === 'dark' ? '#E6EEF3' : '#111827';
 	const gridBorderColor = theme === 'dark' ? 'rgba(255,255,255,0.06)' : 'rgba(0,0,0,0.08)';
 	const strokeColor = theme === 'dark' ? '#ffffff' : '#000000';
+	const resolvedColors = resolveColors(colors, theme);
 	return {
 		series: [
 			{
@@ -180,6 +227,7 @@ export function createDateBarChartOptions(
 			foreColor: textColor,
 			type: 'bar',
 			height: 350,
+			background: 'transparent',
 			animations: {
 				enabled: true,
 				speed: 800
@@ -195,14 +243,19 @@ export function createDateBarChartOptions(
 				distributed: true
 			}
 		},
-		colors: colors,
+		colors: resolvedColors,
 		dataLabels: {
 			enabled: false
 		},
 		stroke: {
 			width: 1,
 			colors: [strokeColor]
 		},
+		fill: {
+			type: 'solid',
+			colors: resolvedColors,
+			opacity: 1
+		},
 		xaxis: {
 			categories: data.map((item) => item.date),
 			labels: {

frontend/src/lib/utils/charts.ts

@@ -77,7 +77,7 @@
 		<div class="flex text-text items-center justify-center gap-3 mb-4">
 			<h1 class="text-5xl font-bold">rustytime</h1>
 		</div>
-		<p class="text-xl text-subtext0 px-1">Blazingly fast time tracking for developers.</p>
+		<p class="text-xl text-ctp-subtext1 dark:text-subtext0 px-1">Blazingly fast time tracking for developers.</p>
 	</header>
 
 	<!-- Main Content -->
@@ -136,7 +136,7 @@
 			<div class="text-center">
 				<button
 					onclick={auth.login}
-					class="cursor-pointer bg-ctp-surface1 text-ctp-text hover:bg-ctp-surface0 font-semibold py-4 px-8 rounded-lg flex items-center gap-3 mx-auto"
+					class="cursor-pointer bg-ctp-surface2 text-ctp-text hover:bg-ctp-surface1 font-semibold py-4 px-8 rounded-lg flex items-center gap-3 mx-auto"
 				>
 					<LucideGithub class="min-w-6 min-h-6" />
 					Sign in with GitHub

frontend/src/routes/+page.svelte

@@ -61,4 +61,8 @@ diesel::table! {
 diesel::joinable!(heartbeats -> users (user_id));
 diesel::joinable!(sessions -> users (user_id));
 
-diesel::allow_tables_to_appear_in_same_query!(heartbeats, sessions, users,);
+diesel::allow_tables_to_appear_in_same_query!(
+    heartbeats,
+    sessions,
+    users,
+);