Css 在Gatsby中有条件地动态更改样式变量

我正在将一个应用程序移植到盖茨比，该应用程序使用手柄、SCS、express、jquery和mongodb。我有一个_variables.scss文件，它被导入到我的所有scss模块中。我想根据我们使用的数据库有条件地调整它。如果我们使用X数据库，那么该数据库中某些颜色的变量将发生变化，如果我们使用Y数据库，那么我们将为该数据库使用适当的颜色，等等。检查我们使用的数据库目前并不重要，我只是想找到一个解决方案来更改这些变量或更改将要使用的变量文件

我的变量文件如下所示。

/*
*主题
*/
$main color:rgb（222,2,2）；
$主色较深：rgb（209,0,0）；
$secondary color:rgb（2,19,133）；
$secondary color深色：rgb（220,48,5）；
$main背景色：rgb（242、242、242）；
$root背景色：rgb（225225225）；
$背景色灯光：rgb（2542554）；
$navbar背景色：$main color；
$footer背景色：rgb（29,29,29）；
$background color变暗细微：rgba（0,0,0,0.025）；
$dark叠加：rgba（0,0,0,0.7）；
$card name:rgba（0,0,0,0.6）；
$box阴影横幅：0 10px 3px rgba（0,0,0,0.15）；
$box阴影卡：1px 1px 5px 0 rgba（0,0,0,0.15）；
$text shadow:1px 1px 0.15rem rgba（0,0,0,0.85）；
$border:1px实心rgba（0,0,0,0.15）；
$边框主色：1px纯色$主色；
$border半径：5px您可以使用“css变量”代替scss变量，并在运行时重写其值。最大的优点是，它不需要编译

//主题1

[data-theme='theme1']
--main-color: rgb(222, 2, 2);
--main-color-darker: rgb(209, 0, 0);

//主题2

[data-theme='theme2']
--main-color: rgb(0, 0, 8);
--main-color-darker: rgb(103, 0, 0);

在将要使用样式的组件中。基于当前选择的主题，css变量将自我更新

background-color: var(--main-color);

您知道什么时候加载哪些样式？构建还是运行时？您能详细解释一下吗？在编译时，我们将加载正确的数据库和样式。我在考虑用盖茨比的主题。你怎么认为？