Skip to content
Get packs

Guide · Open source

How to use coloruicss: install and set up ColorUI for mini programs

Updated · written with AI from the project's own documentation and checked against our catalogue data

coloruicss, known as ColorUI, is an MIT-licensed CSS library of ready-made styles and components that you apply through class names. It is aimed at WeChat mini program interfaces, with setup notes for UniApp and native mini programs. This guide walks through cloning the repository, importing the stylesheets, and adding the custom navigation bar component.

ColorUIweilanwl/coloruicss · ★ 12.4k · MIT

Quick start

  1. 1Clone the repository. Run git clone on the coloruicss repository and open the downloaded folder.
  2. 2Choose your platform folder. Use Colorui-UniApp for UniApp, or demo and template for native mini programs.
  3. 3Copy the colorui folder. Place the colorui folder in the root of your project.
  4. 4Import the core stylesheets. Import main and icon styles in App.vue or App.wxss, then add your own CSS.
  5. 5Turn off the system navigation bar. Set navigationStyle to custom in pages.json or window in App.json.
  6. 6Use cu-custom on a page. Register the component and place cu-custom with bgColor, isBack and slots on the page.

What you need before you start

The README describes two starting points: a WeChat Developer Tools project for native mini programs, or a UniApp project set up with Vue. Pick the one that matches the app you are building, since the import paths differ between them.

  • WeChat Developer Tools, for native mini program development
  • Or a UniApp project using Vue
  • Git, to clone the repository

Get the ColorUI source code

Clone the repository from GitHub. The README describes the project as source you download and then copy folders from, so you will need the files on your machine before you can use them.

  • Clone the repository and open the downloaded folder.
  • For UniApp, use the Colorui-UniApp folder inside the download.
  • For native mini programs, use the demo folder for an existing project or the template folder for a new one.
git clone https://github.com/weilanwl/coloruicss

Add ColorUI styles to a UniApp project

Copy the colorui folder from the UniApp source into the root of your project. Then import the key stylesheets in App.vue so the classes are available on every page.

The README lists main.css and icon.css as the key files, and you can add your own project CSS below them.

  • Copy the /colorui folder to your project root.
  • Import main.css and icon.css in App.vue.
  • Add your own stylesheet after them.
<style> @import "colorui/main.css"; @import "colorui/icon.css"; @import "app.css"; /* 你的项目css */ .... </style>

Add ColorUI styles to a native mini program

For a native mini program, copy the colorui folder into your project root and import main.wxss and icon.wxss in App.wxss. The README uses the same pattern as the UniApp setup, with the WeChat style file extension.

  • Copy the /colorui folder to your project root.
  • Import main.wxss and icon.wxss in App.wxss.
  • Add your own styles below the imports.
@import "colorui/main.wxss"; @import "colorui/icon.wxss"; @import "app.css"; /* 你的项目css */ ....

Use the custom navigation bar component

ColorUI includes a simple wrapper for the navigation bar. You can use it as it is, or copy its structure and change it. In UniApp, you first set the custom navigation style in pages.json, then register the component globally in main.js.

On a page, the component takes bgColor, isBack and bgImage props, plus slots named backText, content and right. The README notes that the right slot has limited space on the mini program side.

  • Set navigationStyle to custom in pages.json (UniApp) or window in App.json (native).
  • Register the cu-custom component globally.
  • Pass a background class such as bg-gradual-blue to bgColor.
  • Use the backText and content slots for the back label and title.
<cu-custom bgColor="bg-gradual-blue" :isBack="true"> <block slot="backText">返回</block> <block slot="content">导航栏</block> </cu-custom>

Read the examples and adapt them

The README says ColorUI includes some interactive examples to give you ideas for your own work. The interactive parts are simple, so treat them as starting points rather than finished features.

Because the library is CSS-based, your main job is choosing class names and composing them into your own pages.

  • Start from the demo or template folder to see working pages.
  • Replace the placeholder text and colors with your own content.
  • Keep your own styles in a separate file so library updates stay easy to manage.

What people use it for

  • Building a WeChat mini program with bold, high-saturation colors
  • Adding a colored custom navigation bar with a back button to mini program pages
  • Styling a UniApp Vue project with prebuilt CSS classes
  • Starting a mini program from the provided template and adjusting it

Frequently asked questions

Is coloruicss free to use?

Yes. The project is licensed under MIT, as stated in the README. You can read the license text linked there and check its terms for your own project.

What do I need to install coloruicss?

The README mentions WeChat Developer Tools for native mini programs or a UniApp project setup. You clone the repository from GitHub and copy the colorui folder into your project.

Can I use coloruicss on a regular website?

The README does not describe web usage. It focuses on WeChat mini programs, native mini program setups and UniApp, so a standard website is outside what the source covers.

What are the alternatives to coloruicss?

Projects listed as comparable include uView, Vant Weapp, iview-weapp and WeUI. Compare them against your platform and design needs before choosing.

Is coloruicss still maintained?

The analysis notes the last push shown is April 2024 and no release is listed. Check the repository activity yourself before starting a long project.

Is there a V3 version of coloruicss?

The README points to a separate beta repository for V3, linked as coloruiBeta. That version is in a separate repository, so you should confirm its status there.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

ColorUI suits developers building WeChat mini programs or UniApp Vue projects who want quick, bold, colorful styling and a navigation bar they can copy and adjust. If you build regular websites, need a library with recent activity, or require V3, consider the comparable projects such as uView, Vant Weapp, iview-weapp or WeUI instead.

Install options & downloads