color mode switcher, update notification icon (#8066)

Co-authored-by: zhouwenxuan <aries@Mac.local>

frontend/src/assets/icons/dark-mode.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#999999;}
+</style>
+<title>dark-mode</title>
+<g id="dark-mode">
+	<path id="形状" class="st0" d="M12.4,1.1c1.5-0.4,2.7,1.2,2,2.5c-2.1,4-1.3,8.9,2,11.9s8.2,3.4,12,0.9c1.3-0.8,2.9,0.2,2.7,1.7
+		C29.8,25.6,23.5,31,16.1,31C7.8,31,1,24.2,1,15.8C1,8.8,5.7,2.7,12.4,1.1L12.4,1.1z M10.4,4.9c-4.3,2.9-7.2,7.9-6.1,13
+		s5.2,9,10.4,9.8s10.1-2.6,12.8-7.1c0.2-0.4,0.3-0.6,0.3-0.6c-6.6,2.6-11.8,0-14.6-3.1s-3.1-7.2-2.6-11.3l0.1-0.9L10.4,4.9z"/>
+</g>
+</svg>

frontend/src/assets/icons/light-mode.svg

@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#999999;}
+</style>
+<title>light-mode</title>
+<g id="light-mode">
+	<path id="形状" class="st0" d="M16,7c-5,0-9,4-9,9s4,9,9,9s9-4,9-9S21,7,16,7z M16,10c2.1,0,4.1,1.1,5.2,3c1.1,1.9,1.1,4.1,0,6
+		c-1.1,1.9-3.1,3-5.2,3c-3.3,0-6-2.7-6-6S12.7,10,16,10z M16,0c0.8,0,1.5,0.6,1.5,1.4l0,0.2v2.3c0,0.8-0.6,1.5-1.5,1.5
+		c-0.8,0-1.5-0.6-1.6-1.4l0-0.2V1.5C14.5,0.7,15.1,0,16,0z M27.3,4.7c0.6,0.6,0.6,1.5,0.1,2.1l-0.1,0.1l-1.6,1.6
+		c-0.6,0.6-1.5,0.6-2.1,0C23,8,22.9,7.1,23.4,6.4l0.1-0.1l1.6-1.6C25.7,4.1,26.7,4.1,27.3,4.7L27.3,4.7z M32,16
+		c0,0.8-0.6,1.5-1.4,1.5l-0.2,0h-2.3c-0.8,0-1.5-0.6-1.5-1.5c0-0.8,0.6-1.5,1.4-1.6l0.2,0h2.3C31.3,14.5,32,15.1,32,16L32,16z
+		 M27.3,27.3c-0.6,0.6-1.5,0.6-2.1,0.1l-0.1-0.1l-1.6-1.6c-0.6-0.6-0.6-1.5,0-2.1c0.5-0.6,1.5-0.7,2.1-0.2l0.1,0.1l1.6,1.6
+		C27.9,25.7,27.9,26.7,27.3,27.3L27.3,27.3z M16,32c-0.8,0-1.5-0.6-1.5-1.4l0-0.2v-2.3c0-0.8,0.6-1.5,1.5-1.5c0.8,0,1.5,0.6,1.6,1.4
+		l0,0.2v2.3C17.5,31.3,16.9,32,16,32L16,32z M4.7,27.3c-0.6-0.6-0.6-1.5-0.1-2.1l0.1-0.1l1.6-1.6c0.6-0.6,1.5-0.6,2.1,0
+		s0.7,1.5,0.2,2.1l-0.1,0.1l-1.6,1.6C6.3,27.9,5.3,27.9,4.7,27.3L4.7,27.3z M0,16c0-0.8,0.6-1.5,1.4-1.5l0.2,0h3.2
+		c0.8,0,1.5,0.6,1.5,1.5c0,0.8-0.6,1.5-1.4,1.6l-0.2,0H1.5C0.7,17.5,0,16.9,0,16L0,16z M4.7,4.7c0.6-0.6,1.5-0.6,2.1-0.1l0.1,0.1
+		l1.6,1.6c0.6,0.6,0.6,1.5,0,2.1C8,9,7.1,9.1,6.4,8.6L6.3,8.5L4.7,6.9C4.1,6.3,4.1,5.3,4.7,4.7L4.7,4.7z"/>
+</g>
+</svg>

frontend/src/assets/icons/notification.svg

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#999999;}
+</style>
+<title>notification</title>
+<g id="notification">
+	<path id="形状结合" class="st0" d="M14.1,26.2v0.6c0,1.1,0.9,1.9,1.9,1.9s1.9-0.9,1.9-1.9v-0.6H14.1z M21.1,8.4
+		c-1.6-1.5-3.7-2.2-5.9-2c-4,0.5-6.9,3.9-6.9,7.9V23h15.3v-9C23.6,11.9,22.7,9.9,21.1,8.4z M21.1,26.9c0,2.8-2.3,5.1-5.1,5.1
+		s-5.1-2.3-5.1-5.1v-0.6l-7.3,0c-0.5,0-0.9-0.2-1.2-0.5S2,24.9,2,24.5C2.1,23.6,2.8,23,3.7,23c0.4,0,0.8-0.2,1.1-0.4
+		c0.3-0.3,0.4-0.7,0.4-1.1v-7.4c0-5.4,3.9-10,9.2-10.7V1.6c0-0.5,0.2-0.9,0.5-1.2S15.7,0,16.2,0c0.8,0.1,1.4,0.8,1.4,1.7v1.6
+		c5.3,0.8,9.2,5.4,9.2,10.7v7.4c0,0.8,0.7,1.5,1.5,1.5c0.8,0,1.6,0.6,1.7,1.4c0,0.5-0.1,0.9-0.4,1.2c-0.3,0.3-0.7,0.5-1.2,0.5
+		l-7.3,0V26.9z"/>
+</g>
+</svg>

frontend/src/components/common/notification.js

@@ -5,6 +5,8 @@ import { gettext } from '../../utils/constants';
 import NoticeItem from './notice-item';
 import UserNotificationsDialog from '../../user-notifications';
 import { Utils } from '../../utils/utils';
+import IconBtn from '../icon-btn';
+
 import '../../css/notification.css';
 
 class Notification extends React.Component {
@@ -176,7 +178,7 @@ class Notification extends React.Component {
     return (
       <div id="notifications">
         <a href="#" onClick={this.onClick} className="no-deco" id="notice-icon" title={gettext('Notifications')} aria-label={gettext('Notifications')}>
-          <span className="sf2-icon-bell" id="notification-popover"></span>
+          <IconBtn id="notification-popover" symbol="notification" size={32} className="sf-icon-bell" />
           <span className={`num ${totalUnseenCount ? '' : 'hide'}`}>{totalUnseenCount}</span>
         </a>
         {this.state.showNotice &&

frontend/src/components/icon-btn/index.css

@@ -15,6 +15,11 @@
   width: 24px;
 }
 
+.seafile-multicolor-icon-btn-32 {
+  height: 32px;
+  width: 32px;
+}
+
 .seafile-multicolor-icon-btn:hover {
   cursor: pointer;
 }

frontend/src/components/toolbar/common-toolbar.js

@@ -8,6 +8,8 @@ import Account from '../common/account';
 import Logout from '../common/logout';
 import { EVENT_BUS_TYPE } from '../common/event-bus-type';
 import tagsAPI from '../../tag/api';
+import IconBtn from '../icon-btn';
+import { getColorScheme } from '../../utils/utils';
 
 const propTypes = {
   repoID: PropTypes.string,
@@ -35,6 +37,7 @@ class CommonToolbar extends React.Component {
       currentRepoInfo: props.currentRepoInfo,
       isTagEnabled: false,
       tagsData: [],
+      colorMode: getColorScheme(),
     };
   }
 
@@ -79,6 +82,13 @@ class CommonToolbar extends React.Component {
     }
   };
 
+  onColorModeChange = () => {
+    const colorMode = this.state.colorMode === 'light' ? 'dark' : 'light';
+    this.setState({ colorMode });
+    localStorage.setItem('sf_color_mode', colorMode);
+    document.body.setAttribute('data-bs-theme', colorMode);
+  };
+
   renderSearch = () => {
     const { repoID, repoName, isLibView, path, isViewFile, isTagEnabled, tagsData } = this.state;
     const { searchPlaceholder } = this.props;
@@ -110,9 +120,13 @@ class CommonToolbar extends React.Component {
 
   render() {
     const { showSearch = true } = this.props;
+    const { colorMode } = this.state;
+    const symbol = colorMode === 'light' ? 'dark-mode' : 'light-mode';
+    const title = colorMode === 'light' ? gettext('Dark mode') : gettext('Light mode');
     return (
       <div className="common-toolbar">
         {showSearch && this.renderSearch()}
+        <IconBtn symbol={symbol} size={32} className="sf-icon-color-mode" title={title} onClick={this.onColorModeChange} />
         <Notification />
         <Account />
         {showLogoutIcon && (<Logout />)}

frontend/src/css/notification.css

@@ -21,11 +21,16 @@
   font-weight: normal;
 }
 
-#notifications .sf2-icon-bell {
+#notifications .sf-icon-bell {
-  font-size: 24px;
+  font-size: 16px;
   line-height: 1;
-  color: #999;
+  color: #666;
   vertical-align: middle;
+  border-radius: 4px;
+}
+
+#notifications .sf-icon-bell:hover {
+  background-color: var(--bs-hover-bg);
 }
 
 #notifications .num {

frontend/src/css/toolbar.css

@@ -60,6 +60,16 @@
   text-decoration: none;
   color: var(--bs-icon-color);
 }
+
+.common-toolbar .sf-icon-color-mode {
+  font-size: 16px;
+  color: #666;
+  border-radius: 4px;
+}
+
+.common-toolbar .sf-icon-color-mode:hover {
+  background-color: var(--bs-hover-bg);
+}
 /* end common-toolbar */
 
 /* begin path toolbar  */

frontend/src/utils/utils.js

@@ -1995,3 +1995,9 @@ export const throttle = (func, delay) => {
 export const getType = (value) => {
   return Object.prototype.toString.call(value).slice(8, -1);
 };
+
+export const getColorScheme = () => {
+  const manualMode = localStorage.getItem('sf_color_mode');
+  if (manualMode) return manualMode;
+  return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+};