主题色设置

主题设置

效果：通过更换配置项的关键词颜色：white，black ==> 切换整个主题的效果。

1.通过在js代码中动态添加

const colorThemes = {
  black: {
    backgroundColor: '#0C101D',
    textColor: '#ffffff',
    buttonColor: '#8AD8BC',
    borderColor: '#808080'
  },
  white: {
    backgroundColor: '#ffffff',
    textColor: '#0C101D',
    buttonColor: '#ff69b4',
    borderColor: '#808080'
  },
  // 其他颜色主题
};

const defaultTheme = 'black'; // 默认主题颜色
const themeColor = window.chatbotConfig.themeColor || defaultTheme;
const selectedTheme = colorThemes[themeColor] || colorThemes[defaultTheme];

function applyTheme(theme) {
  const { backgroundColor, textColor, buttonColor, borderColor } = theme;

  // 设置聊天窗口图标的背景颜色
  const chatIcon = document.getElementById('chat-icon');
  if (chatIcon) {
    chatIcon.style.backgroundColor = backgroundColor;
  }
  // 其他需要设置颜色的元素
}

// 在DOM结构加载后使用
  applyTheme(selectedTheme);

不使用，

原因：我的一些dom结构需要动态添加，所以当执行 applyTheme(selectedTheme);的时候我的动态添加的Dom结构，可能还没有加载，导致主题的配置失败。后面需要监听dom变换 ，再应用主题，比较繁琐。

2.通过css变量配置

//css 文件中
:root {
  --background-color: #0C101D;
  --text-color: #FFFFFF;
  --icon-color: #8AD8BC;
}

// 使用变量
#chat {
  background: linear-gradient(var(--background-color), var(--icon-color));
  color: var(--text-color);
}

// js 文件
 const colorThemes = {
    black: {
      '--background-color': '#0C101D',
      '--text-color': '#FFFFFF',
      '--icon-color': '#8AD8BC',
      '--background-color-bottom':'#5F9385'
    },
    white: {
      '--background-color': '#FFFFFF',
      '--text-color': '#0C101D',
      '--icon-color': '#0C101D',
      '--background-color-bottom':'#8AD8BC'
    }
  };

  // 应用主题
  function applyTheme(themeVars) {
    const container = document.getElementById('chatBox');
    for (const varName in themeVars) {
      if (themeVars.hasOwnProperty(varName)) {
        container.style.setProperty(varName, themeVars[varName]);
      }
    }
  }

// 在DOM结构加载后使用
  applyTheme(selectedTheme);

推荐

原因：这样可以直接对css进行设置，只需切换变量便可以达到目的。只需提前定义下我需要的类和id进行设置，直接使用css变量即可。