add danmuku theme

packages/artplayer-document/docs/en/Plugins/danmuku.mdx

@@ -89,6 +89,7 @@ var art = new Artplayer({
             maxLength: 100, // The maximum number of words that can be input can be input box
             minWidth: 200, // At the at least width of the input box
             maxWidth: 400, // Maximum width in the input box
+            theme: 'dark', // The theme color of the input box
             beforeEmit: (danmu) => !!danmu.text.trim(), // Custom verification before the barrage emit
             mount: undefined, // Customized input box mount position
         }),

packages/artplayer-document/docs/zh-cn/Plugins/danmuku.mdx

@@ -89,6 +89,7 @@ var art = new Artplayer({
             maxLength: 100, // 输入框最大可输入的字数，范围在[0 ~ 500]
             minWidth: 200, // 输入框最小宽度，范围在[0 ~ 500]，填 0 则为无限制
             maxWidth: 400, // 输入框最大宽度，范围在[minWidth ~ Infinity]，填 0 则为 100% 宽度
+            theme: 'dark', // 输入框自定义挂载时的主题色，默认为 dark，可以选填亮色 light
             beforeEmit: (danmu) => !!danmu.text.trim(), // 发送弹幕前的自定义校验，返回 true 则可以发送
 
             // 通过 mount 选项可以自定义输入框挂载的位置，默认挂载于播放器底部，仅在当宽度小于最小值时生效

packages/artplayer-plugin-danmuku/src/danmuku.js

@@ -61,6 +61,7 @@ export default class Danmuku {
             minWidth: 200,
             maxWidth: 400,
             mount: undefined,
+            theme: 'dark',
             beforeEmit: () => true,
         };
     }
@@ -83,6 +84,7 @@ export default class Danmuku {
             minWidth: 'number',
             maxWidth: 'number',
             mount: 'undefined|htmldivelement',
+            theme: 'string',
             beforeEmit: 'function',
         };
     }

packages/artplayer-plugin-danmuku/src/setting.js

@@ -86,6 +86,10 @@ export default function setting(art, danmuku) {
             addClass($panel, 'art-backdrop-filter');
         }
 
+        if (option.theme) {
+            addClass($emitter, `art-danmuku-theme-${option.theme}`);
+        }
+
         let timer = null;
         let mode = option.mode;
         let color = option.color;

packages/artplayer-plugin-danmuku/src/style.less

@@ -182,24 +182,32 @@
         height: 34px;
 
         .art-danmuku-left {
-            border: 1px solid #dadada;
-            background: #f4f4f4;
-
             .art-danmuku-style {
                 .art-danmuku-style-panel {
                     left: 0;
                 }
+            }
+        }
+
+        .art-danmuku-send {
+            width: 60px;
+        }
+
+        &.art-danmuku-theme-light {
+            .art-danmuku-left {
+                border: 1px solid #dadada;
+                background: #f4f4f4;
     
-                .art-icon svg {
+                .art-danmuku-style .art-icon svg {
                     fill: #666;
                 }
-            }
-    
-            .art-danmuku-input {
-                color: #000000;
-    
-                &::placeholder, &::-webkit-input-placeholder {
-                    color: rgb(0 0 0 / 50%);
+        
+                .art-danmuku-input {
+                    color: #000000;
+        
+                    &::placeholder, &::-webkit-input-placeholder {
+                        color: rgb(0 0 0 / 50%);
+                    }
                 }
             }
         }