如何在Jetpack Compose中添加自定义深色/浅色配色？

下面分几种常见场景给出具体操作方式：

1. 通过主题配置文件手动添加（适用于多数框架/工具） #

如果你的配色方案是通过JSON、YAML或CSS变量定义的，直接在配置里新增颜色条目即可：

• CSS变量场景：
  在:root（浅色模式）和深色模式专属选择器（比如.dark）下添加自定义变量：

  /* 浅色模式 */
  :root {
    --custom-light-1: #f8fafc;
    --custom-light-2: #e2e8f0;
    /* 原有12种颜色... */
  }
  
  /* 深色模式 */
  .dark {
    --custom-dark-1: #0f172a;
    --custom-dark-2: #1e293b;
    /* 原有12种颜色... */
  }
  

• JSON/YAML主题文件场景：
  以Tailwind CSS为例，在tailwind.config.js的theme.extend.colors中扩展：

  module.exports = {
    theme: {
      extend: {
        colors: {
          'custom-sky': {
            light: '#e0f2fe',
            dark: '#0c4a6e'
          },
          // 更多自定义颜色组...
        },
      },
    },
    darkMode: 'class',
  }
  

2. 批量生成适配明暗模式的色系 #

如果需要大量自定义颜色，可基于主色调生成对应模式的变体：

• 确定核心主色后，通过调整亮度、饱和度生成浅色模式下的柔和变体，以及深色模式下的低亮度高对比度变体；
• 确保生成的颜色在对应模式下满足WCAG对比度标准，避免出现文本与背景可读性差的问题。

3. 动态切换时注入自定义颜色 #

如果通过JS控制明暗模式切换，可在切换逻辑中动态设置自定义颜色：

function switchTheme(isDark) {
  const root = document.documentElement;
  root.classList.toggle('dark', isDark);
  root.style.setProperty('--custom-accent', isDark ? '#7c3aed' : '#a855f7');
}

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