Uimini

# Colors

Minimal UI uses a specific set of palettes to specify colors.

For colors works correct use class ui-body for parent (best options use it in <body>) see more in layout section.

# Main colors

Main colors for buttons; alerts etc

Primary

#1890ff

Success

#52c41a

Warning

#faad14

Danger

#f5222d

# Neutral Color

Neutral colors are for text, background and border colors. You can use different neutral colors to represent the hierarchical structure.

Primary

#0e0e0e

Regular

#303133

Secondary

#858585

Placeholder

#939394

Base Border

#cccccc

Light Border

#f5f5f5

# Scss

Default theme palette from /src/theme/default-theme.scss.

.ui-body {
  /* Main Colors */
  --ui-primary-color: #1890ff;
  --ui-success-color: #52c41a;
  --ui-warning-color: #faad14;
  --ui-mark-color: #ffe58f;
  --ui-danger-color: #f5222d;

  /* Neutral Colors */
  --ui-g-0: #ffffff;
  --ui-g-10: #fafafa;
  --ui-g-100: #f5f5f5;
  --ui-g-200: #cccccc;
  --ui-g-400: #939394;
  --ui-g-500: #858585;
  --ui-g-900: #303133;
  --ui-g-950: #0e0e0e;
  --ui-g-999: #000000;
}

# Feel free to change

Uimini builds by css vars that's make easy to change any colors.

How to change colors platte:

  1. Change from /src/theme/dark-theme.scss (rebuild is required);
  2. Or change it by own css file or tag (without any builds). For example:
<html class="ui-html" lang="en">
  <head>
    <link rel="stylesheet" href="/css/uimini.css" />
    <style>
      .ui-body {
        --ui-primary-color: #f368e0 !important;
        --ui-success-color: #00d2d3 !important;
        --ui-danger-color: #5f27cd !important;
        --ui-g-200: #f7beef !important;
      }
    </style>
  </head>
  <body class="ui-body">
    <!-- ... -->
  </body>
</html>

# Palette result

Primary, danger, success, and borders colors will change to #f368e0; #00d2d3; #5f27cd; #f7beef.

Primary

#f368e0

Success

#00d2d3

Danger

#5f27cd

Base Border

#f7beef

# View result

After palette was change view will looks like:



← Dark mode →