explaingit

weilanwl/coloruicss

★ 12,401VueAudience · designerComplexity · 2/5LicenseSetup · easy

TLDR

A bright, colorful CSS component library for WeChat mini-programs and UniApp that adds a high-saturation color palette, icon set, and a custom navigation bar to your app by copying one folder and importing two CSS files.

Mindmap

mindmap
  root((ColorUI))
    What it does
      CSS component library
      Bright color palette
      WeChat mini-programs
    Setup
      Copy colorui folder
      Import two CSS files
      Register cu-custom
    Features
      Color utilities
      Icon set
      Navigation bar
    Audience
      Frontend developers
      Mini-program devs
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Things people build with this

USE CASE 1

Add a vibrant pre-built color palette and UI components to a WeChat mini-program without writing custom CSS

USE CASE 2

Implement a configurable custom navigation bar on any page using the cu-custom component

USE CASE 3

Quickly prototype a visually distinctive Chinese mini-program UI using ready-made class names

Tech stack

CSSVueUniApp

Getting it running

Difficulty · easy Time to first run · 30min

Copy-and-import setup with no npm install required, but the library only works inside WeChat mini-program or UniApp environments.

MIT license, use freely for any purpose including commercial projects, as long as you keep the copyright notice.

In plain English

ColorUI is a CSS component library built for WeChat mini-programs and UniApp, a framework used to create apps that run on multiple Chinese mobile platforms from a single codebase. Its defining feature is a bright, high-saturation color palette intended to make mini-programs visually distinct. The library works by providing styles you apply through CSS class names, with no JavaScript framework lock-in required. Some basic interactive behavior is also included to give developers a starting point for common patterns. Setup follows a copy-and-import pattern. You download the source code, copy the colorui folder into your project root, and then import two core CSS files in your app global stylesheet: main.css for layout and color utilities, and icon.css for the icon set. After that, ColorUI classes are available throughout any page in your project. The library includes a custom navigation bar component called cu-custom. You register it once in your app entry file and can then place it on any page using a simple HTML-style tag. The component accepts parameters for background color (specified as a class name), background image path, and whether to show a back button. There are slot areas for back button text, the center title area, and a right-side area. The integration steps differ slightly depending on whether you are using UniApp or native WeChat mini-program development, and the README provides separate code examples for both. Community resources, including a QQ group for discussion and a shared template and asset library on Yuque, are directed at Chinese-speaking developers. A V3 beta version is being developed in a separate repository. The project is MIT-licensed and targets Vue 2.

Copy-paste prompts

Prompt 1
Add ColorUI to my UniApp project, walk me through copying the colorui folder and importing main.css and icon.css into my app stylesheet
Prompt 2
How do I register and use the cu-custom navigation bar component on a page in my WeChat mini-program?
Prompt 3
Show me how to use ColorUI color utility classes to style buttons, cards, and text in a UniApp page
Prompt 4
What is different about setting up ColorUI in a native WeChat mini-program versus a UniApp project?
Open on GitHub → Explain another repo

← weilanwl on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.