CSS: корневые переменные не обновляются в проекте React + Vite ⇐ CSS

[Anonymous]

Я работаю над приложением React для своего проекта в колледже (используя React + Vite) и недавно попробовал изменить цвета моей темы, определенные в :root. Однако новые значения не отражаются на моем сайте — обновляются только некоторые места, а большинство элементов по-прежнему используют старую тему.
Вот мои настройки:

Код: Выделить всё

index.css

[/b]

Код: Выделить всё

/* 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

[/b]

Код: Выделить всё

/* 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);
}

Кроме того, на остальной части сайта все еще применяются старые цвета темы.
Я уже пробовал Очистить кеш и полную перезагрузку, но не помогло.
Почему мои переменные CSS из :root не обновляются повсюду в моем проекте React + Vite, и как я могу гарантировать, что новые цвета темы применяются глобально?>

Подробнее здесь: https://stackoverflow.com/questions/797 ... te-project