Tools

Tools

Theme Customizer

Tune Web SDK themes, design tokens, and dark-mode previews.

Presets

Palette

primary

--univer-primary-500
50
100
200
300
400
500
600
700
800
900

gray

--univer-gray-500
0
50
100
200
300
400
500
600
700
800
900
1000

blue

--univer-blue-500
50
100
200
300
400
500
600
700
800
900

red

--univer-red-500
50
100
200
300
400
500
600
700
800
900

orange

--univer-orange-500
50
100
200
300
400
500
600
700
800
900

yellow

--univer-yellow-500
50
100
200
300
400
500
600
700
800
900

green

--univer-green-500
50
100
200
300
400
500
600
700
800
900

jiqing

--univer-jiqing-500
50
100
200
300
400
500
600
700
800
900

indigo

--univer-indigo-500
50
100
200
300
400
500
600
700
800
900

purple

--univer-purple-500
50
100
200
300
400
500
600
700
800
900

pink

--univer-pink-500
50
100
200
300
400
500
600
700
800
900

Live Preview

Light

Export

const customTheme = {
  "primary": {
    "50": "#F3F5FF",
    "100": "#E9EDFF",
    "200": "#D2DAFA",
    "300": "#BAC6F8",
    "400": "#6280F9",
    "500": "#466AF7",
    "600": "#2C53F1",
    "700": "#143EE3",
    "800": "#083AD1",
    "900": "#1033BF"
  },
  "gray": {
    "0": "#FFFFFF",
    "50": "#F9FAFB",
    "100": "#EEEFF1",
    "200": "#E3E5EA",
    "300": "#A8B0BD",
    "400": "#7D8698",
    "500": "#4E5565",
    "600": "#31363F",
    "700": "#272A2F",
    "800": "#1F2124",
    "900": "#1B1C1F",
    "1000": "#000000"
  },
  "blue": {
    "50": "#EBF5FF",
    "100": "#E1EFFE",
    "200": "#C3DDFD",
    "300": "#A4CAFE",
    "400": "#76A9FA",
    "500": "#3F83F8",
    "600": "#1C64F2",
    "700": "#1A56DB",
    "800": "#1E429F",
    "900": "#233876"
  },
  "red": {
    "50": "#FDF2F2",
    "100": "#FDE8E8",
    "200": "#FBD5D5",
    "300": "#F8B4B4",
    "400": "#F98080",
    "500": "#F05252",
    "600": "#E02424",
    "700": "#C81E1E",
    "800": "#9B1C1C",
    "900": "#771D1D"
  },
  "orange": {
    "50": "#FFF8F1",
    "100": "#FEECDC",
    "200": "#FCD9BD",
    "300": "#FDBA8C",
    "400": "#FF8A4C",
    "500": "#FF5A1F",
    "600": "#D03801",
    "700": "#B43403",
    "800": "#8A2C0D",
    "900": "#771D1D"
  },
  "yellow": {
    "50": "#FDFCEA",
    "100": "#FFF4B9",
    "200": "#FCDC6A",
    "300": "#FAC815",
    "400": "#F1B312",
    "500": "#D49D0F",
    "600": "#AB7F0E",
    "700": "#9A6D15",
    "800": "#725213",
    "900": "#634312"
  },
  "green": {
    "50": "#F3FAF7",
    "100": "#DEF7EC",
    "200": "#BCF0DA",
    "300": "#84E1BC",
    "400": "#31C48D",
    "500": "#0DA471",
    "600": "#057A55",
    "700": "#046C4E",
    "800": "#03543F",
    "900": "#014737"
  },
  "jiqing": {
    "50": "#EDFAFA",
    "100": "#D5F5F6",
    "200": "#AFECEF",
    "300": "#7EDCE2",
    "400": "#16BDCA",
    "500": "#0694A2",
    "600": "#047481",
    "700": "#036672",
    "800": "#05505C",
    "900": "#014451"
  },
  "indigo": {
    "50": "#F3F5FF",
    "100": "#E9EDFF",
    "200": "#D2DAFA",
    "300": "#BAC6F8",
    "400": "#6280F9",
    "500": "#466AF7",
    "600": "#2C53F1",
    "700": "#143EE3",
    "800": "#083AD1",
    "900": "#1033BF"
  },
  "purple": {
    "50": "#F6F5FF",
    "100": "#EDEBFE",
    "200": "#DCD7FE",
    "300": "#CABFFD",
    "400": "#AC94FA",
    "500": "#9061F9",
    "600": "#7E3AF2",
    "700": "#6C2BD9",
    "800": "#5521B5",
    "900": "#4A1D96"
  },
  "pink": {
    "50": "#FDF2F8",
    "100": "#FCE8F3",
    "200": "#FAD1E8",
    "300": "#F8B4D9",
    "400": "#F17EB8",
    "500": "#E74694",
    "600": "#D61F69",
    "700": "#BF125D",
    "800": "#99154B",
    "900": "#751A3D"
  },
  "loop-color": {
    "1": "purple.400",
    "2": "green.500",
    "3": "blue.500",
    "4": "yellow.400",
    "5": "pink.300",
    "6": "jiqing.600",
    "7": "orange.400",
    "8": "gray.800",
    "9": "indigo.500",
    "10": "red.300",
    "11": "green.600",
    "12": "yellow.700"
  },
  "highlight": {
    "background": {
      "1": {
        "color": "purple.500",
        "alpha": 0.3
      },
      "2": {
        "color": "red.500",
        "alpha": 0.3
      },
      "3": {
        "color": "orange.400",
        "alpha": 0.3
      },
      "4": {
        "color": "green.400",
        "alpha": 0.3
      },
      "5": {
        "color": "blue.500",
        "alpha": 0.3
      },
      "6": {
        "color": "primary.500",
        "alpha": 0.3
      },
      "7": {
        "color": "pink.500",
        "alpha": 0.3
      },
      "8": {
        "color": "gray.400",
        "alpha": 0.3
      },
      "9": {
        "color": "purple.500",
        "alpha": 0.15
      },
      "10": {
        "color": "red.500",
        "alpha": 0.15
      },
      "11": {
        "color": "orange.400",
        "alpha": 0.15
      },
      "12": {
        "color": "green.400",
        "alpha": 0.15
      },
      "13": {
        "color": "blue.500",
        "alpha": 0.15
      },
      "14": {
        "color": "primary.500",
        "alpha": 0.15
      },
      "15": {
        "color": "pink.500",
        "alpha": 0.15
      },
      "16": {
        "color": "gray.400",
        "alpha": 0.15
      }
    }
  }
}

