github-starred/actual
2
0
Fork 0
mirror of https://github.com/actualbudget/actual.git synced 2026-03-21 15:36:50 -05:00
Code Issues 250 Packages Projects Releases 53 Wiki Activity

Add theming to charts and hence allowing custom themes on charts (#6909)

Browse Source 
* Add theming to charts and hence allowing custom themes on charts

* Removing additional color scales for charts.

* Fixed return fail over value.
This commit is contained in:
Karim Kodera
2026-02-17 22:00:21 +02:00
committed by GitHub
parent d605d59d01
commit c7efb61b84
7 changed files with 71 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
packages/desktop-client/src/components/reports/chart-theme.ts
View File

@@ -2,26 +2,19 @@ import { useIsTestEnv } from '@desktop-client/hooks/useIsTestEnv';
export function getColorScale(name: string): string[] {
const scales: Record<string, string[]> = {
grayscale: ['#cccccc', '#969696', '#636363', '#252525'],
qualitative: [
'#45B29D', //Dark Teal
'#EFC94C', //Yellow
'#E27A3F', //Orange
'#DF5A49', //Light Red
'#5F91B8', //Blue
'#E2A37F', //Peach
'#55DBC1', //Light Teal
'#EFDA97', //Light Yellow
'#DF948A', //Light Red
'var(--color-chartQual1)', // Dark Teal
'var(--color-chartQual2)', // Yellow
'var(--color-chartQual3)', // Orange
'var(--color-chartQual4)', // Light Red
'var(--color-chartQual5)', // Blue
'var(--color-chartQual6)', // Peach
'var(--color-chartQual7)', // Light Teal
'var(--color-chartQual8)', // Light Yellow
'var(--color-chartQual9)', // Light Red
],
heatmap: ['#428517', '#77D200', '#D6D305', '#EC8E19', '#C92B05'],
warm: ['#940031', '#C43343', '#DC5429', '#FF821D', '#FFAF55'],
cool: ['#2746B9', '#0B69D4', '#2794DB', '#31BB76', '#60E83B'],
red: ['#FCAE91', '#FB6A4A', '#DE2D26', '#A50F15', '#750B0E'],
blue: ['#002C61', '#004B8F', '#006BC9', '#3795E5', '#65B4F4'],
green: ['#354722', '#466631', '#649146', '#8AB25C', '#A9C97E'],
};
return name ? scales[name] : scales.grayscale;
return name ? scales[name] : scales.qualitative;
}
export function useRechartsAnimation(defaults?: {

11
packages/desktop-client/src/style/palette.ts
View File

@@ -83,3 +83,14 @@ export const black = '#000000';
export const hover = '#fafafa';
export const border = '#e8ecf0';
export const selected = '#b3d9ff';
// Chart colors - Qualitative scale (9 colors)
export const chartQual1 = '#45B29D'; // Dark Teal
export const chartQual2 = '#EFC94C'; // Yellow
export const chartQual3 = '#E27A3F'; // Orange
export const chartQual4 = '#DF5A49'; // Light Red
export const chartQual5 = '#5F91B8'; // Blue
export const chartQual6 = '#E2A37F'; // Peach
export const chartQual7 = '#55DBC1'; // Light Teal
export const chartQual8 = '#EFDA97'; // Light Yellow
export const chartQual9 = '#DF948A'; // Light Red

11
packages/desktop-client/src/style/themes/dark.ts
View File

@@ -236,3 +236,14 @@ export const tooltipBorder = colorPalette.navy700;
export const calendarCellBackground = colorPalette.navy900;
export const overlayBackground = 'rgba(0, 0, 0, 0.3)';
// Chart colors - Qualitative scale (9 colors)
export const chartQual1 = colorPalette.chartQual1;
export const chartQual2 = colorPalette.chartQual2;
export const chartQual3 = colorPalette.chartQual3;
export const chartQual4 = colorPalette.chartQual4;
export const chartQual5 = colorPalette.chartQual5;
export const chartQual6 = colorPalette.chartQual6;
export const chartQual7 = colorPalette.chartQual7;
export const chartQual8 = colorPalette.chartQual8;
export const chartQual9 = colorPalette.chartQual9;

11
packages/desktop-client/src/style/themes/development.ts
View File

@@ -236,3 +236,14 @@ export const tooltipBorder = colorPalette.navy150;
export const calendarCellBackground = colorPalette.navy100;
export const overlayBackground = 'rgba(0, 0, 0, 0.3)';
// Chart colors - Qualitative scale (9 colors)
export const chartQual1 = colorPalette.chartQual1;
export const chartQual2 = colorPalette.chartQual2;
export const chartQual3 = colorPalette.chartQual3;
export const chartQual4 = colorPalette.chartQual4;
export const chartQual5 = colorPalette.chartQual5;
export const chartQual6 = colorPalette.chartQual6;
export const chartQual7 = colorPalette.chartQual7;
export const chartQual8 = colorPalette.chartQual8;
export const chartQual9 = colorPalette.chartQual9;

11
packages/desktop-client/src/style/themes/light.ts
View File

@@ -238,3 +238,14 @@ export const tooltipBorder = colorPalette.navy150;
export const calendarCellBackground = colorPalette.navy100;
export const overlayBackground = 'rgba(0, 0, 0, 0.3)';
// Chart colors - Qualitative scale (9 colors)
export const chartQual1 = colorPalette.chartQual1;
export const chartQual2 = colorPalette.chartQual2;
export const chartQual3 = colorPalette.chartQual3;
export const chartQual4 = colorPalette.chartQual4;
export const chartQual5 = colorPalette.chartQual5;
export const chartQual6 = colorPalette.chartQual6;
export const chartQual7 = colorPalette.chartQual7;
export const chartQual8 = colorPalette.chartQual8;
export const chartQual9 = colorPalette.chartQual9;

11
packages/desktop-client/src/style/themes/midnight.ts
View File

@@ -238,3 +238,14 @@ export const tooltipBorder = colorPalette.gray600;
export const calendarCellBackground = colorPalette.navy900;
export const overlayBackground = 'rgba(0, 0, 0, 0.3)';
// Chart colors - Qualitative scale (9 colors)
export const chartQual1 = colorPalette.chartQual1;
export const chartQual2 = colorPalette.chartQual2;
export const chartQual3 = colorPalette.chartQual3;
export const chartQual4 = colorPalette.chartQual4;
export const chartQual5 = colorPalette.chartQual5;
export const chartQual6 = colorPalette.chartQual6;
export const chartQual7 = colorPalette.chartQual7;
export const chartQual8 = colorPalette.chartQual8;
export const chartQual9 = colorPalette.chartQual9;