Introducing OKee Mobile: An Open‑Source Vue Mobile Component Library with Theming Capabilities

OKee Mobile is the first open‑source mobile component library from the OKee Design ecosystem, hosted at https://okee.oceanengine.com/mobile/vue/#/zh-CN/intro with its source code on GitHub ( https://github.com/oceanengine/okeedesign-mobile-vue ).

The library aims to solve the common problem of selecting a component library that matches both business requirements and UI style by providing a design‑token‑driven system that can be easily configured for various ToC and ToB scenarios, especially data‑display use cases.

Currently, OKee Mobile ships 36 components and continuously evolves. Its distinguishing features include a robust theming experience:

Compile‑time Skinning

A set of global Less variables controls colors, border‑radius, fonts, animations, etc. Example Less variables are shown below:

@primary-color: @blue;
@primary-color-1: colorPalette('@{primary-color}', 7); // active state
@primary-color-2: colorPalette('@{primary-color}', 6); // main color
@primary-color-3: colorPalette('@{primary-color}', 5);
@primary-color-4: colorPalette('@{primary-color}', 3); // disabled
@primary-color-5: colorPalette('@{primary-color}', 1); // light
@z-index-1: 1;
@z-index-2: 3;
@z-index-3: 5;
@border-radius-1: 2px;
@border-radius-2: 4px;
@animation-duration-base: 0.3s;
@animation-duration-fast: 0.2s;

These tokens can be exported as var.json and merged into the project's less-loader configuration to apply a global skin.

Runtime Skinning

During the build, marked Less variables are transformed into CSS custom properties attached to the :root pseudo‑class. Changing the values under :root at runtime updates the entire UI without recompilation. The process involves:

Declaring selected Less variables as CSS variables in :root during compilation.

Replacing component styles with references to those CSS variables.

Modifying the CSS variable values in :root to switch themes on the fly.

A sample Webpack rule that injects the generated variables is:

const vars = require('./config/theme/var.json');
module.exports = {
  rules: [
    {
      test: /\.less$/,
      use: [
        {
          loader: 'less-loader',
          options: {
            javascriptEnabled: true,
            modifyVars: vars,
          },
        },
      ],
    },
  ],
};

The library also emphasizes core component capabilities, such as a highly configurable Table component designed for data‑intensive B2B applications where traditional list components fall short.

In summary, OKee Mobile provides a full‑stack UI solution with flexible theming, a rich set of components, and an open‑source roadmap that invites community contributions.