Sleek interactive Floating Journal Calendar and Journal Explorer

[UPDATE]

If you are bored of the default calendar colors and you don't want to fiddle with space-lua or space-config to just adjust some colors. this update is for you:

  • Added the Colors section to the settings page. With the color picker you can easily change the element colors, and create vivid or personalized themes for your calendar without touching the code.

And here are some examples:

Rustic Harmony Theme

{
  "accentColor": "#c94b32",
  "background": "#171817",
  "borderColor": "#346852",
  "elementsBackground": "#333833",
  "hoverBackground": "#346852",
  "textColor": "#ebdabe",
  "outlineColor": "#eddab9",
  "sundayColor": "#c94c2c",
  "dotGreen": "#ffff00",
  "dotYellow": "oklch(0.95 0.18 95)",
  "dotOrange": "oklch(0.8 0.20 55)",
  "dotRed": "oklch(0.6 0.2 10)"
}

Velvet Vampire Theme

{
  "accentColor": "#a1236a",
  "background": "#290d45",
  "borderColor": "#3b225e",
  "elementsBackground": "#3b225e",
  "hoverBackground": "#5e3696",
  "textColor": "#ffcb6b",
  "outlineColor": "#c9922c",
  "sundayColor": "#a1236a",
  "dotGreen": "#7d1c55",
  "dotYellow": "#bb2a7f",
  "dotOrange": "#f532a4",
  "dotRed": "#ff00f7"
}

Neon Glacier Theme

{
  "accentColor": "#00e5ff",
  "background": "#0b1a2a",
  "borderColor": "#12324a",
  "elementsBackground": "#12324a",
  "hoverBackground": "#1f5a7a",
  "textColor": "#e6f7ff",
  "outlineColor": "#00bcd4",
  "sundayColor": "#00e5ff",
  "dotGreen": "#00ffa6",
  "dotYellow": "#ffe600",
  "dotOrange": "#ff8c00",
  "dotRed": "#ff3b3b"
}

Overcaffeinated Autumn Theme

{
  "accentColor": "#d97706",
  "background": "#2b1a12",
  "borderColor": "#4a2c1d",
  "elementsBackground": "#4a2c1d",
  "hoverBackground": "#7a4a2a",
  "textColor": "#ffe8c2",
  "outlineColor": "#f59e0b",
  "sundayColor": "#d97706",
  "dotGreen": "#4caf50",
  "dotYellow": "#facc15",
  "dotOrange": "#fb923c",
  "dotRed": "#ef4444"
}

Cotton Candy Daydream Theme

{
  "accentColor": "#ff4fa3",
  "background": "#e6f2ff",
  "borderColor": "#9ec5f8",
  "elementsBackground": "#cfe7ff",
  "hoverBackground": "#ffb8e0",
  "textColor": "#1f2a38",
  "outlineColor": "#ffbf3f",
  "sundayColor": "#ff66b2",
  "dotGreen": "#2ee6c9",
  "dotYellow": "#ffd84d",
  "dotOrange": "#ff9f1c",
  "dotRed": "#ff3d8f"
}