@arco-design/web-react/es/style/theme/css-variables.less

Arco Design React UI Library.

@import './color/css-variables.less';

@{arco-theme-tag} {
  @{arco-cssvars-prefix}-color-white: @color-white;
  @{arco-cssvars-prefix}-color-black: @color-black;
  @{arco-cssvars-prefix}-color-border: @color-border;
  @{arco-cssvars-prefix}-color-bg-popup: @color-bg-popup;
  @{arco-cssvars-prefix}-color-bg-1: @color-bg-1;
  @{arco-cssvars-prefix}-color-bg-2: @color-bg-2;
  @{arco-cssvars-prefix}-color-bg-3: @color-bg-3;
  @{arco-cssvars-prefix}-color-bg-4: @color-bg-4;
  @{arco-cssvars-prefix}-color-bg-5: @color-bg-5;
  @{arco-cssvars-prefix}-color-bg-white: @color-bg-white;
  @{arco-cssvars-prefix}-color-neutral-1: rgb(var(~'@{arco-cssvars-prefix}-gray-1'));
  @{arco-cssvars-prefix}-color-neutral-2: rgb(var(~'@{arco-cssvars-prefix}-gray-2'));
  @{arco-cssvars-prefix}-color-neutral-3: rgb(var(~'@{arco-cssvars-prefix}-gray-3'));
  @{arco-cssvars-prefix}-color-neutral-4: rgb(var(~'@{arco-cssvars-prefix}-gray-4'));
  @{arco-cssvars-prefix}-color-neutral-5: rgb(var(~'@{arco-cssvars-prefix}-gray-5'));
  @{arco-cssvars-prefix}-color-neutral-6: rgb(var(~'@{arco-cssvars-prefix}-gray-6'));
  @{arco-cssvars-prefix}-color-neutral-7: rgb(var(~'@{arco-cssvars-prefix}-gray-7'));
  @{arco-cssvars-prefix}-color-neutral-8: rgb(var(~'@{arco-cssvars-prefix}-gray-8'));
  @{arco-cssvars-prefix}-color-neutral-9: rgb(var(~'@{arco-cssvars-prefix}-gray-9'));
  @{arco-cssvars-prefix}-color-neutral-10: rgb(var(~'@{arco-cssvars-prefix}-gray-10'));
  @{arco-cssvars-prefix}-color-text-1: @color-text-1;
  @{arco-cssvars-prefix}-color-text-2: @color-text-2;
  @{arco-cssvars-prefix}-color-text-3: @color-text-3;
  @{arco-cssvars-prefix}-color-text-4: @color-text-4;
  @{arco-cssvars-prefix}-color-border-1: @color-border-1;
  @{arco-cssvars-prefix}-color-border-2: @color-border-2;
  @{arco-cssvars-prefix}-color-border-3: @color-border-3;
  @{arco-cssvars-prefix}-color-border-4: @color-border-4;
  @{arco-cssvars-prefix}-color-fill-1: @color-fill-1;
  @{arco-cssvars-prefix}-color-fill-2: @color-fill-2;
  @{arco-cssvars-prefix}-color-fill-3: @color-fill-3;
  @{arco-cssvars-prefix}-color-fill-4: @color-fill-4;
  @{arco-cssvars-prefix}-color-primary-light-1: @color-primary-light-1;
  @{arco-cssvars-prefix}-color-primary-light-2: @color-primary-light-2;
  @{arco-cssvars-prefix}-color-primary-light-3: @color-primary-light-3;
  @{arco-cssvars-prefix}-color-primary-light-4: @color-primary-light-4;
  @{arco-cssvars-prefix}-color-secondary: @color-secondary;
  @{arco-cssvars-prefix}-color-secondary-hover: @color-secondary-hover;
  @{arco-cssvars-prefix}-color-secondary-active: @color-secondary-active;
  @{arco-cssvars-prefix}-color-secondary-disabled: @color-secondary-disabled;
  @{arco-cssvars-prefix}-color-danger-light-1: @color-danger-light-1;
  @{arco-cssvars-prefix}-color-danger-light-2: @color-danger-light-2;
  @{arco-cssvars-prefix}-color-danger-light-3: @color-danger-light-3;
  @{arco-cssvars-prefix}-color-danger-light-4: @color-danger-light-4;
  @{arco-cssvars-prefix}-color-success-light-1: @color-success-light-1;
  @{arco-cssvars-prefix}-color-success-light-2: @color-success-light-2;
  @{arco-cssvars-prefix}-color-success-light-3: @color-success-light-3;
  @{arco-cssvars-prefix}-color-success-light-4: @color-success-light-4;
  @{arco-cssvars-prefix}-color-warning-light-1: @color-warning-light-1;
  @{arco-cssvars-prefix}-color-warning-light-2: @color-warning-light-2;
  @{arco-cssvars-prefix}-color-warning-light-3: @color-warning-light-3;
  @{arco-cssvars-prefix}-color-warning-light-4: @color-warning-light-4;
  @{arco-cssvars-prefix}-color-link-light-1: @color-link-light-1;
  @{arco-cssvars-prefix}-color-link-light-2: @color-link-light-2;
  @{arco-cssvars-prefix}-color-link-light-3: @color-link-light-3;
  @{arco-cssvars-prefix}-color-link-light-4: @color-link-light-4;
  @{arco-cssvars-prefix}-color-data-1: @color-data-1;
  @{arco-cssvars-prefix}-color-data-2: @color-data-2;
  @{arco-cssvars-prefix}-color-data-3: @color-data-3;
  @{arco-cssvars-prefix}-color-data-4: @color-data-4;
  @{arco-cssvars-prefix}-color-data-5: @color-data-5;
  @{arco-cssvars-prefix}-color-data-6: @color-data-6;
  @{arco-cssvars-prefix}-color-data-7: @color-data-7;
  @{arco-cssvars-prefix}-color-data-8: @color-data-8;
  @{arco-cssvars-prefix}-color-data-9: @color-data-9;
  @{arco-cssvars-prefix}-color-data-10: @color-data-10;
  @{arco-cssvars-prefix}-color-data-11: @color-data-11;
  @{arco-cssvars-prefix}-color-data-12: @color-data-12;
  @{arco-cssvars-prefix}-color-data-13: @color-data-13;
  @{arco-cssvars-prefix}-color-data-14: @color-data-14;
  @{arco-cssvars-prefix}-color-data-15: @color-data-15;
  @{arco-cssvars-prefix}-color-data-16: @color-data-16;
  @{arco-cssvars-prefix}-color-data-17: @color-data-17;
  @{arco-cssvars-prefix}-color-data-18: @color-data-18;
  @{arco-cssvars-prefix}-color-data-19: @color-data-19;
  @{arco-cssvars-prefix}-color-data-20: @color-data-20;

  // radius
  @{arco-cssvars-prefix}-border-radius-none: @border-radius-none;
  @{arco-cssvars-prefix}-border-radius-small: @border-radius-small;
  @{arco-cssvars-prefix}-border-radius-medium: @border-radius-medium;
  @{arco-cssvars-prefix}-border-radius-large: @border-radius-large;
  @{arco-cssvars-prefix}-border-radius-circle: @border-radius-circle;
  // component
  @{arco-cssvars-prefix}-color-tooltip-bg: @color-tooltip-bg;
  @{arco-cssvars-prefix}-color-spin-layer-bg: @color-spin-layer-bg;
  @{arco-cssvars-prefix}-color-menu-dark-bg: @color-menu-dark-bg;
  @{arco-cssvars-prefix}-color-menu-light-bg: @color-menu-light-bg;
  @{arco-cssvars-prefix}-color-menu-dark-hover: @color-menu-dark-hover;
  @{arco-cssvars-prefix}-color-mask-bg: @mask-color-bg;

  // font
  @{arco-cssvars-prefix}-font-weight-100: @font-weight-100;
  @{arco-cssvars-prefix}-font-weight-200: @font-weight-200;
  @{arco-cssvars-prefix}-font-weight-300: @font-weight-300;
  @{arco-cssvars-prefix}-font-weight-400: @font-weight-400;
  @{arco-cssvars-prefix}-font-weight-500: @font-weight-500;
  @{arco-cssvars-prefix}-font-weight-600: @font-weight-600;
  @{arco-cssvars-prefix}-font-weight-700: @font-weight-700;
  @{arco-cssvars-prefix}-font-weight-800: @font-weight-800;
  @{arco-cssvars-prefix}-font-weight-900: @font-weight-900;
}

