fix(theme): text color of page header right side (#3008)

packages/core/client/src/pm/PluginManagerLink.tsx

@@ -6,16 +6,18 @@ import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
 import { useACLRoleContext } from '../acl/ACLProvider';
 import { ActionContextProvider, useCompile } from '../schema-component';
+import { useToken } from '../style';
 import { SettingsCenterContext, getPluginsTabs } from './index';
 
 export const PluginManagerLink = () => {
   const { t } = useTranslation();
   const navigate = useNavigate();
+  const { token } = useToken();
   return (
     <Tooltip title={t('Plugin manager')}>
       <Button
         data-testid={'plugin-manager-button'}
-        icon={<ApiOutlined />}
+        icon={<ApiOutlined style={{ color: token.colorTextHeaderMenu }} />}
         title={t('Plugin manager')}
         onClick={() => {
           navigate('/admin/pm/list');
@@ -42,6 +44,7 @@ export const SettingsCenterDropdown = () => {
   const compile = useCompile();
   const navigate = useNavigate();
   const itemData = useContext(SettingsCenterContext);
+  const { token } = useToken();
   const pluginsTabs = getPluginsTabs(itemData, snippets);
   const bookmarkTabs = getBookmarkTabs(pluginsTabs);
   const menu = useMemo<MenuProps>(() => {
@@ -70,7 +73,7 @@ export const SettingsCenterDropdown = () => {
       <Dropdown placement="bottom" menu={menu}>
         <Button
           data-testid="settings-center-button"
-          icon={<SettingOutlined />}
+          icon={<SettingOutlined style={{ color: token.colorTextHeaderMenu }} />}
           // title={t('All plugin settings')}
         />
       </Dropdown>

packages/core/client/src/schema-component/core/DesignableSwitch.tsx

@@ -4,10 +4,12 @@ import React from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { useTranslation } from 'react-i18next';
 import { useDesignable } from '..';
+import { useToken } from '../../style';
 
 export const DesignableSwitch = () => {
   const { designable, setDesignable } = useDesignable();
   const { t } = useTranslation();
+  const { token } = useToken();
   const style = {};
   if (designable) {
     style['backgroundColor'] = 'var(--colorSettings)';
@@ -21,7 +23,7 @@ export const DesignableSwitch = () => {
       <Button
         data-testid={'ui-editor-button'}
         // selected={designable}
-        icon={<HighlightOutlined />}
+        icon={<HighlightOutlined style={{ color: token.colorTextHeaderMenu }} />}
         title={t('UI Editor')}
         // subtitle={'Ctrl+Shift+U'}
         style={style}

packages/core/client/src/user/CurrentUser.tsx

@@ -4,7 +4,7 @@ import { App, Dropdown, Menu, MenuProps } from 'antd';
 import React, { createContext, useCallback, useMemo as useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
-import { useACLRoleContext, useAPIClient, useCurrentUserContext } from '..';
+import { useACLRoleContext, useAPIClient, useCurrentUserContext, useToken } from '..';
 import { useCurrentAppInfo } from '../appInfo/CurrentAppInfoProvider';
 import { useChangePassword } from './ChangePassword';
 import { useCurrentUserSettingsMenu } from './CurrentUserSettingsMenuProvider';
@@ -168,6 +168,7 @@ export const DropdownVisibleContext = createContext(null);
 export const CurrentUser = () => {
   const [visible, setVisible] = useState(false);
   const { data } = useCurrentUserContext();
+  const { token } = useToken();
 
   return (
     <div style={{ display: 'inline-flex', verticalAlign: 'top' }}>
@@ -191,7 +192,7 @@ export const CurrentUser = () => {
               white-space: nowrap;
               text-overflow: ellipsis;
             `}
-            style={{ cursor: 'pointer', border: 0, padding: '16px', color: 'rgba(255, 255, 255, 0.65)' }}
+            style={{ cursor: 'pointer', border: 0, padding: '16px', color: token.colorTextHeaderMenu }}
           >
             {data?.data?.nickname || data?.data?.username || data?.data?.email}
           </span>