1# Calendar Color Scheme
2
3## Current Theme: Green
4
5The calendar uses a professional green color scheme for all UI elements.
6
7## Color Palette
8
9### Primary Colors
10
11**Main Green** - `#008800` (RGB: 0, 136, 0)
12- Primary buttons (Today, Save)
13- Active states
14- Header backgrounds
15- Primary accents
16
17**Dark Green** - `#388e3c`
18- Button hover states
19- Secondary text
20- Borders (active)
21- Links
22
23**Darker Green** - `#2e7d32`
24- Button pressed states
25- Deep accents
26- Strong borders
27
28### Background Colors
29
30**Light Green Background** - `#e8f5e9`
31- Today's date highlight
32- Selected states
33- Subtle backgrounds
34
35**Very Light Green** - `#c8e6c9`
36- Hover states on today
37- Light accents
38
39**Medium Light Green** - `#81c784`
40- Secondary accents
41- Border highlights
42
43**Pale Green Tint** - `#f1f8f4`
44- Very subtle backgrounds
45- Form field backgrounds
46- Checkbox backgrounds
47
48## Where Colors Are Used
49
50### Buttons
51- **Today Button:** Green background (#4caf50)
52- **Save Button:** Green background (#4caf50)
53- **Hover:** Darker green (#388e3c)
54- **Active:** Darkest green (#2e7d32)
55
56### Calendar
57- **Today's Date:** Light green background (#e8f5e9)
58- **Today Hover:** Lighter green (#c8e6c9)
59- **Namespace Badge:** Green background (#e8f5e9), green text (#388e3c)
60
61### Links
62- **Link Color:** Green (#4caf50)
63- **Link Underline:** Dotted green (#4caf50)
64- **Link Hover:** Solid underline
65
66### Forms
67- **Task Checkbox Background:** Pale green (#f1f8f4)
68- **Task Checkbox Border:** Green (#4caf50)
69- **Task Checkbox Text:** Dark green (#388e3c)
70- **Recurring Options Background:** Pale green (#f1f8f4)
71- **Recurring Options Border:** Medium green (#81c784)
72
73### Event List Widget
74- **Header Background:** Green (#4caf50)
75- **Header Text:** White
76
77### Borders & Accents
78- **Active Borders:** Green (#4caf50)
79- **Highlight Borders:** Dark green (#388e3c)
80- **Section Borders:** Green (#4caf50)
81
82## Customization
83
84To change the color scheme, replace these colors in `style.css`:
85
86### To Blue Theme:
87```css
88#008800 → #2196f3  (Material Blue)
89#388e3c → #1976d2  (Dark Blue)
90#2e7d32 → #0d47a1  (Darker Blue)
91#e8f5e9 → #e3f2fd  (Light Blue)
92#c8e6c9 → #d1e7fd  (Lighter Blue)
93#81c784 → #90caf9  (Medium Blue)
94#f1f8f4 → #f0f8ff  (Pale Blue)
95```
96
97### To Red Theme:
98```css
99#008800 → #f44336  (Material Red)
100#388e3c → #d32f2f  (Dark Red)
101#2e7d32 → #b71c1c  (Darker Red)
102#e8f5e9 → #ffebee  (Light Red)
103#c8e6c9 → #ffcdd2  (Lighter Red)
104#81c784 → #ef5350  (Medium Red)
105#f1f8f4 → #fff5f5  (Pale Red)
106```
107
108### To Purple Theme:
109```css
110#008800 → #9c27b0  (Material Purple)
111#388e3c → #7b1fa2  (Dark Purple)
112#2e7d32 → #6a1b9a  (Darker Purple)
113#e8f5e9 → #f3e5f5  (Light Purple)
114#c8e6c9 → #e1bee7  (Lighter Purple)
115#81c784 → #ba68c8  (Medium Purple)
116#f1f8f4 → #faf5fb  (Pale Purple)
117```
118
119### To Orange Theme:
120```css
121#008800 → #ff9800  (Material Orange)
122#388e3c → #f57c00  (Dark Orange)
123#2e7d32 → #e65100  (Darker Orange)
124#e8f5e9 → #fff3e0  (Light Orange)
125#c8e6c9 → #ffe0b2  (Lighter Orange)
126#81c784 → #ffb74d  (Medium Orange)
127#f1f8f4 → #fffaf5  (Pale Orange)
128```
129
130## Quick Change Script
131
132To change all colors at once, use this sed command:
133
134```bash
135# Change to blue
136sed -i 's/#008800/#2196f3/g; s/#388e3c/#1976d2/g; s/#2e7d32/#0d47a1/g; s/#e8f5e9/#e3f2fd/g; s/#c8e6c9/#d1e7fd/g; s/#81c784/#90caf9/g; s/#f1f8f4/#f0f8ff/g' style.css
137
138# Change to red
139sed -i 's/#008800/#f44336/g; s/#388e3c/#d32f2f/g; s/#2e7d32/#b71c1c/g; s/#e8f5e9/#ffebee/g; s/#c8e6c9/#ffcdd2/g; s/#81c784/#ef5350/g; s/#f1f8f4/#fff5f5/g' style.css
140```
141
142## Event Colors
143
144Note: Individual event colors (set by users) are **not** affected by the theme. Users can still choose any color for their events:
145- Default event color: `#3498db` (blue)
146- Users can select any color via the color picker
147
148Only the UI elements (buttons, headers, highlights, links) use the theme colors.
149
150---
151
152**Current Theme:** Green
153**Version:** 3.2
154**Last Updated:** January 24, 2026
155