feat: section color themes

[dsnsgithub]

Summary

Adds the ability to choose between different color palettes for your AntAlmanac schedule!

Images of each theme

Default:

Legacy (for @KevinWu098 💖)

Catppuccin 😋

Our current color system doesn't track whether a user has set a custom color versus used the default. In this case, I have also implemented an onboarding prompt for this feature, along with an option for a custom theme that retains their current colors.

Images of Themes Modal/Settings

Onboarding Prompt (same modal can be accessed in Settings):

More themes should and can be added easily.
Written in part by Cursor Agent.

Test Plan

• Check if onboarding prompt works.
• Test that themes apply and work.
• Test if custom colors are preserved.

Run

localStorage.removeItem("sectionColorOnboarding")

in the browser console to see the specific onboarding prompt (description is slightly different than settings modal) again.

[cubic-dev-ai]

3 issues found across 12 files

Prompt for AI agents (unresolved issues)

Check if these issues are valid — if so, understand the root cause of each and fix them. If appropriate, use sub-agents to investigate and fix each issue separately.


<file name="apps/antalmanac/src/components/Calendar/CalendarRoot.tsx">

<violation number="1" location="apps/antalmanac/src/components/Calendar/CalendarRoot.tsx:339">
P2: Section color changes refresh only regular events, so finals view can show stale colors.</violation>
</file>

<file name="apps/antalmanac/src/stores/calendarizeHelpers.ts">

<violation number="1" location="apps/antalmanac/src/stores/calendarizeHelpers.ts:31">
P2: Unconditionally reassigning `course.section.color` here overrides explicit caller-provided colors (including hover preview color), causing incorrect event coloring.</violation>
</file>

<file name="apps/antalmanac/src/stores/SettingsStore.ts">

<violation number="1" location="apps/antalmanac/src/stores/SettingsStore.ts:73">
P2: Validate the stored section color value before assigning it to `SectionColorSetting`; the direct cast can admit invalid localStorage values and crash color variant lookup at runtime.</violation>
</file>

_{Reply with feedback, questions, or to request a fix. Tag @cubic-dev-ai to re-run a review.}

[dsnsgithub]

@cubic

[cubic-dev-ai]

@cubic

@dsnsgithub I have started the AI code review. It will take a few minutes to complete.

[cubic-dev-ai]

2 issues found across 24 files

Prompt for AI agents (unresolved issues)

Check if these issues are valid — if so, understand the root cause of each and fix them. If appropriate, use sub-agents to investigate and fix each issue separately.


<file name="apps/antalmanac/src/stores/calendarizeHelpers.ts">

<violation number="1" location="apps/antalmanac/src/stores/calendarizeHelpers.ts:32">
P2: `calendarizeCourseEvents` mutates input course colors, which overrides pre-set colors (e.g., hover highlight color) and causes incorrect event coloring.</violation>
</file>

<file name="apps/antalmanac/src/lib/calendarEventTextColor.ts">

<violation number="1" location="apps/antalmanac/src/lib/calendarEventTextColor.ts:8">
P2: Avoid forcing a non-null regex match here; invalid color strings will cause a runtime crash when reading `backgroundRegexResult[1]`.</violation>
</file>

_{Reply with feedback, questions, or to request a fix. Tag @cubic-dev-ai to re-run a review.}

[calebwongg]

w feature i was just testing out the features and i found these three things

I'm not sure if we want to remove the color picker when a theme is enabled but right now when we do have a theme selected the color picker is dead

If i switch then from a selected theme back to custom the state of the color picker persists but the actual colors on the calendar aren't updated / corresponding

With the 'hover to preview' feature it looks like when we hover with custom colors the card has a dimmed opacity vs with a selected theme it has full opacity. we probably want to keep the dimmed opacity with selected themes? just my personal opinion.

Also with hover to preview when I hover vs when I add the class it shows two different colors
hovering ---->

added ->>>>

I haven't looked at the code but if changing the color of the hovering class every time something new is added to maybe we could just keep the dimmed gray preview. Since also for the 'custom' color pallete when we hover its gray but when we add the class its a different color. So if we kept the gray hover for selected themes that would be consistent

aside from those small things tho this is an extra tuf feature im so excited to see it merged. i think alex is going to check out the code later or i will

[alexespejo]

Just adding ontop of some of caleb's suggestions. Tuff feature!

[alexespejo]

thought: it might be a little too much but I wonder if we could have a preview where you can have a mock calendar on the screen so you can see the different themes. I feel like this would be a feature where someone would want to toggle between the different options and switching back and forth through the dialog might be a tad annoying

[cubic-dev-ai]

You're iterating quickly on this pull request. To help protect your rate limits, cubic has paused automatic reviews on new pushes for now—when you're ready for another review, comment @cubic-dev-ai review.