pilot-base-theme v1.1.0-beta

# pilot-base-theme

介绍

基于 iview3.5.4 版本的换肤功能。

• 当前版本 v1.1.0-beta

皮肤

安装

使用 npm:

npm i pilot-base-theme

使用 yarn

yarn add pilot-base-theme

快速使用

css 变量

@import '~pilot-base-theme/themes/vars.css';

iview

• 基于iview 自定义重写

@import '~pilot-base-theme/themes/iview.css';

libs

对以下几个共用库进行样式重写

• front-basic-component
• tree-vue-component
• easy-table
• v-table

@import '~pilot-base-theme/themes/libs.css';

换肤

在单页面应用中使用

# 直接修改html class即可
 (document.querySelector<HTMLElement>('html') as HTMLElement).setAttribute("class", theme);

qiankun 中使用

• 父子系统都需要引入css文件。
• 切换父系统 html 的 class 即可。

iframe 中使用

• 切换皮肤父子组件使用 postMessage 通信，切换子系统 html class 即可。

css变量

科技黑

:root {
  /* 背景色 */
  --pi-body-bg-color: #122946;
  --pi-breadcrumb-bg-color: rgba(0, 0, 0, 0.2);
  --pi-micro-bg-color: rgba(0,0,0,0.3);
  --pi-spin-bg-color: rbga(0,0,0,0.35);
  /* 主应用色 */
  --pi-primary-color: #4C93FF;
  --pi-linear-start-color: #009BEF;
  --pi-linear-end-color: #0061DA;
  --pi-hover-color: #2366BA;
  --pi-btn-color: #fff;
  --pi-link-hover-color: #EEF0F5;
  --pi-scroll-color: #2F73CD;
  --pi-title-bg-color: #00408c;
  --pi-shadow-color: rgba(177, 177, 177, 0.5);
  --pi-split-color: #245A95;
  --pi-box-color: #005acc;
  --pi-text-color: #ffffff;
  /* modal */
  --pi-modal-bg-color: #142F50;
  --pi-modal-body-color: #0E3864;
  --pi-modal-body-title-color: rgba(30, 116, 241, 0.15);
  --pi-modal-header-color: rgba(30, 116, 241, 0.4);
  --pi-modal-header-end-color: rgba(30, 116, 241, 0.4);
  --pi-modal-footer-color: rgba(2, 76, 150, 0.3);
  /* message */
  --pi-info-color: #239FFF;
  --pi-error-color: #D15454;
  --pi-success-color: #6DD56C;
  --pi-warning-color: #EE994C;
  --pi-gray-color: #C7C9CE;
  /* layout */
  --pi-layout-bg-color: #132e5a;
  --pi-header-bg-color: rgba(0, 0, 0, 0.4);
  --pi-header-bg-end-color: rgba(0, 0, 0, 0.4);
  --pi-tooltip-bg-color: rgba(70, 76, 91, 0.9);
  --pi-component-bg-color: #23467E;
  /* table */
  --pi-table-th-bg-color: rgba(78, 159, 255, 0.3);
  --pi-table-odd-bg-color: rgba(43, 106, 181, 0.15);
  --pi-table-even-bg-color: rgba(78, 159, 255, 0.05);
  --pi-table-input-bg-color: #121d43;
  --pi-table-hover-bg-color: rgba(78,159,255,0.05);
  /* date */
  --pi-date-header-color: #1E59A4;
  /* menu */
  --pi-menu-bg-color: #131F3B;
  --pi-menu-active-bg-color: #2F73CD;
  --pi-menu-hover-bg-color: #133968;
  /* input */
  --pi-disable-bg-color: rgba(0, 0, 0, 0.15);
  --pi-disable-border-color: rgba(0, 0, 0, 0);
  --pi-hover-bg-color: rgba(27, 145, 233, 0.1);
  --date-picker-cell-hover-bg: rgba(255, 255, 255, 0.1);
}

浅色

:root.theme-light-ems  {
  /* 背景色 */
  --pi-body-bg-color: #EEF0F5;
  --pi-breadcrumb-bg-color: #EEEEEE;
  --pi-micro-bg-color: #fff;
  --pi-spin-bg-color: rbga(255,255,255,0.35);
  /* 主应用色 */
  --pi-primary-color: #169BD5;
  --pi-linear-start-color: #22C7F0;
  --pi-linear-end-color: #1991CD;
  --pi-hover-color: #3EA5D2;
  --pi-btn-color: #169BD5;
  --pi-link-hover-color: #EEF0F5;
  --pi-scroll-color: rgba(22, 155, 213, 0.8);
  --pi-title-bg-color: rgba(30, 116, 241, 0.15);
  --pi-shadow-color: rgba(177, 177, 177, 0.5);
  --pi-split-color: #DBDBDB;
  --pi-box-color: #DBDBDB;
  --pi-text-color: #666666;
  /* modal */
  --pi-modal-bg-color: #fff;
  --pi-modal-body-color: #fff;
  --pi-modal-body-title-color: #D1EBFF;
  --pi-modal-header-color: #39A3DB;
  --pi-modal-header-end-color: #2567AB;
  --pi-modal-footer-color: #F4F4F4;
  /* message */
  --pi-info-color: #239FFF;
  --pi-error-color: #D15454;
  --pi-success-color: #6DD56C;
  --pi-warning-color: #EE994C;
  --pi-gray-color: #C7C9CE;
  /* layout */
  --pi-layout-bg-color: #fff;
  --pi-header-bg-color: #0F82AF;
  --pi-header-bg-end-color: #004E90;
  --pi-tooltip-bg-color: rgba(70, 76, 91, 0.9);
  --pi-component-bg-color: #fff;
  /* table */
  --pi-table-th-bg-color: rgba(27, 145, 233, 0.3);
  --pi-table-odd-bg-color: #FBFBFB;
  --pi-table-even-bg-color: #ffffff;
  --pi-table-input-bg-color: #121d43;
  --pi-table-hover-bg-color: rgba(27,145,233,0.30);
  /* date */
  --pi-date-header-color: #fff;
  /* menu */
  --pi-menu-bg-color: rgba(0, 0, 0, 0.74);
  --pi-menu-active-bg-color: rgba(0, 0, 0, 0.34);
  --pi-menu-hover-bg-color: rgba(0, 0, 0, 0.2);
  /* input */
  --pi-disable-bg-color: #f2f2f2;
  --pi-disable-border-color: #DDDDDD;
  --pi-hover-bg-color: rgba(27, 145, 233, 0.1);
  --date-picker-cell-hover-bg: #EFF6FF;
}