Skip to content

Add light mode support #690

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
fyang151 wants to merge 37 commits into
base: main
Choose a base branch
from
Open

Add light mode support #690

fyang151 wants to merge 37 commits into from

Conversation

@fyang151
Copy link
Contributor

@fyang151 fyang151 commented Nov 5, 2025 •
edited by jjun819
Loading

Description

This PR adds support for light mode by:

  • Keeping colours as variables in variables.css.
  • Setting dark mode in dom before paint with new function in file themeNoFlashScript.
  • Storing our theme using Redux by creating a slice in themeSlice.ts. This is intentionally done differently than our current way of implementing Redux to serve as an example for our possible migration to RTK in the future: Update to RTK #654
  • Adding a button to toggle the theme.

Added color changes and .css variables to light mode branch

change colors later

image

fyang151 and others added 30 commits August 25, 2025 23:25
@fyang151
WIP yml files, scripts for convenience, updating documentation.
aec507b
@fyang151
Add web:dev:no-api dev option.
87db34a
@fyang151
breaking, update deps
0f383e0
@fyang151
WIP bare dark mode UI
0ca0738
@fyang151
Bare minimum.
d570412 
Dropdowns for stats.
Very messy css for calendar.
About page
@fyang151
WIP use real data for graphs.
df5aa36
@fyang151
WIP export data.
7b1c480
@fyang151
Hasty rearrange graphs.
db293d1
@fyang151
Fix some css overflow issues.
53afa36
@fyang151
CSS fix.
7eef7dd
@fyang151
Use actual data for maps.
4ab2ab7
@fyang151
Reset button for view historic data.
e280006
@fyang151
Misc graph improvements.
ee6982d
@fyang151
Update stats summary to display no stats.
40bc2c5
@fyang151
Misc clean.
2d953b5
@fyang151
RIP EVERYTHING OUT HAHAHAHAHAHA RIP R IP RIP RIP THE CULLING HAHAHAHAA
162181c
@fyang151
Fix client server mismatch bug, useLayoutEffect
7259356
@fyang151
Update title.
9a3840d
@fyang151
Underline current tab.
cf3f0dc
@fyang151
Remove some css
e281c25
@fyang151
Revert necessary files and add clarifying comments
6fb2315
@fyang151
Transition to AppRouter
f100755
@fyang151
Split some code.
38d6549
@fyang151
WIP light mode
0526516
@fyang151
Merge main into chore/undockerize-website
37e008c
@fyang151
Comment ports in docker-compose.yml and don't run website tests in ci.
9c4b85e
@SPDonaghy
Merge branch 'main' into chore/undockerize-website
e903338
@fyang151
WIP toggle theme
8123b9e
@fyang151
Merge chore/undocker-website.
9e3a01a
@fyang151
Add ThemeSyncListener.
facd693
@SPDonaghy SPDonaghy added the web Website team label Nov 8, 2025
@fyang151 fyang151 mentioned this pull request Nov 16, 2025
Closed
@fyang151 fyang151 marked this pull request as ready for review November 22, 2025 20:16
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@JordanChen123 JordanChen123 Awaiting requested review from JordanChen123 JordanChen123 is a code owner

@SPDonaghy SPDonaghy Awaiting requested review from SPDonaghy SPDonaghy is a code owner

@FireBoyAJ24 FireBoyAJ24 Awaiting requested review from FireBoyAJ24 FireBoyAJ24 is a code owner

At least 1 approving review is required to merge this pull request.

Assignees

No one assigned

Labels

web Website team

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

LIGHT MODE!

4 participants

@fyang151 @SPDonaghy @jjun819