我建议使用CSS variables而不是scss变量来表示颜色。编译后的CSS将引用这些变量，但它们的值可以在前端动态更改。
你会在你的css中得到这样的东西：

body {
  background-color: var(--bg-color);
}

--bg-color是一个CSS变量。然后，您可以在前端将其设置为特定值。“如何”将取决于您想要使用什么库。使用emotion，它可能看起来像这样：

import React, { useState } from "react"
import { Global, css } from '@emotion/react'

function Foo() {
  const [color, setColor] = useState("blue")
  return (
    <div>
      <Global
        styles={css`
          :root {
            --bg-color: ${color};
          }
        `}
      />
      {/* ... */}
    </div>
  )
}

您可以设置变量的默认值如下：

body {
  background-color: var(--bg-color, red);
}