V1.5-1.6: Theme Customization

Learn how to customize the look and feel of your calendar with CSS variables.

Default Black theme

image 
:root {
  /* Light mode colors */
  --color-background: rgb(255 255 255);
  --color-foreground: rgb(46 46 46);
  --color-hover: rgb(245 245 245);
  --color-border: rgb(229 229 229);
  --color-card: rgb(255 255 255);
  --color-card-foreground: rgb(46 46 46);
  --color-muted: rgb(243 244 246);
  --color-muted-foreground: rgb(107 114 128);

  /* Theme Colors */
  --color-primary: rgb(46 46 46);
  --color-primary-foreground: rgb(255 255 255);
  --color-secondary: rgb(100 116 139);
  --color-secondary-foreground: rgb(255 255 255);

  /* Destructive */
  --color-destructive: rgb(212 36 34);
  --color-destructive-foreground: rgb(255 255 255);
}

.dark {
  /* Dark mode colors */
  --color-background: rgb(21 21 21);
  --color-hover: rgb(28 28 28);
  --color-foreground: rgb(229 229 229);
  --color-card: rgb(31 41 55);
  --color-card-foreground: rgb(229 229 229);
  --color-border: rgb(56 56 56);
  --color-muted: rgb(55 65 81);
  --color-muted-foreground: rgb(156 163 175);

  --color-primary: rgb(229 229 229);
  --color-primary-foreground: rgb(23 23 23);
  --color-secondary: rgb(156 163 175);
  --color-secondary-foreground: rgb(23 23 23);

  /* Destructive */
  --color-destructive: rgb(147 70 69);
  --color-destructive-foreground: rgb(254 242 242);
}

Mac Calendar theme

image 
/* Light mode - Mac Calendar style */
:root {
  --color-background: rgb(255 255 255);
  --color-foreground: rgb(46 46 46);
  --color-hover: rgb(255 229 229);
  --color-border: rgb(240 240 240);
  --color-card: rgb(255 255 255);
  --color-card-foreground: rgb(46 46 46);
  --color-muted: rgb(249 242 242);
  --color-muted-foreground: rgb(169 68 66);

  /* Theme Colors */
  --color-primary: rgb(212 36 34);
  --color-primary-foreground: rgb(255 255 255);
  --color-secondary: rgb(242 139 130);
  --color-secondary-foreground: rgb(23 23 23);

  /* Destructive */
  --color-destructive: rgb(255 255 255);
  --color-destructive-foreground: rgb(23 23 23);
}

/* Dark mode */
.dark {
  --color-background: rgb(28 28 28);
  --color-hover: rgb(46 28 28);
  --color-foreground: rgb(245 245 245);
  --color-card: rgb(42 42 42);
  --color-card-foreground: rgb(245 245 245);
  --color-border: rgb(58 58 58);
  --color-muted: rgb(60 28 28);
  --color-muted-foreground: rgb(242 139 130);

  --color-primary: rgb(255 82 82);
  --color-primary-foreground: rgb(23 23 23);
  --color-secondary: rgb(255 138 128);
  --color-secondary-foreground: rgb(23 23 23);

  /* Destructive */
  --color-destructive: rgb(255 255 255);
  --color-destructive-foreground: rgb(23 23 23);
}

Ant Design Theme

image 
/* Light mode - Ant Design style */
:root {
  --color-background: rgb(255 255 255);
  --color-foreground: rgb(31 31 31);
  --color-hover: rgb(230 247 255); /* light blue hover */
  --color-border: rgb(217 217 217);
  --color-card: rgb(255 255 255);
  --color-card-foreground: rgb(31 31 31);
  --color-muted: rgb(245 245 245);
  --color-muted-foreground: rgb(140 140 140);

  /* Theme Colors */
  --color-primary: rgb(24 144 255); /* Ant Design blue-6 */
  --color-primary-foreground: rgb(255 255 255);
  --color-secondary: rgb(64 169 255); /* lighter blue */
  --color-secondary-foreground: rgb(255 255 255);

  /* Destructive */
  --color-destructive: rgb(255 77 79); /* Ant Design red-6 */
  --color-destructive-foreground: rgb(255 255 255);
}

