Global Background

⚡WASM Powered

👑Pioneer

TechUI features a built-in high-performance background generation system. Based on WebAssembly (WASM) modules, it reads preset SVG tile patterns to generate seamless textures that can be tiled infinitely.

The system is designed with a "Dual-Layer Architecture", supporting separate configurations for the underlying Root Background and the overlaying View Background. Combined with gradients and transparency overlays, it provides a visually rich and high-tech foundation for data dashboards or backend management systems.

Core Architecture

The global background consists of two independent DOM layers, mounted to different containers via CSS class names.

Root Background (Back Layer)

Class Name: .tui-root-bg
Mount Point: Default mounted on the root container of TuiProvider (i.e., <body> or the outermost div).
Design Positioning: Serves as the "canvas base color" for the entire application. Usually uses low transparency and a single texture, with a subdued visual effect to set the overall atmosphere.

View Background (Front Layer)

Class Name: .tui-view-bg
Mount Point: Default mounted on the content container of TuiAdaptive (Adaptive Panel) or the penetration layer (id="tuiAdptPenetration").
Design Positioning: Serves as the background for the content area. Usually combined with strong gradients and highlighted textures to emphasize the core viewport.

Control Strategy

Display Control ($gBackground)

The background mounting strategy can be controlled via the global state $gBackground.

Value	Behavior
all	Displays both Root and View backgrounds (Default).
root	Displays only the Root background.
view	Displays only the View background (Root layer is transparent).
none	Disables all background rendering.

Style Configuration ($backgroundConfig)

The specific style of the background is controlled by the $backgroundConfig object. After modifying this object, a refresh logic (usually handled by initBG) is required to regenerate the CSS.

The configuration object structure is as follows:

javascript

const backgroundConfig = {
  graphicType: "SvgPattern", // Currently only supports SvgPattern
  SvgPattern: {
    // --- Root Layer Config ---
    rootSvgName: "diamondWeaving", // Pattern name
    // --- View Layer Config ---
    viewSvgName: "diamondWeaving", // Pattern name
    gradType: "radial",            // Gradient type: 'radial' | 'line'
    gradOrientation: "ellipse at bottom" // CSS gradient direction syntax
  }
}

Modifying Background Color

Although $backgroundConfig controls the pattern shape and gradient method, the color tone of the background (e.g., gradient flow, texture fill color, base color) is actually determined by the Theme.

To deeply customize the background color style, you need to create a custom theme based on an existing one.

Copy Theme File

First, copy an existing theme file (e.g., darkBlue.js) from the node_modules/@techui/themes/ directory and save it to your project directory (e.g., src/themes/myCustomTheme.js).

Edit Background Parameters

Open the newly created theme file and locate the background field under the themeData object. You can modify the following parameters to adjust the background tone:

javascript

// src/themes/myCustomTheme.js
import { $c } from "@techui/colors";

const themeData = {
  // ... other configs
  background: {
    // --- View Layer (Front Content Layer) ---
    
    // Gradient flow array: Determines the main hue of the front background
    // Generates gradient based on gradType, supports TechUI color variables or Hex values
    view_grad: [$c.blF16, $c.blF18, $c.blF19],
    
    // Fill color of the SVG texture
    view_svgfill: $c.blF14,
    
    // Transparency of the SVG texture (0-1), lower values make the texture more subtle
    view_svgfill_opa: 0.2,

    // --- Root Layer (Back Underlying Layer) ---
    
    // Base solid background color of the root container
    root: $c.blF19,
    
    // Fill color of the Root layer SVG texture
    root_svgfill: $c.blF16,
    
    // Transparency of the Root layer SVG texture
    root_svgfill_opa: 0.5
  },
  // ...
};

Register and Use

After modification, ensure you update the registration information at the bottom. Make sure the value (theme name) is globally unique, then import the file in your project entry file.

javascript

// src/themes/myCustomTheme.js
tTheme.register({
  value: "myCustomTheme", // Change to new unique name
  scheme: "dark",
  colors: [$c.blF16, $c.blF19],
  data: themeData
});

javascript

// main.js
import "./themes/myCustomTheme.js"; // Import custom theme

Once imported and switched to this theme, the global background color will update to your configured style.

Development Usage

Dynamic Background Switching

In business components, you can switch backgrounds by modifying $backgroundConfig to trigger an update.

javascript

<script setup>
import { inject, reactive } from 'vue';

// 1. Inject global configuration
const { $backgroundConfig } = inject('$global');

