ThemeProvider Not Applying Styles in Vite Setup

[luislufttech]

I'm facing an issue where ThemeProvider from @primer/react does not apply styles dynamically unless I manually import @primer/css/dist/primer.css.

When I import @primer/css manually, styles apply correctly.
When I rely solely on ThemeProvider, components lose styling, even though useTheme() returns correctly structured theme values.
I'm trying to understand why this is happening and whether this is expected behavior or a potential issue with Vite's handling of @primer/react styles

What I've Already Tested
✅ Ensured ThemeProvider wraps the entire app correctly
✅ Checked useTheme() logs - it returns correct theme values.
✅ Verified CSS variables in DevTools - they are missing unless I import @primer/css.
✅ Tried pre-bundling @primer/react in vite.config.js using optimizeDeps.
✅ Disabled Fast Refresh in Vite to ensure ThemeProvider is not resetting.
✅ Forced data-color-mode="light" in to ensure correct application.
✅ Manually injected CSS variables using useEffect, which forces styles to apply.

This is App.jsx

import React from "react";
import { ThemeProvider, BaseStyles } from "@primer/react";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Dashboard from "./pages/Dashboard";
import Login from "./pages/Login";
import "@primer/css/dist/primer.css";
import "./App.css";

function App() {
  return (
    <ThemeProvider>
      <BaseStyles>
        <Router>
          <Routes>
            <Route path="/login" element={<Login />} />
            <Route path="/dashboard" element={<Dashboard />} />
          </Routes>
        </Router>
      </BaseStyles>
    </ThemeProvider>
  );
}

export default App;

Setup Environment
React: 18.3.1
Vite: 6.0.5
Browser: chrome
Ubuntu 22.04 on WSL
@primer/react: 37.11.0
@primer/css (manually importing for now): 21.5.1

[UbiquitousBear]

Things seem to have broken in 3.6.0+ ish

[joshblack]

Hi there, @luislufttech! 👋 Sorry about the issues that you're running into when applying styles in Vite, I think this is pointing to a gap in our documentation as we're moving towards CSS Modules.

We have an example in the project that uses vite here: https://github.com/primer/react/tree/main/examples/codesandbox and I think you're spot on with the setup or ThemeProvider and BaseStyles and what is likely missing are imports to @primer/primitives so that the CSS Custom Properties are setup correctly.

This package exports each specific theme that can be imported, for example the following line will import the light theme:

import "@primer/primitives/dist/css/functional/themes/light.css";

Hope that resolves the issue that you're running into, let me know if not! We'll also make sure to update the documentation to reflect this 👍 Sorry again about the issue here!