/* Dark mode */
.dark {
  --color-background: rgb(20 20 20);
  --color-hover: rgb(10 61 102); /* darker blue hover */
  --color-foreground: rgb(229 229 229);
  --color-card: rgb(31 31 31);
  --color-card-foreground: rgb(229 229 229);
  --color-border: rgb(48 48 48);
  --color-muted: rgb(38 38 38);
  --color-muted-foreground: rgb(140 140 140);

  --color-primary: rgb(64 169 255);
  --color-primary-foreground: rgb(23 23 23);
  --color-secondary: rgb(105 192 255);
  --color-secondary-foreground: rgb(23 23 23);

  --color-destructive: rgb(255 77 79);
  --color-destructive-foreground: rgb(254 242 242);
}

Material Design Theme

image 
/* Light mode - Material Design style */
:root {
  --color-background: rgb(255 255 255);
  --color-foreground: rgb(33 33 33);
  --color-hover: rgb(224 247 250); /* light cyan hover */
  --color-border: rgb(224 224 224);
  --color-card: rgb(255 255 255);
  --color-card-foreground: rgb(33 33 33);
  --color-muted: rgb(240 240 240);
  --color-muted-foreground: rgb(117 117 117);

  /* Theme Colors */
  --color-primary: rgb(76 175 80); /* green-500 */
  --color-primary-foreground: rgb(255 255 255);
  --color-secondary: rgb(255 152 0); /* orange-500 */
  --color-secondary-foreground: rgb(255 255 255);

  /* Destructive */
  --color-destructive: rgb(244 67 54); /* red-500 */
  --color-destructive-foreground: rgb(255 255 255);
}

/* Dark mode */
.dark {
  --color-background: rgb(18 18 18);
  --color-hover: rgb(27 94 32); /* dark green hover */
  --color-foreground: rgb(224 224 224);
  --color-card: rgb(30 30 30);
  --color-card-foreground: rgb(224 224 224);
  --color-border: rgb(51 51 51);
  --color-muted: rgb(44 44 44);
  --color-muted-foreground: rgb(176 176 176);

  --color-primary: rgb(129 199 132);
  --color-primary-foreground: rgb(23 23 23);
  --color-secondary: rgb(255 183 77);
  --color-secondary-foreground: rgb(23 23 23);

  --color-destructive: rgb(229 115 115);
  --color-destructive-foreground: rgb(254 242 242);
}

Customizing Colors

You can override default colors by defining CSS variables in a :root block in your CSS file. This must be loaded after DayFlow's CSS to override the default values.

Important:

  • Use --color-primary format (with --color- prefix)
  • Colors must use rgb() format with space-separated values
  • Import DayFlow CSS first, then your custom CSS

Example (in your layout file):

import '@dayflow/core/dist/styles.css';
import './globals.css'; // Your custom styles after DayFlow

Example (in your globals.css):

:root {
  /* Theme Colors - use rgb() format */
  --color-primary: rgb(26 115 232); /* blue */
  --color-primary-foreground: rgb(255 255 255);
  --color-secondary: rgb(255 152 0); /* orange */
  --color-secondary-foreground: rgb(23 23 23);
  --color-destructive: rgb(229 57 53); /* red */
  --color-destructive-foreground: rgb(255 255 255);

  /* Other colors */
  --color-background: rgb(255 255 255);
  --color-foreground: rgb(33 33 33);
  --color-border: rgb(229 229 229);
  --color-card: rgb(255 255 255);
  --color-card-foreground: rgb(33 33 33);
  --color-muted: rgb(243 244 246);
  --color-muted-foreground: rgb(107 114 128);
  --color-hover: rgb(245 245 245);
}

/* For dark mode: */
.dark {
  --color-primary: rgb(96 165 250); /* lighter blue */
  --color-primary-foreground: rgb(23 23 23);
  --color-background: rgb(18 18 18);
  --color-foreground: rgb(229 229 229);
  /* ... other dark mode colors */
}

Note: DayFlow uses :where() selectors for its default CSS variables, giving them zero specificity. This means your :root definitions will automatically override the defaults without needing !important.

Converting Hex to RGB:

  • Hex #1a73e8 → rgb(26 115 232)
  • Hex #ff9800 → rgb(255 152 0)
  • Hex #e53935 → rgb(229 57 53)

You can use online converters or browser dev tools to convert hex colors to RGB values.