fix: change theme

Author: James-9696

packages/theme/src/fluent-editor/index.less

@@ -1,17 +1,33 @@
 @import '../custom.less';
 @import '../mixins/common.less';
+@import './vars.less';
 
 @editor-wrapper-prefix-cls: ~'@{css-prefix}editor-wrapper';
 @editor-prefix-cls: ~'@{css-prefix}editor';
 
 .@{editor-wrapper-prefix-cls} {
+  .inject-FluentEditor-vars();
+
   border: 1px solid #ddd;
   border-radius: 4px;
 
   .ql-toolbar.ql-snow {
     padding: 8px 16px 4px 16px;
     border: none;
 
+    svg {
+      font-size: 16px;
+
+      path {
+        fill: var(--tv-FluentEditor-select-icon-color);
+
+        &:hover,
+        &:focus {
+          fill: var(--tv-FluentEditor-select-icon-color-hover);
+        }
+      }
+    }
+
     .ql-formats {
       margin-right: 16px;
       margin-bottom: 4px;
@@ -46,28 +62,36 @@
       span.ql-lineheight,
       span.ql-header {
         .ql-picker-label {
-          color: #191919;
+          color: var(--tv-FluentEditor-selected-text-color);
           border: 1px solid transparent;
           border-radius: 2px;
 
           > svg {
             display: none;
           }
 
+          &:hover {
+            border-color: var(--tv-FluentEditor-select-border-color-hover);
+          }
+
           &::after {
+            display: inline-block;
             content: '';
             position: absolute;
-            width: 14px;
-            height: 14px;
+            width: 8px;
+            height: 8px;
             right: 8px;
-            top: calc(50% + 1px);
-            transform: translateY(-50%);
-            background: url(../images/chevron-down.svg) no-repeat center/100%;
+            top: calc(50% - 5px);
+            border-color: var(--tv-FluentEditor-select-box-icon-color);
+            border-style: solid;
+            border-width: 0 2px 2px 0;
+            transform: rotate(45deg);
           }
         }
 
         .ql-picker-label:hover {
-          border-color: #191919;
+          border-color: var(--tv-FluentEditor-select-border-color-hover);
+          color: var(--tv-FluentEditor-select-text-color);
         }
       }
 
@@ -104,13 +128,16 @@
         .ql-picker-options {
           padding: 3px 5px;
           border: none;
+          background-color: var(--tv-FluentEditor-select-bg-color);
+          border-radius: var(--tv-FluentEditor-select-border-radius);
+          box-shadow: var(--tv-FluentEditor-select-box-shadow);
 
           > .ql-picker-item {
-            color: #191919;
+            color: var(--tv-FluentEditor-select-text-color);
 
             &:hover {
-              background-color: rgba(25, 25, 25, 0.1);
-              color: #191919;
+              background-color: var(--tv-FluentEditor-select-bg-color-hover);
+              color: var(--tv-FluentEditor-select-active-text-color);
             }
 
             &::after {

packages/theme/src/fluent-editor/vars.less

@@ -0,0 +1,36 @@
+/**
+* Copyright (c) 2022 - present TinyVue Authors.
+* Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
+*
+* Use of this source code is governed by an MIT-style license.
+*
+* THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+* BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+* A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+*
+*/
+
+.inject-FluentEditor-vars() {
+  // 富文本图标颜色
+  --tv-FluentEditor-select-icon-color: var(--tv-color-icon);
+  // 富文本图标悬浮颜色
+  --tv-FluentEditor-select-icon-color-hover: var(--tv-color-icon-hover);
+  // 富文本下拉选项背景色
+  --tv-FluentEditor-select-bg-color: var(--tv-color-bg-2);
+  // 富文本下拉选项选中悬浮背景色
+  --tv-FluentEditor-select-bg-color-hover: var(--tv-color-bg-hover);
+  // 富文本下拉选项文字
+  --tv-FluentEditor-select-text-color: var(--tv-color-text);
+  // 富文本下拉选项文字边框
+  --tv-FluentEditor-select-border-color-hover: var(--tv-color-border-hover);
+  // 富文本下拉已选文字颜色
+  --tv-FluentEditor-selected-text-color: var(--tv-color-text-secondary);
+  // 富文本下拉选项选中文字颜色
+  --tv-FluentEditor-select-active-text-color: var(--tv-color-text-active);
+  // 富文本下拉选项面板圆角半径
+  --tv-FluentEditor-select-border-radius: var(--tv-border-radius-md);
+  // 富文本下拉选项面板阴影
+  --tv-FluentEditor-select-box-shadow: var(--tv-shadow-2-down);
+  // 富文本下拉框的图标颜色
+  --tv-FluentEditor-select-box-icon-color: var(--tv-color-icon);
+}