feat: 新增了主题色配置 primaryColor, 现在您可以修改组件中各元素的主色调

packages/oh-my-live2d/src/config/config.ts

@@ -6,6 +6,7 @@ const libServicePath = 'https://lib.oml2d.com';
 // 默认配置选项, 实例化时会与用户传进来的合并
 export const DEFAULT_OPTIONS: DefaultOptions = {
   fixed: true,
+  primaryColor: '#58b0fc',
   sayHello: true,
   transitionTime: 1000,
   parentElement: document.body,

packages/oh-my-live2d/src/config/style.ts

@@ -1,120 +1,122 @@
-export const globalStyle = `
-@keyframes oml2d-shake-tips{
-  0% {
-    transform: translate(-50%, 5%) scale(0.99);
-  }
-  50% {
- 
-    transform: translate(-50%, 0%) scale(1);
-  }
-  100% {
-    transform: translate(-50%, 5%) scale(0.99);
-  }
-}
-
-@keyframes oml2d-stage-slide-in {
-  from {
-    transform: translateY(130%);
-  }
-  to {
-    transform: translateY(0%);
-  }
-}
-
-@keyframes oml2d-stage-slide-out {
-  from {
-    transform: translateY(0%);
-  }
-  to {
-    transform: translateY(130%);
-  }
-}
-
-@keyframes oml2d-display-tips {
-  0% {
-    opacity: 0;
-    visibility: hidden;
-  }
-  100% {
-    opacity: 1;
-    visibility: visible;
-  }
-}
-
-@keyframes oml2d-hidden-tips {
-  0% {
-    opacity: 1;
-    visibility: visible;
-  }
-  100% {
-    opacity: 0;
-    visibility: hidden;
-  }
-}
-@keyframes oml2d-loading-rotate {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
-.oml2d-icon {
-  width: 1em; 
-  height: 1em;
-  vertical-align: -0.15em;
-  fill: currentColor;
-  overflow: hidden;
-}
-
-.oml2d-loading{
-  animation-name: oml2d-loading-rotate;
-  animation-duration: 600ms;
-  animation-iteration-count: infinite;
-  animation-timing-function: linear;
-}
-.oml2d-menus-item {
-  width: 36px;
-  height: 36px;
-  border-radius: 50%;
-  display: flex;
-  justify-content: center;
-  box-sizing: border-box;
-  align-items: center;
-  transition: all 300ms;
-  color: #58b0fc;
-  cursor: pointer;
-  background-color: #fff;
-}
-
-.oml2d-menus-item:hover {
-  background-color: #58b0fc;
-  color: #fff;
-  box-shadow: 0 0 5px #000;
-}
-
-#oml2dMenus .oml2d-menus-item:not(:last-child) {
-  margin-bottom: 10px;
-}
-
-
-
-@keyframes oml2d-status-bar-slide-out {
-  0% {
-    transform: translateX(0%);
-  }
-  100% {
-    transform: translateX(-120%);
-  }
-}
-
-
-@keyframes oml2d-status-bar-slide-in {
-  0% {
-    transform: translateX(-120%);
-  }
-  100% {
-    transform: translateX(0%);
-  }
-}
-`;
+export const generateGlobalStyle = (primaryColor: string): string => {
+  return `
+  @keyframes oml2d-shake-tips{
+    0% {
+      transform: translate(-50%, 5%) scale(0.99);
+    }
+    50% {
+   
+      transform: translate(-50%, 0%) scale(1);
+    }
+    100% {
+      transform: translate(-50%, 5%) scale(0.99);
+    }
+  }
+  
+  @keyframes oml2d-stage-slide-in {
+    from {
+      transform: translateY(130%);
+    }
+    to {
+      transform: translateY(0%);
+    }
+  }
+  
+  @keyframes oml2d-stage-slide-out {
+    from {
+      transform: translateY(0%);
+    }
+    to {
+      transform: translateY(130%);
+    }
+  }
+  
+  @keyframes oml2d-display-tips {
+    0% {
+      opacity: 0;
+      visibility: hidden;
+    }
+    100% {
+      opacity: 1;
+      visibility: visible;
+    }
+  }
+  
+  @keyframes oml2d-hidden-tips {
+    0% {
+      opacity: 1;
+      visibility: visible;
+    }
+    100% {
+      opacity: 0;
+      visibility: hidden;
+    }
+  }
+  @keyframes oml2d-loading-rotate {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+  .oml2d-icon {
+    width: 1em; 
+    height: 1em;
+    vertical-align: -0.15em;
+    fill: currentColor;
+    overflow: hidden;
+  }
+  
+  .oml2d-loading{
+    animation-name: oml2d-loading-rotate;
+    animation-duration: 600ms;
+    animation-iteration-count: infinite;
+    animation-timing-function: linear;
+  }
+  .oml2d-menus-item {
+    width: 36px;
+    height: 36px;
+    border-radius: 50%;
+    display: flex;
+    justify-content: center;
+    box-sizing: border-box;
+    align-items: center;
+    transition: all 300ms;
+    color: ${primaryColor};
+    cursor: pointer;
+    background-color: #fff;
+  }
+  
+  .oml2d-menus-item:hover {
+    background-color: ${primaryColor};
+    color: #fff;
+    box-shadow: 0 0 5px #000;
+  }
+  
+  #oml2dMenus .oml2d-menus-item:not(:last-child) {
+    margin-bottom: 10px;
+  }
+  
+  
+  
+  @keyframes oml2d-status-bar-slide-out {
+    0% {
+      transform: translateX(0%);
+    }
+    100% {
+      transform: translateX(-120%);
+    }
+  }
+  
+  
+  @keyframes oml2d-status-bar-slide-in {
+    0% {
+      transform: translateX(-120%);
+    }
+    100% {
+      transform: translateX(0%);
+    }
+  }
+  `;
+};

packages/oh-my-live2d/src/modules/globalStyle.ts

@@ -0,0 +1,16 @@
+import { generateGlobalStyle } from '../config/style.js';
+import { createElement } from '../utils/index.js';
+
+type GlobalStyleType = { primaryColor: string };
+// 全局样式
+export class GlobalStyle {
+  styleSheet: HTMLElement;
+  constructor(private style: GlobalStyleType) {
+    this.styleSheet = createElement({ tagName: 'style', id: 'oml2dStyle', innerHtml: generateGlobalStyle(this.style.primaryColor) }); // 创建全局样式表
+    document.head.append(this.styleSheet);
+  }
+
+  reloadStyleSheet(style: GlobalStyleType): void {
+    this.styleSheet.innerHTML = generateGlobalStyle(style.primaryColor);
+  }
+}

packages/oh-my-live2d/src/modules/index.ts

@@ -1,6 +1,7 @@
 import type { Application } from 'pixi.js';
 import { isNumber, mergeDeep } from 'tianjie';
 
+import { GlobalStyle } from './globalStyle.js';
 import { Menus } from './menus.js';
 import { Model } from './model.js';
 import { Stage } from './stage.js';
@@ -10,6 +11,7 @@ import { DEFAULT_OPTIONS } from '../config/index.js';
 import { WindowSizeType } from '../constants/index.js';
 import type {
   ApplicationType,
+  CSSProperties,
   DefaultOptions,
   HitAreaFramesType,
   LoadMethod,
@@ -39,12 +41,24 @@ export class OhMyLive2D {
     private HitAreaFrames: HitAreaFramesType
   ) {
     this.options.sayHello && this.sayHello();
+
+    new GlobalStyle({ primaryColor: this.options.primaryColor }); // 加载全局样式
+
     this.stage = new Stage(this.options.parentElement, options); // 实例化舞台
-    this.statusBar = new StatusBar(this.options.parentElement); // 实例化状态条
+
+    this.statusBar = new StatusBar(this.options.parentElement, {
+      info: this.options.primaryColor,
+      error: '#F08080'
+    });
+
     this.tips = new Tips(this.stage.element, this.options.tips); // 提示框
+
     this.menus = new Menus(this.stage.element); // 菜单
+
     this.application = this.createApplication();
+
     this.initialize();
+    this.setCommonStyle();
     void checkVersion();
   }
 
@@ -60,6 +74,14 @@ export class OhMyLive2D {
     this.registerEvents();
   }
 
+  // 设置公共的样式
+  setCommonStyle(): void {
+    const commonStyle: CSSProperties = { backgroundColor: this.options.primaryColor };
+
+    this.tips.setStyle(commonStyle);
+    this.statusBar.setStyle(commonStyle);
+  }
+
   // 校验当前窗口大小
   verifyWindowSizeType(): void {
     if (this.mediaQuery.matches) {
@@ -168,7 +190,6 @@ export class OhMyLive2D {
 
     // copy 事件
     window.addEventListener('copy', () => {
-      // console.log('copy!');
       this.tips.copy();
     });
 

packages/oh-my-live2d/src/modules/stage.ts

@@ -1,6 +1,6 @@
 import { mergeDeep } from 'tianjie';
 
-import { CONFIG, globalStyle } from '../config/index.js';
+import { CONFIG } from '../config/index.js';
 import type { CSSProperties, Options } from '../types/index.js';
 import { createElement, setStyleForElement } from '../utils/index.js';
 
@@ -52,22 +52,12 @@ export class Stage {
     this.setStyle({
       width: '0px',
       height: '0px',
-      // position: 'relative'
       position: this.options.fixed ? 'fixed' : 'relative',
       left: 0,
       bottom: 0,
       zIndex: '9997',
       transform: 'translateY(130%)'
     });
-    // this.wrapperElement.style.position = this.options.fixed ? 'fixed' : 'relative';
-    // this.wrapperElement.style.overflow = 'hidden';
-    // this.wrapperElement.style.left = '0';
-    // this.wrapperElement.style.bottom = '0';
-    // this.wrapperElement.style.zIndex = '9999';
-
-    const styleSheet = createElement({ tagName: 'style', id: 'oml2dStyle', innerHtml: globalStyle }); // 创建全局样式表
-
-    document.head.append(styleSheet);
   }
 
   setStyle(style: CSSProperties, callback?: () => void): void {