如何为Kotlin Multiplatform Compose添加支持明暗模式RGB配置的自定义颜色？

这个需求完全可以实现，不管是前端开发还是设计工具场景，都有成熟的方案支持为自定义颜色分别配置浅色、深色模式下的RGB值，具体操作如下：

一、前端CSS实现（跟随系统或手动切换模式） #

1. 跟随系统颜色模式 #

利用CSS自定义属性（变量）结合prefers-color-scheme媒体查询，自动匹配系统的浅色/深色模式：

/* 浅色模式默认变量 */
:root {
  --primary: rgb(25, 118, 210);
  --page-bg: rgb(255, 255, 255);
  --text-main: rgb(33, 33, 33);
}

/* 深色模式下覆盖变量 */
@media (prefers-color-scheme: dark) {
  :root {
    --primary: rgb(41, 182, 246);
    --page-bg: rgb(33, 33, 33);
    --text-main: rgb(255, 255, 255);
  }
}

/* 页面中使用变量 */
body {
  background: var(--page-bg);
  color: var(--text-main);
}

.btn-primary {
  background-color: var(--primary);
}

当用户切换系统的浅色/深色模式时，页面会自动加载对应模式的RGB颜色值。

2. 支持用户手动切换模式 #

如果需要让用户自主切换（不依赖系统设置），可以通过JS切换类名配合CSS变量实现：

/* 浅色模式默认变量 */
:root {
  --primary: rgb(25, 118, 210);
  --page-bg: rgb(255, 255, 255);
  --text-main: rgb(33, 33, 33);
}

/* 手动切换深色模式时的变量 */
:root.dark-mode {
  --primary: rgb(41, 182, 246);
  --page-bg: rgb(33, 33, 33);
  --text-main: rgb(255, 255, 255);
}

然后用JS给:root添加/移除dark-mode类，即可切换颜色模式。

二、设计工具实现（以Figma为例） #

在设计阶段也可以为自定义颜色配置双模式RGB值，方便后续开发对齐：

• 打开Figma的「变量」面板，点击「创建变量集」，分别命名为「浅色模式」「深色模式」
• 在「浅色模式」集中创建自定义颜色变量，设置对应的RGB值
• 切换到「深色模式」集，为同名变量设置深色模式下的RGB值
• 在设计元素中使用这些颜色变量，点击顶部工具栏的「模式」按钮切换预览，就能看到不同模式下的颜色自动生效

内容的提问来源于stack exchange，提问作者loongman