Design Tokens

:root {
  --univer-primary-50: #F3F5FF;
  --univer-primary-100: #E9EDFF;
  --univer-primary-200: #D2DAFA;
  --univer-primary-300: #BAC6F8;
  --univer-primary-400: #6280F9;
  --univer-primary-500: #466AF7;
  --univer-primary-600: #2C53F1;
  --univer-primary-700: #143EE3;
  --univer-primary-800: #083AD1;
  --univer-primary-900: #1033BF;
  --univer-gray-0: #FFFFFF;
  --univer-gray-50: #F9FAFB;
  --univer-gray-100: #EEEFF1;
  --univer-gray-200: #E3E5EA;
  --univer-gray-300: #A8B0BD;
  --univer-gray-400: #7D8698;
  --univer-gray-500: #4E5565;
  --univer-gray-600: #31363F;
  --univer-gray-700: #272A2F;
  --univer-gray-800: #1F2124;
  --univer-gray-900: #1B1C1F;
  --univer-gray-1000: #000000;
  --univer-blue-50: #EBF5FF;
  --univer-blue-100: #E1EFFE;
  --univer-blue-200: #C3DDFD;
  --univer-blue-300: #A4CAFE;
  --univer-blue-400: #76A9FA;
  --univer-blue-500: #3F83F8;
  --univer-blue-600: #1C64F2;
  --univer-blue-700: #1A56DB;
  --univer-blue-800: #1E429F;
  --univer-blue-900: #233876;
  --univer-red-50: #FDF2F2;
  --univer-red-100: #FDE8E8;
  --univer-red-200: #FBD5D5;
  --univer-red-300: #F8B4B4;
  --univer-red-400: #F98080;
  --univer-red-500: #F05252;
  --univer-red-600: #E02424;
  --univer-red-700: #C81E1E;
  --univer-red-800: #9B1C1C;
  --univer-red-900: #771D1D;
  --univer-orange-50: #FFF8F1;
  --univer-orange-100: #FEECDC;
  --univer-orange-200: #FCD9BD;
  --univer-orange-300: #FDBA8C;
  --univer-orange-400: #FF8A4C;
  --univer-orange-500: #FF5A1F;
  --univer-orange-600: #D03801;
  --univer-orange-700: #B43403;
  --univer-orange-800: #8A2C0D;
  --univer-orange-900: #771D1D;
  --univer-yellow-50: #FDFCEA;
  --univer-yellow-100: #FFF4B9;
  --univer-yellow-200: #FCDC6A;
  --univer-yellow-300: #FAC815;
  --univer-yellow-400: #F1B312;
  --univer-yellow-500: #D49D0F;
  --univer-yellow-600: #AB7F0E;
  --univer-yellow-700: #9A6D15;
  --univer-yellow-800: #725213;
  --univer-yellow-900: #634312;
  --univer-green-50: #F3FAF7;
  --univer-green-100: #DEF7EC;
  --univer-green-200: #BCF0DA;
  --univer-green-300: #84E1BC;
  --univer-green-400: #31C48D;
  --univer-green-500: #0DA471;
  --univer-green-600: #057A55;
  --univer-green-700: #046C4E;
  --univer-green-800: #03543F;
  --univer-green-900: #014737;
  --univer-jiqing-50: #EDFAFA;
  --univer-jiqing-100: #D5F5F6;
  --univer-jiqing-200: #AFECEF;
  --univer-jiqing-300: #7EDCE2;
  --univer-jiqing-400: #16BDCA;
  --univer-jiqing-500: #0694A2;
  --univer-jiqing-600: #047481;
  --univer-jiqing-700: #036672;
  --univer-jiqing-800: #05505C;
  --univer-jiqing-900: #014451;
  --univer-indigo-50: #F3F5FF;
  --univer-indigo-100: #E9EDFF;
  --univer-indigo-200: #D2DAFA;
  --univer-indigo-300: #BAC6F8;
  --univer-indigo-400: #6280F9;
  --univer-indigo-500: #466AF7;
  --univer-indigo-600: #2C53F1;
  --univer-indigo-700: #143EE3;
  --univer-indigo-800: #083AD1;
  --univer-indigo-900: #1033BF;
  --univer-purple-50: #F6F5FF;
  --univer-purple-100: #EDEBFE;
  --univer-purple-200: #DCD7FE;
  --univer-purple-300: #CABFFD;
  --univer-purple-400: #AC94FA;
  --univer-purple-500: #9061F9;
  --univer-purple-600: #7E3AF2;
  --univer-purple-700: #6C2BD9;
  --univer-purple-800: #5521B5;
  --univer-purple-900: #4A1D96;
  --univer-pink-50: #FDF2F8;
  --univer-pink-100: #FCE8F3;
  --univer-pink-200: #FAD1E8;
  --univer-pink-300: #F8B4D9;
  --univer-pink-400: #F17EB8;
  --univer-pink-500: #E74694;
  --univer-pink-600: #D61F69;
  --univer-pink-700: #BF125D;
  --univer-pink-800: #99154B;
  --univer-pink-900: #751A3D;
  --univer-loop-color-1: purple.400;
  --univer-loop-color-2: green.500;
  --univer-loop-color-3: blue.500;
  --univer-loop-color-4: yellow.400;
  --univer-loop-color-5: pink.300;
  --univer-loop-color-6: jiqing.600;
  --univer-loop-color-7: orange.400;
  --univer-loop-color-8: gray.800;
  --univer-loop-color-9: indigo.500;
  --univer-loop-color-10: red.300;
  --univer-loop-color-11: green.600;
  --univer-loop-color-12: yellow.700;
  --univer-highlight-bg-1: purple.500 / 0.3;
  --univer-highlight-bg-2: red.500 / 0.3;
  --univer-highlight-bg-3: orange.400 / 0.3;
  --univer-highlight-bg-4: green.400 / 0.3;
  --univer-highlight-bg-5: blue.500 / 0.3;
  --univer-highlight-bg-6: primary.500 / 0.3;
  --univer-highlight-bg-7: pink.500 / 0.3;
  --univer-highlight-bg-8: gray.400 / 0.3;
  --univer-highlight-bg-9: purple.500 / 0.15;
  --univer-highlight-bg-10: red.500 / 0.15;
  --univer-highlight-bg-11: orange.400 / 0.15;
  --univer-highlight-bg-12: green.400 / 0.15;
  --univer-highlight-bg-13: blue.500 / 0.15;
  --univer-highlight-bg-14: primary.500 / 0.15;
  --univer-highlight-bg-15: pink.500 / 0.15;
  --univer-highlight-bg-16: gray.400 / 0.15;
}

© 2026 DreamNum Co., Ltd.