@{arco-theme-tag} {
  &[arco-theme='dark'] {
    @{arco-cssvars-prefix}-color-white: @dark-color-white; // 在亮色模式下所有白色文字对应。对应 @color-white;
    @{arco-cssvars-prefix}-color-black: @dark-color-black;
    @{arco-cssvars-prefix}-color-border: @dark-color-border;
    @{arco-cssvars-prefix}-color-bg-1: @dark-color-bg-1; // 整体背景，就是 @dark-gray-1
    @{arco-cssvars-prefix}-color-bg-2: @dark-color-bg-2; // 一级容器背景 (“白色”)
    @{arco-cssvars-prefix}-color-bg-3: @dark-color-bg-3; // 二级容器背景
    @{arco-cssvars-prefix}-color-bg-4: @dark-color-bg-4; // 三级容器背景
    @{arco-cssvars-prefix}-color-bg-5: @dark-color-bg-5; // 下拉框、Tooltips 背景
    @{arco-cssvars-prefix}-color-bg-white: @dark-color-bg-white; // 在亮色模式下 radio，switch 白色背景
    @{arco-cssvars-prefix}-color-text-1: @dark-color-text-1; // 标题，正文
    @{arco-cssvars-prefix}-color-text-2: @dark-color-text-2; // 语句
    @{arco-cssvars-prefix}-color-text-3: @dark-color-text-3; // 次要信息
    @{arco-cssvars-prefix}-color-text-4: @dark-color-text-4; // 禁用态
    @{arco-cssvars-prefix}-color-fill-1: @dark-color-fill-1;
    @{arco-cssvars-prefix}-color-fill-2: @dark-color-fill-2;
    @{arco-cssvars-prefix}-color-fill-3: @dark-color-fill-3;
    @{arco-cssvars-prefix}-color-fill-4: @dark-color-fill-4;
    @{arco-cssvars-prefix}-color-primary-light-1: @dark-color-primary-light-1;
    @{arco-cssvars-prefix}-color-primary-light-2: @dark-color-primary-light-2;
    @{arco-cssvars-prefix}-color-primary-light-3: @dark-color-primary-light-3;
    @{arco-cssvars-prefix}-color-primary-light-4: @dark-color-primary-light-4;
    @{arco-cssvars-prefix}-color-secondary: @dark-color-secondary;
    @{arco-cssvars-prefix}-color-secondary-hover: @dark-color-secondary-hover;
    @{arco-cssvars-prefix}-color-secondary-active: @dark-color-secondary-active;
    @{arco-cssvars-prefix}-color-secondary-disabled: @dark-color-secondary-disabled;
    @{arco-cssvars-prefix}-color-danger-light-1: @dark-color-danger-light-1;
    @{arco-cssvars-prefix}-color-danger-light-2: @dark-color-danger-light-2;
    @{arco-cssvars-prefix}-color-danger-light-3: @dark-color-danger-light-3;
    @{arco-cssvars-prefix}-color-danger-light-4: @dark-color-danger-light-4;
    @{arco-cssvars-prefix}-color-success-light-1: @dark-color-success-light-1;
    @{arco-cssvars-prefix}-color-success-light-2: @dark-color-success-light-2;
    @{arco-cssvars-prefix}-color-success-light-3: @dark-color-success-light-3;
    @{arco-cssvars-prefix}-color-success-light-4: @dark-color-success-light-4;
    @{arco-cssvars-prefix}-color-warning-light-1: @dark-color-warning-light-1;
    @{arco-cssvars-prefix}-color-warning-light-2: @dark-color-warning-light-2;
    @{arco-cssvars-prefix}-color-warning-light-3: @dark-color-warning-light-3;
    @{arco-cssvars-prefix}-color-warning-light-4: @dark-color-warning-light-4;
    @{arco-cssvars-prefix}-color-link-light-1: @dark-color-link-light-1;
    @{arco-cssvars-prefix}-color-link-light-2: @dark-color-link-light-2;
    @{arco-cssvars-prefix}-color-link-light-3: @dark-color-link-light-3;
    @{arco-cssvars-prefix}-color-link-light-4: @dark-color-link-light-4;
    // component
    @{arco-cssvars-prefix}-color-tooltip-bg: @dark-color-tooltip-bg;
    @{arco-cssvars-prefix}-color-spin-layer-bg: @dark-color-spin-layer-bg;
    @{arco-cssvars-prefix}-color-menu-dark-bg: @color-menu-dark-bg;
    @{arco-cssvars-prefix}-color-menu-light-bg: @color-menu-dark-bg;
    @{arco-cssvars-prefix}-color-menu-dark-hover: @dark-color-menu-dark-hover;
    @{arco-cssvars-prefix}-color-mask-bg: @dark-mask-color-bg;
  }
}