Skip to content

feat(theme): add boba theme (@Chouhan705)#7995

Open
Chouhan705 wants to merge 2 commits into
monkeytypegame:masterfrom
Chouhan705:add-boba-theme
Open

feat(theme): add boba theme (@Chouhan705)#7995
Chouhan705 wants to merge 2 commits into
monkeytypegame:masterfrom
Chouhan705:add-boba-theme

Conversation

@Chouhan705
Copy link
Copy Markdown

Added a new theme called Boba, inspired by warm brown-sugar milk tea and taro colors. The goal was to introduce a cozy, warm-toned aesthetic variant to the theme selection that maintains strong contrast ratios for active typing legibility.

I implemented the color palette configs, linked up the custom styles, and registered it within the application constants and validation schemas.

Checks
[ ] Adding quotes?

[ ] Adding a language?

[x] Adding a theme?

Make sure to follow the themes documentation

[x] Add theme to packages/schemas/src/themes.ts

[x] Add theme to frontend/src/ts/constants/themes.ts

[x] (optional) Add theme css file to frontend/static/themes

[ ] Add some screenshots of the theme, especially with different test settings (colorful, flip colors) to your pull request

[ ] Adding a layout?

[ ] Adding a font?

[x] Check if any open issues are related to this PR; if so, be sure to tag them below.

[x] Make sure the PR title follows the Conventional Commits standard.

[x] Make sure to include your GitHub username prefixed with @ inside parentheses at the end of the PR title.

@monkeytypegeorge monkeytypegeorge added frontend User interface or web stuff assets Languages, themes, layouts, etc. packages Changes in local packages labels May 21, 2026
@Chouhan705 Chouhan705 changed the title feat(theme): add boba theme (Chouhan705) feat(theme): add boba theme (@Chouhan705) May 21, 2026
@Chouhan705
Copy link
Copy Markdown
Author

here is a screenshot of the theme for reference
localhost - Monkeytype _ A minimalistic, customizable typing test - Google Chrome 5_21_2026 7_03_46 PM

Comment thread frontend/static/themes/boba.css Outdated
}

/* Make the logo match the two-tone brown sugar style */
header [data-ui-element="logoText"] {
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

while this makes sense on the incognito theme i don't think we want to style the logo on every theme

}
}

/* Tiny spacing tweaks to prevent clipping issues */
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

should be obsolete when we remove the effect on the logoText

@fehmer
Copy link
Copy Markdown
Member

fehmer commented May 21, 2026

similar to hanok and tiramisu

@Chouhan705
Copy link
Copy Markdown
Author

Chouhan705 commented May 26, 2026

Thanks for the feedback! Makes total sense to keep the branding unified. I've removed the logo gradient overrides so it behaves cleanly now , and sorry for the delay I was on a vacation :)
localhost - Monkeytype _ A minimalistic, customizable typing test - Google Chrome 5_26_2026 7_05_14 PM

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

assets Languages, themes, layouts, etc. frontend User interface or web stuff packages Changes in local packages

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants