palette

KO | EN

gitlite — search

#javascript #python #react #llm #machine-learning #deep-learning #linux #awesome #cli #kubernetes #awesome-list #security #mcp #open-source

(★ 84)

🎨 A visual theme editing tool for Mand Mobile

File Explorer

Download Latest Version (.zip)

- build.js
- check-versions.js
- utils.js
- vue-loader.conf.js
- webpack.base.conf.js
- webpack.dev.conf.js
- webpack.prod.conf.js
- dev.env.js
- index.js
- prod.env.js
- - responsive.js
- index.html
- - github.png
  - mand-mobile.css
- - animation-name.vue
  - card.vue
  - editor.vue
  - footer.vue
  - header.vue
  - previewer.vue
  - recorder.vue
  - searcher.vue
  - status.vue
- - default-theme-style-variable.js
  - index.js
  - style-variable-info.js
  - translation.js
- - action-bar.vue
  - action-sheet.vue
  - agree.vue
  - all-in-one.vue
  - bill.vue
  - brand-color.vue
  - button.vue
  - captcha.vue
  - cashier.vue
  - cell-item.vue
  - chart.vue
  - check-box.vue
  - check-list.vue
  - check.vue
  - codebox.vue
  - date-picker.vue
  - detail-item.vue
  - dialog.vue
  - drop-menu.vue
  - field.vue
  - icon.vue
  - image-viewer.vue
  - index.js
  - input-item.vue
  - landscape.vue
  - notice-bar.vue
  - number-keyboard.vue
  - picker.vue
  - popup.vue
  - radio.vue
  - result-page.vue
  - selector.vue
  - slider.vue
  - stepper.vue
  - steps.vue
  - swiper.vue
  - switch.vue
  - tab-bar.vue
  - tab-picker.vue
  - tabs.vue
  - tag.vue
  - textarea-item.vue
  - tip.vue
  - toast.vue
- - index.js
- - index.js
- - global.styl
- - css.js
  - data.js
  - file.js
  - index.js
  - store.js
- - 404.vue
  - edit.vue
  - generate.vue
  - home.vue
  - list.vue
  - record.vue
- App.vue
- main.js
- .gitkeep
- responsive.js
.babelrc
.editorconfig
.eslintignore
.eslintrc.js
.gitignore
.npmrc
.postcssrc.js
.prettierignore
.prettierrc
index.html
LICENSE
package-lock.json
package.json
README.md

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

<h2 align="center">Mand Mobile Palette</h2>

> 🎨 A visual theme editing tool for Mand Mobile

Using `Palette`, you can modify the style of [Mand Mobile](https://didi.github.io/mand-mobile) components and eventually generate `.styl` and `.css` files and then import the custom theme style file to your project.

- [Start Making Theme](https://mand-mobile.github.io/palette)

Note: `Palette` is based on [Css Variable](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Using_CSS_variables), please use it in the following [browsers](https://caniuse.com/#search=css%20variable).

### Mand Mobile Style

#### Stylus

* Configure `.babelrc`

```javascript
{
    // ...
    "plugins": [
        ["import", { "libraryName": "mand-mobile", "libraryDirectory": "src" }]
    ]
}
```

* Import

```javascript
import { button, dialog } from 'mand-mobile'
```

Find more details in [Mand Mobile - Custom Theme](https://didi.github.io/mand-mobile/#/en-US/docs/theme).

#### Css

```javascript
import Vue from 'vue'
import mandMobile from 'mand-mobile'
import 'mand-mobile/lib/mand-mobile.css'

Vue.use(mandMobile)
```

### How Palette Works

### Development

```
git clone git@github.com:mand-mobile/palette.git
cd palette
npm install
npm run dev
```
Open your browser and visit http://127.0.0.1:4000.

palette

File Explorer

Today's picks

Was this content helpful?

Recent Feedback

palette

File Explorer

Today's picks

Was this content helpful?

Recent Feedback

Download README