[Experimental] web: migrate apps/web to Vague theme

[AmanVarshney01]

Summary

• migrate apps/web design tokens to an experimental Vague-inspired palette
• update Fumadocs/shadcn color bridging so header/nav/docs use the same token system
• retheme code viewer and code block highlights to match the new palette
• update web manifest, logo/favicon SVG colors, and docs OG image palette
• fix hover contrast issues in Fumadocs header interactions

Experimental Notice

This PR is experimental and intended for visual QA and iteration before a final theme lock-in.

Validation

• bun check
• bun run build (from apps/web)

Summary by CodeRabbit

Release Notes

• Style
  • Updated application theme color system with a new color palette and design tokens
  • Refreshed syntax highlighting themes across code components
  • Updated web app manifest colors to reflect new branding
  • Enhanced visual consistency across UI components with updated hover states and interactive elements
  • Changed default theme configuration to dark mode

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
create-better-t-stack-web	Ready	Preview, Comment	Feb 15, 2026 4:39pm

[coderabbitai]

Walkthrough

A comprehensive design system update applying new color tokens, CSS variables, and shadow definitions throughout the application. Includes updates to theme configuration, component styling, syntax highlighting themes, web manifests, and Open Graph image generation.

Changes

Cohort / File(s)	Summary
Theme Configuration & Global Styles apps/web/src/app/layout.tsx, apps/web/src/app/global.css	Changed default theme from "system" to "dark" and disabled system theme detection. Overhauled CSS color variables from dark/neutral to lighter, saturated palette; redefined shadow system to use color-mix instead of HSL values; updated UI component color references and added new @layer base styles.
Web App Manifests apps/web/public/favicon/site.webmanifest, apps/web/src/app/manifest.ts	Updated theme_color from "#ffffff"/"#000000" to "#9bb4bc" and background_color from "#ffffff" to "#141415" across both PWA manifest files.
Code Syntax Highlighting apps/web/src/app/(home)/new/_components/code-viewer.tsx, apps/web/src/components/ui/kibo-ui/code-block/index.tsx	Changed syntax highlighting themes from catppuccin/github to vitesse-light and vesper. Updated line highlight, diff, and word highlight class styling to use new accent and destructive color tokens with color-mix instead of explicit color values.
UI Component Styling apps/web/src/app/(home)/analytics/_components/analytics-header.tsx, apps/web/src/app/(home)/stack/_components/stack-display.tsx, apps/web/src/app/(home)/new/_components/stack-builder/selected-stack-badges.tsx, apps/web/src/components/ui/file-tree.tsx, apps/web/src/components/ui/share-dialog.tsx	Updated hover/interactive states to use new theme tokens (text-chart-4, hover:bg-muted, color-mix-based styling) and replaced explicit color classes with CSS variable references. QR code colors converted to grayscale palette in share dialog.
Open Graph Image Generation apps/web/src/app/og/docs/[...slug]/route.tsx	Adjusted background, border, text, and status dot colors throughout OG image templates for improved contrast and visual consistency with new design palette.

Possibly Related PRs

• PR #863: Updates analytics header component styling with overlapping UI class changes
• PR #792: Modifies code viewer and code block syntax highlighting theme configuration
• PR #801: Redefines chart color CSS variables in global.css design system

🚥 Pre-merge checks | ✅ 3 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title directly describes the main objective of the PR: migrating the web app to a new 'Vague' theme, which is the central change across all modified files.
Merge Conflict Detection	✅ Passed	✅ No merge conflicts detected when merging into main

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

---

No actionable comments were generated in the recent review. 🎉

🧹 Recent nitpick comments

apps/web/src/app/layout.tsx (1)

127-130: Disabling system theme removes user preference detection.

Setting enableSystem: false and defaultTheme: "dark" locks all users into dark mode with no automatic light-mode fallback. This is fine for an experimental visual-QA pass, but remember to revisit before final lock-in if you intend to support light mode or respect prefers-color-scheme.

apps/web/src/components/ui/share-dialog.tsx (1)

25-29: Use a type alias instead of interface.

Per coding guidelines, prefer type over interface for TypeScript type declarations.

Proposed fix

-interface ShareDialogProps {
-  children: React.ReactNode;
-  stackUrl: string;
-  stackState: StackState;
-}
+type ShareDialogProps = {
+  children: React.ReactNode;
+  stackUrl: string;
+  stackState: StackState;
+};

As per coding guidelines, "Use TypeScript type aliases instead of interface declarations".

apps/web/src/components/ui/kibo-ui/code-block/index.tsx (1)

301-326: Multiple exported components use arrow functions instead of standard function declarations.

CodeBlock, CodeBlockHeader, CodeBlockFiles, CodeBlockFilename, CodeBlockSelect, CodeBlockBody, CodeBlockItem, CodeBlockContent, and others are all defined as arrow functions. While these are not part of the current diff, they are top-level named exports that would benefit from standard function declarations for consistency, better stack traces, and hoisting.

Not blocking for this theming PR, but worth a follow-up.

As per coding guidelines, "Use standard function name() {} declarations for top-level functions instead of arrow functions const name = () => {}".

apps/web/src/app/global.css (2)

205-222: Hardcoded hex values in shadow definitions duplicate --shadow-color.

The shadow color-mix expressions repeat #252530 (light) and #080809 (dark) instead of referencing the --shadow-color variable defined on lines 197 and 261. If the shadow base color changes, these won't update in sync.

♻️ Suggested refactor (light theme example; apply same pattern to .dark)

-  --shadow-2xs: 0px 4px 6px 0px color-mix(in srgb, `#252530` 10%, transparent);
-  --shadow-xs: 0px 4px 6px 0px color-mix(in srgb, `#252530` 10%, transparent);
+  --shadow-2xs: 0px 4px 6px 0px color-mix(in srgb, var(--shadow-color) 10%, transparent);
+  --shadow-xs: 0px 4px 6px 0px color-mix(in srgb, var(--shadow-color) 10%, transparent);

(Same pattern for --shadow-sm through --shadow-2xl in both :root and .dark.)

---

289-298: Static analysis flags on @apply are Biome config issues, not code bugs.

Biome reports errors on Lines 291 and 295 because tailwindDirectives isn't enabled in its CSS parser config. Since the build succeeds (Next.js/Tailwind handles these correctly), this is a tooling configuration gap rather than a code defect.

Consider enabling tailwindDirectives in your Biome CSS parser configuration to suppress these false positives, e.g.:

{
  "css": {
    "parser": {
      "tailwindDirectives": true
    }
  }
}

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}