diff --git a/src/app/features/project/project.const.ts b/src/app/features/project/project.const.ts
index 0d8dd6022e..18257ca21e 100644
--- a/src/app/features/project/project.const.ts
+++ b/src/app/features/project/project.const.ts
@@ -1,8 +1,9 @@
-import {GoogleTimeSheetExport, Project, SimpleSummarySettings} from './project.model';
+import {GoogleTimeSheetExport, Project, ProjectThemeCfg, SimpleSummarySettings} from './project.model';
 import {DEFAULT_ISSUE_PROVIDER_CFGS} from '../issue/issue.const';
 import {getYesterdaysDate} from '../../util/get-yesterdays-date';
 import {getWorklogStr} from '../../util/get-work-log-str';
 import {WorklogExportSettings, WorklogGrouping} from '../worklog/worklog.model';
+import {HueValue} from 'angular-material-css-vars';
 
 export const SIMPLE_SUMMARY_DEFAULTS: SimpleSummarySettings = {
   roundWorkTimeTo: null,
@@ -44,6 +45,15 @@ export const GOOGLE_TIME_SHEET_EXPORT_DEFAULTS: GoogleTimeSheetExport = {
   ]
 };
 
+export const DEFAULT_PROJECT_THEME: ProjectThemeCfg = {
+  isDarkTheme: false,
+  primary: '',
+  huePrimary: '500',
+  accent: '#ff4081',
+  hueAccent: '500',
+  warn: '#e11826',
+  hueWarn: '500',
+};
 
 export const DEFAULT_PROJECT: Project = {
   id: null,
@@ -53,6 +63,7 @@ export const DEFAULT_PROJECT: Project = {
   isReducedTheme: false,
   isArchived: false,
   timeWorkedWithoutBreak: null,
+  theme: DEFAULT_PROJECT_THEME,
   issueIntegrationCfgs: DEFAULT_ISSUE_PROVIDER_CFGS,
   advancedCfg: {
     googleTimeSheetExport: GOOGLE_TIME_SHEET_EXPORT_DEFAULTS,
@@ -73,8 +84,10 @@ export const FIRST_PROJECT: Project = {
   ...DEFAULT_PROJECT,
   id: DEFAULT_PROJECT_ID,
   title: 'Super Productivity',
-  themeColor: 'light-blue',
-  isDarkTheme: false,
   workStart: {},
   workEnd: {},
+  theme: {
+    ...DEFAULT_PROJECT_THEME,
+    primary: '#03a9f4',
+  }
 };
diff --git a/src/app/features/project/project.model.ts b/src/app/features/project/project.model.ts
index e07e634cdd..618b911d2e 100644
--- a/src/app/features/project/project.model.ts
+++ b/src/app/features/project/project.model.ts
@@ -8,6 +8,7 @@ import {MetricState} from '../metric/metric.model';
 import {ImprovementState} from '../metric/improvement/improvement.model';
 import {ObstructionState} from '../metric/obstruction/obstruction.model';
 import {WorklogExportSettings} from '../worklog/worklog.model';
+import {HueValue} from 'angular-material-css-vars';
 
 
 export type RoundTimeOption = '5M' | 'QUARTER' | 'HALF' | 'HOUR';
@@ -70,11 +71,24 @@ export type ProjectAdvancedCfg = Readonly<{
   worklogExportSettings: WorklogExportSettings;
 }>;
 
+export type ProjectThemeCfg = Readonly<{
+  isDarkTheme: boolean;
+  primary: string;
+  huePrimary: HueValue;
+  accent: string;
+  hueAccent: HueValue;
+  warn: string;
+  hueWarn: HueValue;
+}>;
+
 export interface ProjectBasicCfg {
   title: string;
-  themeColor: string;
-  isDarkTheme: boolean;
-  isReducedTheme: boolean;
+  /** @deprecated use new theme model instead. */
+  themeColor?: string;
+  /** @deprecated use new theme model instead. */
+  isDarkTheme?: boolean;
+  /** @deprecated use new theme model instead. */
+  isReducedTheme?: boolean;
   isArchived: boolean;
   timeWorkedWithoutBreak: number;
 }
@@ -90,6 +104,7 @@ export interface ProjectCopy extends ProjectBasicCfg {
   lastCompletedDay: string;
   breakTime: BreakTime;
   breakNr: BreakNr;
+  theme: ProjectThemeCfg;
 }
 
 export type Project = Readonly<ProjectCopy>;
@@ -114,7 +129,6 @@ export interface ProjectArchive {
   [key: string]: string;
 }
 
-
 export type ProjectCfgFormKey = ProjectAdvancedCfgKey | IssueProviderKey | 'basic';