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

frontend/src/ts/constants/themes.ts

@@ -223,6 +223,19 @@ export const themes: Record<ThemeName, Theme> = {
     colorfulErrorExtra: "#d996ac",
     hasCss: true,
   },
+  boba: {
+    bg: "#f4ebd9",
+    caret: "#c39b7d",
+    main: "#c39b7d",
+    sub: "#a68a73",
+    subAlt: "#e9dec7",
+    text: "#3c2f2f",
+    error: "#d66868",
+    errorExtra: "#f0d3d3",
+    colorfulError: "#d66868",
+    colorfulErrorExtra: "#f0d3d3",
+    hasCss: true,
+  },
   botanical: {
     bg: "#7b9c98",
     caret: "#abc6c4",

frontend/static/themes/boba.css

@@ -0,0 +1,86 @@
+/* ==========================================================================
+   Boba (Bubble Tea) Theme O3O
+   A cozy, milk-tea inspired palette with dark tapioca contrast. :)
+   ========================================================================== */
+
+:root {
+  --bg-color: #f4ebd9; /* creamy milk tea base */
+  --main-color: #c39b7d; /* brown sugar syrup accent */
+  --sub-color: #a68a73; /* taro milky tint */
+  --sub-alt-color: #e9dec7; /* slightly darker cream for panels */
+  --text-color: #3c2f2f; /* dark boba pearl text */
+  --error-color: #d66868; /* strawberry popping boba */
+  --error-bg-color: #f0d3d3;
+  --caret-color: #c39b7d;
+}
+
+/* removed the logo changes 
+
+/* --- Navigation Links & Hover states --- */
+[data-nav-item] {
+  color: var(--main-color);
+  transition: color 0.15s ease;
+}
+
+[data-nav-item]:hover {
+  /* soft overlay highlight when hovering items */
+  color: color-mix(in srgb, var(--main-color) 85%, white 15%);
+}
+
+/* Individual nav item overrides based on core colors */
+[data-nav-item="test"] {
+  color: var(--error-color);
+  &:hover {
+    color: color-mix(in srgb, var(--error-color) 75%, black 25%);
+  }
+}
+
+[data-nav-item="leaderboards"] {
+  color: var(--main-color);
+  &:hover {
+    color: color-mix(in srgb, var(--main-color) 75%, black 25%);
+  }
+}
+
+[data-nav-item="about"] {
+  color: var(--sub-color);
+  &:hover {
+    color: color-mix(in srgb, var(--sub-color) 75%, black 25%);
+  }
+}
+
+[data-nav-item="settings"] {
+  color: var(--caret-color);
+  &:hover {
+    color: color-mix(in srgb, var(--caret-color) 75%, black 25%);
+  }
+}
+
+/* Account buttons layout styling */
+[data-nav-item="alerts"],
+[data-nav-item="account"],
+[data-nav-item="login"] {
+  --themable-button-text: var(--main-color);
+  --themable-button-hover-text: color-mix(
+    in srgb,
+    var(--themable-button-text) 75%,
+    black 25%
+  );
+}
+
+[data-nav-item="alerts"],
+[data-ui-element="navAvatar"] {
+  & [data-ui-element="notificationBubble"] {
+    box-shadow: none;
+    background: var(--sub-alt-color);
+  }
+}
+
+/* Tiny spacing tweaks to prevent clipping issues */
+nav {
+  padding-bottom: 0.2em;
+}
+
+header {
+  margin-bottom: -0.1em;
+}

packages/schemas/src/themes.ts

@@ -19,6 +19,7 @@ export const ThemeNameSchema = z.enum(
     "blue_dolphin",
     "blueberry_dark",
     "blueberry_light",
+    "boba",
     "botanical",
     "bouquet",
     "breeze",