CSS :root variables not updating in React + Vite project

Question

I’m working on a React app for my college project (using React + Vite) and I recently tried changing my theme colors defined in :root. However, the new values are not reflected across my site — only some places update, while most elements still use the old theme.

Here’s my setup:

index.css

/* old theme */
/* :root {
  --app-primary: #BA3111;
  --app-dark: #1E1F29;
  --app-light: #F5F0E5;
  --app-warm-grey: #6D6A6A;
  --app-sage-green: #8FA998;
  --app-yellow: #E1B530;

  --app-light-transparent: #F5F0E5e1;
  --app-primary-transparent: #BA311110;
} */
 
/* new theme */
:root {
  --app-primary: #007bff;
  --app-dark: #f2f2f2;
  --app-light: #1e1f29;
  --app-warm-grey: #6D6A6A;
  --app-sage-green: #8FA998;
  --app-yellow: #E1B530;

  --app-light-transparent: #1e1f29e1;
  --app-primary-transparent: #007bff10;
}

@font-face {
  font-family: 'Nunito';
  src: url('assets/fonts/Nunito/Nunito-VariableFont_wght.ttf');
}

Header.module.css

/* background color of header got changed successfully */
.header {
  position: sticky;
  top: 0;
  left: 0;
  width: -webkit-fill-available;
  height: 8vh;
  justify-content: space-between;
  padding-inline: 50px;
  background: var(--app-light-transparent);
  z-index: 20;
  box-shadow: 0 0 0.2rem rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(5px);
}

/* color of header title and other menu options are still old */
.header h1 {
  color: var(--app-primary);
  font-size: clamp(20px, 1.7rem, 60px);
}

Also across the rest of the site, the old theme colors are still being applied. I already tried Empty Cache and Hard Reload, but not working.

Why are my CSS variables from :root not updating everywhere in my React + Vite project, and how can I ensure the new theme colors are applied globally?

Pranav Pardeshi · Accepted Answer · 2025-09-25 14:48:52Z

0

This usually happens if the new :root variables are not the ones actually being applied. A few things to check:

Make sure you only define :root in a global stylesheet (like index.css) and not in a CSS module. Variables in *.module.css are scoped and won’t be global.
Confirm that index.css is imported once at the top of your app (usually in main.jsx).
Check DevTools → Computed styles to see if another stylesheet is overriding your variables.
Stop the dev server, clear .vite/dist, then restart. Sometimes Vite serves an old cached CSS file.

Once your variables are only in the global CSS and the dev server is restarted, the new theme should be applied everywhere.

answered Sep 25 at 14:48

Pranav Pardeshi

261 bronze badge

Sign up to request clarification or add additional context in comments.

3 Comments

CodeMaven42 Sep 25 at 14:58

:root is in index.css which is imported in main.jsx at top, cleared cache but not working

Pranav Pardeshi Sep 25 at 15:30

If index.css is imported correctly, check DevTools → :root to see which file is still setting the old value. Another stylesheet may be overriding your variables. Also try deleting .vite/dist and restarting to clear cached CSS.

Community Sep 25 at 15:28

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Gábor Németh · Accepted Answer · 2025-11-13 23:32:28Z

0

I had the same problem. My project is a React TypeScript project, and a CSS variable got stuck in the <html> tag.

Some JS files were generated in my src folder and one of them wasn’t being updated anymore. So I specified the output folder in the tsconfig.json "outDir": "./dist", and I removed all of the js files in my src folder find src -type f -name "*.js" -delete

Hope this helps someone!

answered Nov 13 at 23:32

Gábor Németh

1

Collectives™ on Stack Overflow

CSS :root variables not updating in React + Vite project

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related