// 2. Define modification function
const changeBackground = (patternName) => {
  // Update configuration object
  $backgroundConfig.value = {
    ...$backgroundConfig.value,
    SvgPattern: {
      ...$backgroundConfig.value.SvgPattern,
      viewSvgName: patternName, // Switch View layer pattern
      gradType: "radial",       // Switch to radial gradient
      gradOrientation: "circle at center"
    }
  };
  
  // Note: Internal implementation of TechUI watches for changes in $backgroundConfig
  // and automatically calls initBG() to regenerate styles, so no manual call is needed.
};
</script>

<template>
  <button @click="changeBackground('circuitDiagram')">
    Switch to Circuit Diagram Background
  </button>
</template>

Gradient Direction Reference

The gradOrientation property maps directly to CSS Gradient syntax, supporting the following common values:

Linear Gradient (line):
- to top
- to right
- to bottom right
- 45deg
Radial Gradient (radial):
- circle
- circle at center
- ellipse at bottom (Common, bottom glow effect)
- circle closest-side

Pattern Library

The system includes a rich library of SVG textures, all of which support seamless tiling. You can use the following Key values when configuring rootSvgName or viewSvgName:

Basic Geometry (Basic)

dots: Dot matrix
lineGrid: Line matrix
slashParallel: Parallel slashes
crosshairA: Crosshair A
crosshairB: Crosshair B
test: Test pattern

Cubes & Blocks (Cubes & Blocks)

blocks: Bricks
cubeA: Cube A
cubeB: Cube B
cubeC: Cube C
triangleA: Triangle A
triangleB: Triangle B

Hexagonal Series (Hexagonal)

hexagonA: Hexagon A
hexagonB: Hexagon B
hexagonC: Hexagon C
hexagonD: Hexagon D
HexagonCurved: Curved Hexagon

Weaving & Diamond (Weaving & Diamond)

diamondFlipped: Flipped Diamond
diamondLattice: Diamond Lattice
diamondPixel: Pixel Diamond
diamondWeaving: Woven Diamond
lineWeaving: Line Weaving
rectWeavingA: Rectangular Weaving A
rectWeavingB: Rectangular Weaving B
rectWeavingC: Rectangular Weaving C

Circular & Waves (Circular & Waves)

circularOverlayA: Circular Overlay A
circularOverlayB: Circular Overlay B
shellA: Shell A
shellB: Shell B
waveA: Wave A
waveB: Wave B

Maze & Abstract (Maze & Abstract)

mazeA: Maze A
mazeB: Maze B
mazeC: Maze C
mazeD: Maze D
circuitDiagram: Circuit Diagram
contourLine: Contour Line
totem: Totem

Nature & Zigzag (Nature & Zigzag)

mountains: Mountains
rain: Raindrops
zigZagA: Zigzag A
zigZagB: Zigzag B

Future Outlook

The current version of the global background is primarily based on static SVG tiling technology. Future iterations plan to add support for:

Pure Gradient Backgrounds: Using advanced CSS3 gradient algorithms without texture overlays.
Dynamic Backgrounds: Supporting dynamic backgrounds rendered by Canvas or WebGL (e.g., meteors, particle effects) to meet higher-level visualization needs.

Acknowledgements

These SVG vector backgrounds stored in the Wasm module were sourced from the internet. Due to their age, their original sources can no longer be traced.

The TechUI team will try to identify these free SVG Patterns and list them in this section.

Global Background ​

Core Architecture ​

Root Background (Back Layer) ​

View Background (Front Layer) ​

Control Strategy ​

Display Control ($gBackground) ​

Style Configuration ($backgroundConfig) ​

Modifying Background Color ​

Copy Theme File ​

Edit Background Parameters ​

Register and Use ​

Development Usage ​

Dynamic Background Switching ​

Gradient Direction Reference ​

Pattern Library ​

Basic Geometry (Basic) ​

Cubes & Blocks (Cubes & Blocks) ​

Hexagonal Series (Hexagonal) ​

Weaving & Diamond (Weaving & Diamond) ​

Circular & Waves (Circular & Waves) ​

Maze & Abstract (Maze & Abstract) ​

Nature & Zigzag (Nature & Zigzag) ​

Future Outlook ​

Acknowledgements ​

Global Background

Core Architecture

Root Background (Back Layer)

View Background (Front Layer)

Control Strategy

Display Control ($gBackground)

Style Configuration ($backgroundConfig)

Modifying Background Color

Copy Theme File

Edit Background Parameters

Register and Use

Development Usage

Dynamic Background Switching

Gradient Direction Reference

Pattern Library

Basic Geometry (Basic)

Cubes & Blocks (Cubes & Blocks)

Hexagonal Series (Hexagonal)

Weaving & Diamond (Weaving & Diamond)

Circular & Waves (Circular & Waves)

Maze & Abstract (Maze & Abstract)

Nature & Zigzag (Nature & Zigzag)

Future Outlook

Acknowledgements