feat(theme-toolbar): add theme selection toolbar for customizable themes

packages/drawnix/src/components/toolbar/theme-toolbar.tsx

@@ -0,0 +1,34 @@
+import { useBoard } from '@plait/react-board';
+import classNames from 'classnames';
+import {
+  ATTACHED_ELEMENT_CLASS_NAME,
+  BoardTransforms,
+  ThemeColorMode,
+} from '@plait/core';
+import { Island } from '../island';
+
+export const ThemeToolbar = () => {
+  const board = useBoard();
+  const theme = board.theme;
+  return (
+    <Island
+      padding={1}
+      className={classNames('theme-toolbar', ATTACHED_ELEMENT_CLASS_NAME)}
+    >
+      <select
+        onChange={(e) => {
+          const value = (e.target as HTMLSelectElement).value;
+          BoardTransforms.updateThemeColor(board, value as ThemeColorMode);
+        }}
+        value={theme.themeColorMode}
+      >
+        <option value="default">默认</option>
+        <option value="colorful">缤纷</option>
+        <option value="soft">柔和</option>
+        <option value="retro">复古</option>
+        <option value="dark">暗夜</option>
+        <option value="starry">星空</option>
+      </select>
+    </Island>
+  );
+};

packages/drawnix/src/drawnix.tsx

@@ -12,7 +12,7 @@ import {
 import React, { useState } from 'react';
 import { withGroup } from '@plait/common';
 import { DrawPointerType, withDraw } from '@plait/draw';
-import { MindPointerType, withMind } from '@plait/mind';
+import { MindPointerType, MindThemeColors, withMind } from '@plait/mind';
 import MobileDetect from 'mobile-detect';
 import { withMindExtend } from './plugins/with-mind-extend';
 import { withCommonPlugin } from './plugins/with-common';
@@ -25,6 +25,7 @@ import './styles/index.scss';
 import { withDrawnixHotkey } from './plugins/with-hotkey';
 import { FreehandShape } from './plugins/freehand/type';
 import { withFreehand } from './plugins/freehand/with-freehand';
+import { ThemeToolbar } from './components/toolbar/theme-toolbar';
 
 export type DrawnixProps = {
   value: PlaitElement[];
@@ -61,9 +62,14 @@ export const Drawnix: React.FC<DrawnixProps> = ({
     withMindExtend,
     withCommonPlugin,
     withDrawnixHotkey,
-    withFreehand
+    withFreehand,
   ];
-  const options: PlaitBoardOptions = {};
+  const options: PlaitBoardOptions = {
+    readonly: false,
+    hideScrollbar: false,
+    disabledScrollOnNonFocus: false,
+    themeColors: MindThemeColors,
+  };
   const [appState, setAppState] = useState<DrawnixState>(() => {
     // TODO: need to consider how to maintenance the pointer state in future
     const md = new MobileDetect(window.navigator.userAgent);
@@ -97,6 +103,7 @@ export const Drawnix: React.FC<DrawnixProps> = ({
           }}
         ></CreationToolbar>
         <ZoomToolbar></ZoomToolbar>
+        <ThemeToolbar></ThemeToolbar>
         <PopupToolbar></PopupToolbar>
       </Wrapper>
     </div>

packages/drawnix/src/styles/index.scss

@@ -66,6 +66,29 @@
             }
         }
     }
+    .theme-toolbar {
+        position: absolute;
+        bottom: 36px;
+        right: 36px;
+        @include isMobile {
+            display: none;
+        }
+        select {
+            width: 100px;
+            background-color: var(--color-surface-secondary-container);
+            color: var(--color-on-surface);
+            border-radius: var(--border-radius-sm);
+            padding: 4px 8px;
+            cursor: pointer;
+            border: none;
+            outline: none;
+            font-size: 14px;
+            font-weight: 500;
+            &:hover {
+                background-color: var(--color-surface-primary-container);
+            }
+        }
+    }
     .drawnix-link, a {
         font-weight: 500;
         text-decoration: none;
@@ -79,5 +102,5 @@
         &:active {
         text-decoration: none;
         }
-  }
+    }
 }