优化

client/web/plugins/com.msgbyte.theme.miku/manifest.json

@@ -0,0 +1,11 @@
+{
+  "label": "Hatsune Miku Theme",
+  "label.zh-CN": "Miku初音未来主题",
+  "name": "com.msgbyte.theme.miku",
+  "url": "/plugins/com.msgbyte.theme.miku/index.js",
+  "version": "0.0.0",
+  "author": "msgbyte",
+  "description": "Hatsune Miku theme, supports light and dark colors",
+  "description.zh-CN": "初音未来主题，支持亮色与暗色",
+  "requireRestart": false
+}

client/web/plugins/com.msgbyte.theme.miku/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@plugins/com.msgbyte.theme.miku",
+  "main": "src/index.ts",
+  "version": "0.0.0",
+  "private": true,
+  "dependencies": {}
+}

client/web/plugins/com.msgbyte.theme.miku/src/index.ts

@@ -0,0 +1,21 @@
+import { regPluginColorScheme, sharedEvent } from '@capital/common';
+
+regPluginColorScheme({
+  label: 'Miku 葱',
+  name: 'light+miku',
+});
+
+regPluginColorScheme({
+  label: 'Miku 葱(夜间模式)',
+  name: 'dark+miku',
+});
+
+/**
+ * 异步加载以防止入口文件过大阻塞主应用加载(因为有图片)
+ */
+sharedEvent.on('loadColorScheme', (colorSchemeName) => {
+  if (colorSchemeName === 'light+miku' || colorSchemeName === 'dark+miku') {
+    console.log('正在加载初音未来主题...');
+    import('./theme.less');
+  }
+});

client/web/plugins/com.msgbyte.theme.miku/src/theme.less

@@ -0,0 +1,57 @@
+#tailchat-app.theme-miku {
+  @primary-color: #39C5BB;
+
+  --tc-primary-color: @primary-color;
+  --tc-background-image: url(./bg.jpg);
+
+  .bg-navbar-light {
+    background-color: @primary-color;
+
+    .bg-gray-400 {
+      background-color: darken(@primary-color, 10%);
+    }
+  }
+
+  .bg-sidebar-light {
+    background-color: lighten(@primary-color, 20%);
+  }
+
+  .bg-content-light {
+    background-color: lighten(@primary-color, 40%);
+  }
+
+  [data-tc-role^=content-] {
+    position: relative;
+
+    &::before {
+      content: '';
+      position: absolute;
+      display: block;
+      left: 0;
+      top: 0;
+      bottom: 0;
+      right: 0;
+      background-image: var(--tc-background-image);
+      background-size: cover;
+      background-repeat: no-repeat;
+      background-position: center;
+      opacity: 0.15;
+    }
+  }
+
+  &.dark {
+    --tc-primary-color: darken(@primary-color, 10%);
+
+    .dark\:bg-navbar-dark {
+      background-color: darken(@primary-color, 40%);
+    }
+
+    .dark\:bg-sidebar-dark {
+      background-color: darken(@primary-color, 20%);
+    }
+
+    .dark\:bg-content-dark {
+      background-color: @primary-color;
+    }
+  }
+}

client/web/plugins/com.msgbyte.theme.miku/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "esModuleInterop": true,
+    "jsx": "react",
+    "paths": {
+      "@capital/*": ["../../src/plugin/*"],
+    }
+  }
+}

client/web/plugins/com.msgbyte.theme.miku/types/index.d.ts

@@ -0,0 +1 @@
+declare module '*.less';