const el = document.documentElement;

export const initThemeColor = () => {
  el.style.setProperty(
    '--el-color-primary',
    localStorage.getItem('--el-color-primary') || '#409EFF'
  );
  el.style.setProperty(
    '--el-color-success',
    localStorage.getItem('--el-color-success') || '#67C23A'
  );
  el.style.setProperty(
    '--el-color-warning',
    localStorage.getItem('--el-color-warning') || '#E6A23C'
  );
  el.style.setProperty('--el-color-danger', localStorage.getItem('--el-color-danger') || '#F56C6C');
  el.style.setProperty('--el-color-info', localStorage.getItem('--el-color-info') || '#909399');
};

export const getThemeColor = (colorName: string) => {
  return localStorage.getItem(colorName) || getComputedStyle(el).getPropertyValue(colorName);
};

export const setThemeColor = (colorName: string, color: string) => {
  el.style.setProperty(colorName, color);
  localStorage.setItem(colorName, color);
};
