Optional Configuration

Global Less Variables

Global Variable Configuration

Configure the following code in vite.config.js to globally introduce @techui/lessmixin and @techui/colors.

export default defineConfig({
  ...
  css: {
    preprocessorOptions: {
      less: {
        javascriptEnabled: true,
        additionalData:`
          @import "${path.resolve(__dirname, './node_modules/@techui/lessmixins/index.less')}";
          @import "${path.resolve(__dirname, './node_modules/@techui/colors/base.less')}";
          @import "${path.resolve(__dirname, './node_modules/@techui/colors/extended.less')}";
          `
      }
    }
  },
})

Usage of Global Variables

After configuring Less public variables in vite.config.js, they can be directly used in any Vue component.

• For detailed lessmixins, please refer to the definition at this path: node_modules/@techui/lessmixins/index.less
• For color palette definitions, please refer to the preview file at this path: node_modules/@techui/colors/preview.html

<style lang="less">
.demo-box{
  .bgc(@bll5); // Background color
  .fc(@bk);    // Font color
  .bgBlur;     // Background blur
}
</style>

Using Color Palettes in JS

The color palette component @techui/colors can be used in Less as well as in JS. When used in JS, it can be imported globally or on-demand within components.

Using color palettes in JS is typically for Echarts chart configurations, Cesium configurations, etc. You can also directly call the system theme to accomplish these tasks; please refer to the Theme chapter.

Global Import

Configure the following code in main.js:

import TuiColors from "@techui/colors"
app.use(TuiColors)

On-Demand Import

In any vue file, use the following code to import:

import {$c, $chroma} from "@techui/colors"

$chroma is equivalent to the entry point of the chromajs component and can call all chromajs functions. Please refer to the relevant documentation for chromajs.

Usage in Components

Regardless of the import method, the color palette can be used in Vue components as follows:

const colorBlue = $c.bll5;
const opacityBlue = $c.fade('bll5', 0.5);
const colorArr = $c.scale(['bll5', 'aql5', 'rel5'], 10); // Generate 10 colors based on the scale of 3 colors