Feature/dark mode (#8026)

* update css stylesheet, replace css properties with css variable * update css variable * libraries,favorites,activities and help pages, etc * wiki dark mode * sdoc dark mode * markdown, text editor, etc * sysadmin pages * update seafile-ui.css * update template, css variable * clean up * update seafile-ui * update modal css * update seafile-ui.css * delete diff --------- Co-authored-by: zhouwenxuan <aries@Mac.local> Co-authored-by: Michael An <1822852997@qq.com>
2025-09-26 23:34:45 +00:00 · 2025-07-15 14:07:26 +08:00
parent e1250f5adc
commit 06e4c211f5
163 changed files with 932 additions and 620 deletions
--- a/frontend/src/chart/tooltip/index.css
+++ b/frontend/src/chart/tooltip/index.css
@@ -4,7 +4,7 @@
  min-width: 178px;
  border-radius: 3px;
  border: 1px solid #e2e2e2;
-  background-color: #fff;
+  background: var(--bs-body-bg);
  padding: 8px 16px;
  margin-left: 10px;
  box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.1);
--- a/frontend/src/components/common-add-tool/index.css
+++ b/frontend/src/components/common-add-tool/index.css
@@ -5,7 +5,7 @@
  font-size: 14px;
  font-weight: 500;
  border-top: 1px solid #dedede;
-  background: #fff;
+  background: var(--bs-body-bg);
  padding: 0 1rem;
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
--- a/frontend/src/components/common/group-select/index.css
+++ b/frontend/src/components/common/group-select/index.css
@@ -50,7 +50,7 @@
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
-  background: #fff;
+  background: var(--bs-body-bg);
 }

 .group-select.selector-collaborator .option-group .option-group-content {
@@ -87,7 +87,7 @@

 .group-select .selected-option-show .selected-option-item .selected-option-item-name {
  font-size: 13px;
-  color: #212529;
+  color: var(--bs-body-color);
 }

 .group-select .selected-option-show .selected-option-item .sf2-icon-close {
--- a/frontend/src/components/common/group-select/select-option-group.css
+++ b/frontend/src/components/common/group-select/select-option-group.css
@@ -7,7 +7,7 @@
  max-width: 15rem;
  padding: 0.5rem 0;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-  background: #fff;
+  background: var(--bs-body-bg);
  border: 1px solid rgba(0, 40, 100, 0.12);
  border-radius: 3px;
  z-index: 10001;
--- a/frontend/src/components/common/notification-popover/index.css
+++ b/frontend/src/components/common/notification-popover/index.css
@@ -4,7 +4,7 @@

 .notification-container {
  position: absolute;
-  background: #fff;
+  background: var(--bs-body-bg);
  width: 400px;
  right: -16px;
  top: -1px;
@@ -23,7 +23,7 @@
  align-items: center;
  justify-content: center;
  height: 50px;
-  border-bottom: 1px solid #ededed;
+  border-bottom: 1px solid var(--bs-border-color);
  font-size: 16px;
  font-weight: 600;
  position: relative;
@@ -41,7 +41,7 @@

 .notification-container .notification-body .show-weixin-qrcode {
  cursor: pointer;
-  border-bottom: 1px solid #ededed;
+  border-bottom: 1px solid var(--bs-border-color);
  height: 40px;
  display: flex;
  align-items: center;
@@ -71,7 +71,7 @@

 .notification-list-container .notification-item {
  padding: 14px 16px 14px 10px;
-  border-bottom: 1px solid #ededed;
+  border-bottom: 1px solid var(--bs-border-color);
  position: relative;
  cursor: pointer;
 }
@@ -81,7 +81,7 @@
 }

 .notification-list-container .notification-item:hover {
-  background: #f5f5f5;
+  background: var(--bs-nav-hover-bg);
 }

 .notification-list-container .notification-item .notification-item-header {
@@ -164,7 +164,7 @@
  display: flex;
  align-items: center;
  justify-content: center;
-  background: #f9f9f9;
+  background: var(--bs-body-bg);
  cursor: pointer;
  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 3px;
@@ -178,7 +178,7 @@
 .notification-container .notification-body .mark-notifications {
  display: flex;
  justify-content: space-between;
-  border-bottom: 1px solid #ededed;
+  border-bottom: 1px solid var(--bs-border-color);
  padding-left: 15px;
 }

@@ -191,7 +191,7 @@
  margin-right: 15px;
  margin-left: 15px;
  font-size: 14px;
-  color: #212529;
+  color: var(--bs-body-color);
 }

 .notification-container .notification-body .nav .nav-item .nav-link.active {
--- a/frontend/src/components/common/select/seahub-select-style.js
+++ b/frontend/src/components/common/select/seahub-select-style.js
@@ -5,7 +5,7 @@ const DEFAULT_CONTROL_STYLE = {

 const FOCUS_CONTROL_STYLE = {
  fontSize: '14px',
-  backgroundColor: '#ffffff',
+  backgroundColor: 'var(--bs-body-color)',
  borderColor: '#1991eb',
  outline: '0',
  boxShadow: '0 0 0 2px rgba(70, 127, 207, 0.25)',
@@ -45,7 +45,7 @@ const MenuSelectStyle = {
    return ({
      ...provided,
      cursor: isDisabled ? 'default' : 'pointer',
-      backgroundColor: isSelected ? '#20a0ff' : (isFocused ? '#f5f5f5' : '#fff'),
+      backgroundColor: isSelected ? 'var(--bs-dropdown-link-bg)' : (isFocused ? 'var(--bs-dropdown-tertiary-bg)' : 'var(--bs-body-bg)'),
      '.header-icon .dtable-font': {
        color: isSelected ? '#fff' : '#aaa',
      },
@@ -57,13 +57,13 @@ const MenuSelectStyle = {
  singleValue: (provided) => {
    return {
      ...provided,
-      color: '#212529',
+      color: 'var(--bs-body-color)',
    };
  },
  multiValue: (provided) => {
    return {
      ...provided,
-      color: '#212529',
+      color: 'var(--bs-body-color)',
    };
  },
 };
--- a/frontend/src/components/customize-select/index.css
+++ b/frontend/src/components/customize-select/index.css
@@ -11,7 +11,7 @@
  line-height: 1.5;
  background-image: none;
  font-size: 14px;
-  color: #212529;
+  color: var(--bs-body-color);
 }

 .seafile-customize-select:focus,
@@ -44,7 +44,7 @@
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
-  background: #fff;
+  background: var(--bs-body-bg);
 }

 .seafile-customize-select .selected-option .selected-option-show-container {
--- a/frontend/src/components/customize-select/select-option-group/index.css
+++ b/frontend/src/components/customize-select/select-option-group/index.css
@@ -7,7 +7,7 @@
  max-width: 15rem;
  padding: 0.5rem 0;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-  background: #fff;
+  background: var(--bs-body-bg);
  border: 1px solid rgba(0, 40, 100, 0.12);
  border-radius: 3px;
  z-index: 10001;
--- a/frontend/src/components/dialog/image-dialog/index.css
+++ b/frontend/src/components/dialog/image-dialog/index.css
@@ -72,7 +72,7 @@
 .lightbox-side-panel .sf-metadata-ui.collaborator-item,
 .lightbox-side-panel .sf-metadata-text-property-detail-editor:not(.formatter),
 .lightbox-side-panel .sf-metadata-number-property-detail-editor:focus {
-  color: #212529;
+  color: var(--bs-body-color);
 }

 .lightbox-side-panel .sf-metadata-text-property-detail-editor:not(.formatter) {
--- a/frontend/src/components/dialog/trash-dialog/index.css
+++ b/frontend/src/components/dialog/trash-dialog/index.css
@@ -55,18 +55,18 @@
 }

 .trash-dialog .modal-body .more {
-  background: #efefef;
+  background: var(--bs-icon-bg);
  border: 0;
  color: #666;
 }

 .trash-dialog .modal-body .more:hover {
  color: #000;
-  background: #dfdfdf;
+  background: var(--bs-icon-hover-bg);
 }

 .trash-dialog .path-container {
-  border-bottom: 1px solid #eee;
+  border-bottom: 1px solid var(--bs-border-color);
  height: 40px;
  padding: 0 .5rem 1rem;
 }
--- a/frontend/src/components/dir-view-mode/dir-others/index.css
+++ b/frontend/src/components/dir-view-mode/dir-others/index.css
@@ -9,7 +9,7 @@

 .dir-others .dir-others-item[aria-expanded="true"], /* for 'More' */
 .dir-others .dir-others-item:hover {
-  background-color: #f0f0f0;
+  background-color: var(--bs-nav-hover-bg);
  border-radius: 0.25rem;
 }

--- a/frontend/src/components/dir-view-mode/dir-views/index.css
+++ b/frontend/src/components/dir-view-mode/dir-views/index.css
@@ -24,6 +24,6 @@
 .metadata-views-dropdown-menu .dropdown-item:hover .metadata-view-icon,
 .metadata-views-dropdown-menu .dropdown-item:focus .metadata-view-icon,
 .metadata-views-dropdown-menu .dropdown-item:focus .sf3-font {
-  color: #fff;
-  fill: #fff;
+  color: var(--bs-dropdown-link-hover-color);
+  fill: var(--bs-dropdown-link-hover-color);
 }
--- a/frontend/src/components/dir-view-mode/extension-prompts/index.css
+++ b/frontend/src/components/dir-view-mode/extension-prompts/index.css
@@ -8,7 +8,7 @@
  width: 100%;
  padding: 10px;
  border-radius: 3px;
-  background-color: #f8fafd;
+  background-color: var(--bs-header-bg);
  font-size: 13px;
  color: #868e96;
 }
--- a/frontend/src/components/dirent-detail/detail-item/index.css
+++ b/frontend/src/components/dirent-detail/detail-item/index.css
@@ -40,7 +40,7 @@
 }

 .dirent-detail-item .dirent-detail-item-value.editable:hover {
-  background-color: #F5F5F5;
+  background-color: var(--bs-body-tertiary-bg);
  border-radius: 3px;
  cursor: pointer;
 }
--- a/frontend/src/components/dirent-detail/detail/detail/index.css
+++ b/frontend/src/components/dirent-detail/detail/detail/index.css
@@ -1,8 +1,8 @@
 .cur-view-detail {
  display: flex;
  flex-direction: column;
-  background-color: #fff;
+  background: var(--bs-body-bg);
  height: 100%;
-  border-left: 1px solid #eee;
+  border-left: 1px solid var(--bs-border-color);
  position: relative;
 }
--- a/frontend/src/components/dirent-detail/detail/header/index.css
+++ b/frontend/src/components/dirent-detail/detail/header/index.css
@@ -4,7 +4,7 @@
  align-items: center;
  justify-content: space-between;
  line-height: 2.5rem;
-  border-bottom: 1px solid #eee;
+  border-bottom: 1px solid var(--bs-border-color);
  height: 48px;
  padding: 8px 16px;
 }
@@ -25,12 +25,18 @@
  cursor: pointer;
 }

-.detail-header .detail-control .detail-control-icon {
+.detail-header .detail-control .detail-control-icon,
+.detail-header .detail-control i {
  font-size: 16px;
  fill: #666;
+  color: #666;
 }

 .detail-header .detail-control:hover {
-  background-color: #EFEFEF;
+  background-color: var(--bs-icon-hover-bg);
  border-radius: 3px;
 }
+
+.detail-header .detail-control:hover i {
+  fill: var(--bs-icon-hover-color);
+}
--- a/frontend/src/components/dirent-detail/detail/header/title/index.css
+++ b/frontend/src/components/dirent-detail/detail/header/title/index.css
@@ -19,5 +19,5 @@
  line-height: 1.5rem;
  vertical-align: middle;
  font-size: 1rem;
-  color: #212529;
+  color: var(--bs-body-color);
 }
--- a/frontend/src/components/dirent-detail/dirent-details/file-details/collapse/index.css
+++ b/frontend/src/components/dirent-detail/dirent-details/file-details/collapse/index.css
@@ -35,7 +35,7 @@
 }

 .file-details-collapse .file-details-collapse-header .file-details-collapse-header-operation:hover {
-  background-color: #EFEFEF;
+  background-color: var(--bs-icon-hover-bg);
  cursor: pointer;
  border-radius: 3px;
 }
--- a/frontend/src/components/file-chooser/searched-list-item.css
+++ b/frontend/src/components/file-chooser/searched-list-item.css
@@ -5,7 +5,7 @@
 }

 .searched-list-item:hover {
-  background-color: #f5f5f5;
+  background-color: var(--bs-nav-hover-bg);
 }

 .searched-list-item.searched-dir td {
--- a/frontend/src/components/file-view/comment-widget/comment-body-header.css
+++ b/frontend/src/components/file-view/comment-widget/comment-body-header.css
@@ -13,12 +13,12 @@
 }

 .comments-panel-body__header .comment-type {
-  color: #212529;
+  color: var(--bs-body-color);
  font-size: 12px;
 }

 .comments-panel-body__header .comment-type {
-  color: #212529;
+  color: var(--bs-body-color);
  font-size: 12px;
 }

--- a/frontend/src/components/operations/internal-link-operation.css
+++ b/frontend/src/components/operations/internal-link-operation.css
@@ -13,5 +13,5 @@
 }

 .dialog-operation .file-internal-link:hover {
-  color: #212529;
+  color: var(--bs-body-color);
 }
--- a/frontend/src/components/seafile-codemirror/style.css
+++ b/frontend/src/components/seafile-codemirror/style.css
@@ -1,7 +1,8 @@
 .text-file-view .cm-editor {
  margin: 0 auto;
-  border: 1px solid #ccc;
+  border: 1px solid var(--bs-border-color);
  box-shadow: 0 0 6px #ccc;
+  background-color: var(--bs-body-bg);
 }

 .text-file-view .cm-editor {
@@ -19,6 +20,13 @@
  min-height: 300px;
 }

-.text-file-view .cm-gutter {
+.text-file-view .cm-gutters {
  min-height: 300px;
+  background-color: var(--bs-body-bg);
+  border-color: var(--bs-border-color);
+}
+
+.text-file-view .cm-content .cm-line {
+  color: var(--bs-body-color);
+  caret-color: var(--bs-body-color) !important;
 }
--- a/frontend/src/components/search/search-filters/index.css
+++ b/frontend/src/components/search/search-filters/index.css
@@ -8,7 +8,7 @@
  padding: 0 16px 10px;
  overflow: auto hidden;
  scrollbar-color: #C1C1C1 rgba(0, 0, 0, 0);
-  border-bottom: 1px solid #eee;
+  border-bottom: 1px solid var(--bs-border-color);
 }

 .search-filters-container .search-filter {
@@ -29,7 +29,7 @@

 .search-filters-container .search-filter .search-filter-toggle:hover,
 .search-filter-menu .search-filter-toggle:hover {
-  background-color: #efefef;
+  background-color: var(--bs-icon-hover-bg);
 }

 .search-filter-toggle .sf3-font-down {
@@ -78,7 +78,7 @@
 }

 .search-filter-menu.filter-by-suffix-menu .clear-icon-right:hover {
-  background-color: #efefef;
+  background-color: var(--bs-icon-hover-bg);
 }

 .search-filters-container .search-filters-dropdown-item {
@@ -101,7 +101,7 @@

 .search-filter-menu .input-container {
  position: relative;
-  border: 1px solid #eaeaea;
+  border: 1px solid var(--bs-border-color);
  border-radius: 4px;
  padding: 4px 6px;
  margin: 8px 16px;
@@ -112,7 +112,7 @@
 }

 .search-filter-menu .input-container.focus {
-  background-color: #fff;
+  background: var(--bs-body-bg);
  border-color: #1991eb;
  box-shadow: 0 0 0 2px rgba(70, 127, 207, .25);
  color: #495057;
@@ -218,7 +218,7 @@

 .search-filters-container .search-filter-toggle.active:hover,
 .search-filters-container .search-filter-toggle.highlighted:hover {
-  background-color: #efefef;
+  background-color: var(--bs-icon-hover-bg);
 }

 .search-filters-container .search-filter-toggle.highlighted,
--- a/frontend/src/components/search/wiki2-search.css
+++ b/frontend/src/components/search/wiki2-search.css
@@ -9,7 +9,7 @@

 .wiki2-search:hover {
  cursor: pointer;
-  background-color: #EDEDEA;
+  background-color: var(--bs-wiki-nav-active-bg);
 }

 .wiki2-search .sf3-font-search {
--- a/frontend/src/components/sf-table/index.css
+++ b/frontend/src/components/sf-table/index.css
@@ -12,7 +12,7 @@
 }

 .sf-table-searcher-btn:hover {
-  background-color: #efefef;
+  background-color: var(--bs-icon-hover-bg);
  cursor: pointer;
 }

@@ -43,7 +43,7 @@
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
-  color: #666;
+  color: var(--bs-icon-secondary-color);
 }

 .sf-table-searcher-input-wrapper .btn-close-searcher {
@@ -51,7 +51,7 @@
 }

 .sf-table-searcher-input-wrapper .btn-close-searcher-wrapper:hover {
-  background-color: #efefef;
+  background-color: var(--bs-icon-hover-bg);
  cursor: pointer;
 }

@@ -80,11 +80,11 @@
 }

 .toolbar-search-btn:hover {
-  background-color: #efefef;
+  background-color: var(--bs-icon-hover-bg);
 }

 .toolbar-search-btn i.sf3-font {
-  color: #666;
+  color: var(--bs-icon-secondary-color);
  font-size: 12px;
 }

@@ -122,15 +122,15 @@
 .sf-table-result-content .static-sf-table-result-content {
  width: 100%;
  position: relative;
-  background: #f9f9f9;
-  border-bottom: 1px solid #ddd;
+  background: var(--bs-header-secondary-bg);
+  border-bottom: 1px solid var(--bs-border-color);
  z-index: 3;
 }

 .sf-table-result-content .static-sf-table-result-content .sf-table-row {
  position: relative;
  width: fit-content;
-  background-color: #f9f9f9;
+  background-color: var(--bs-tr-bg);
 }

 .record-HeaderCell__draggable {
@@ -155,7 +155,7 @@

 .sf-table-row {
  width: 100%;
-  border-bottom: 1px solid #ddd;
+  border-bottom: 1px solid var(--bs-border-color);
  display: inline-flex;
  margin-top: 0;
  margin-bottom: 0;
@@ -166,8 +166,12 @@
  border-bottom: none;
 }

+.static-sf-table-result-content.grid-header .sf-table-row .frozen-columns {
+  background-color: var(--bs-header-secondary-bg);
+}
+
 .sf-table-result-content .sf-table-row {
-  background-color: #fff;
+  background: var(--bs-body-bg);
 }

 .sf-table-result-content .frozen-columns .sf-table-cell {
@@ -232,11 +236,6 @@
  align-items: flex-start;
 }

-.draging-file-to-cell .cell-file-add {
-  border: 1px dashed #f09f3f;
-  background-color: #fdf5eb !important;
-}
-
 .table-main-interval {
  height: 20px;
  position: relative;
@@ -284,7 +283,7 @@
  align-items: center;
  background: #eceff4;
  border-radius: 3px;
-  color: #212529;
+  color: var(--bs-body-color);
 }

 .formula-formatter-content-item.simple-cell-text-formatter {
@@ -318,7 +317,7 @@
 }

 .table-last--frozen {
-  border-right: 1px solid #cacaca !important;
+  border-right: 1px solid var(--bs-border-color) !important;
 }

 .row-locked .actions-cell::after {
@@ -362,7 +361,7 @@
 }

 .geolocation-editor-container {
-  background-color: #ffffff;
+  background: var(--bs-body-bg);
  box-shadow: 0 0 5px #ccc;
  border-radius: 4px;
  position: relative;
@@ -376,7 +375,7 @@
  min-width: 400px;
  top: 100%;
  left: 0;
-  background-color: #ffffff;
+  background: var(--bs-body-bg);
  box-shadow: 0 0 5px #ccc;
  min-height: 165px;
 }
@@ -384,13 +383,13 @@
 .geolocation-editor-container .geolocation-selector-header {
  height: 45px;
  display: flex;
-  border-bottom: 1px solid #ccc;
+  border-bottom: 1px solid var(--bs-border-color);
  padding: 5px 20px 0 20px;
  align-items: flex-end;
 }

 .geolocation-editor-container .geolocation-selector-header-item {
-  border: 1px solid #ccc;
+  border: 1px solid var(--bs-border-color);
  height: 35px;
  margin-right: 10px;
  display: flex;
@@ -404,7 +403,7 @@
 }

 .geolocation-editor-container .selected-geolocation-selector-header-item {
-  border-bottom: 1px solid #fff;
+  border-bottom: 1px solid var(--bs-border-color);
 }

 .geolocation-editor-container .geolocation-map-editor {
--- a/frontend/src/components/sf-table/table-main/records-footer/index.css
+++ b/frontend/src/components/sf-table/table-main/records-footer/index.css
@@ -4,7 +4,7 @@
  width: 100%;
  overflow: hidden;
  line-height: 32px;
-  background-color: #fff;
+  background: var(--bs-body-bg);
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  display: flex;
@@ -89,7 +89,7 @@

 .load-all-tip .load-all:hover,
 .sf-table-footer .load-all:hover {
-  color: #212529;
+  color: var(--bs-body-color);
  border-bottom: 1px solid #212529;
 }

--- a/frontend/src/components/sf-table/table-main/records-header/actions-cell.js
+++ b/frontend/src/components/sf-table/table-main/records-header/actions-cell.js
@@ -19,7 +19,7 @@ class ActionsCell extends Component {
    return (
      <div
        className={classnames(columnCellClass, { 'table-last--frozen': isLastFrozenCell })}
-        style={{ ...columnCellStyle, backgroundColor: '#f9f9f9' }}
+        style={{ ...columnCellStyle }}
      >
        <SelectAll
          isMobile={isMobile}
--- a/frontend/src/components/sf-table/table-main/records-header/index.js
+++ b/frontend/src/components/sf-table/table-main/records-header/index.js
@@ -124,7 +124,6 @@ const RecordsHeader = ({
          }
          {frozenColumns.map((column, columnIndex) => {
            const { key } = column;
-            const style = { backgroundColor: '#f9f9f9' };
            const isLastFrozenCell = key === lastFrozenColumnKey;
            return (
              <Cell
@@ -137,7 +136,6 @@ const RecordsHeader = ({
                column={column}
                columnIndex={columnIndex}
                groupOffsetLeft={groupOffsetLeft}
-                style={style}
                isLastFrozenCell={isLastFrozenCell}
                frozenColumnsWidth={frozenColumnsWidth}
                ColumnDropdownMenu={ColumnDropdownMenu}
--- a/frontend/src/components/sf-table/table-main/records/group-body/group-container/index.css
+++ b/frontend/src/components/sf-table/table-main/records/group-body/group-container/index.css
@@ -4,7 +4,7 @@
 }

 .canvas-groups-rows .sf-table-cell {
-  background-color: #fff;
+  background: var(--bs-body-bg);
 }

 .canvas-groups-rows .group-item {
@@ -32,17 +32,17 @@
 /* background of group container */
 .canvas-groups-rows .group-level-1 .group-container-left,
 .canvas-groups-rows .group-level-1 .group-container-right {
-  background-color: #f7f7f7;
+  background-color: var(--bs-th-tertiary-bg);
 }

 .canvas-groups-rows .group-level-2 .group-container-left,
 .canvas-groups-rows .group-level-2 .group-container-right {
-  background-color: #ededed;
+  background-color: var(--bs-th-quartus-bg);
 }

 .canvas-groups-rows .group-level-3 .group-container-left,
 .canvas-groups-rows .group-level-3 .group-container-right {
-  background-color: #e3e3e3;
+  background-color: var(--bs-th-fifth-bg);
 }

 /* border-color of group container */
@@ -108,7 +108,7 @@
 .canvas-groups-rows .group-item .group-backdrop {
  position: absolute;
  left: 0;
-  background-color: #fff;
+  background: var(--bs-body-bg);
  opacity: 1;
 }

@@ -156,6 +156,12 @@
  border-right: 1px solid #dadada;
 }

+[data-bs-theme=dark] .canvas-groups-rows .group-level-1 .group-header-cell,
+[data-bs-theme=dark] .canvas-groups-rows .group-level-2 .group-header-cell,
+[data-bs-theme=dark] .canvas-groups-rows .group-level-3 .group-header-cell {
+  border-right: 1px solid var(--bs-border-color);
+}
+
 .canvas-groups-rows .group-container-right .group-header-cell:last-child {
  border-right: none;
 }
@@ -236,6 +242,12 @@
  background: linear-gradient(to right, hsla(0, 0%, 89%, 0), hsl(0, 0%, 89%) 18%);
 }

+[data-bs-theme=dark] .canvas-groups-rows .group-item.group-level-1 .group-rows-count,
+[data-bs-theme=dark] .canvas-groups-rows .group-item.group-level-2 .group-rows-count,
+[data-bs-theme=dark] .canvas-groups-rows .group-item.group-level-3 .group-rows-count {
+  background: var(--bs-th-tertiary-bg);
+}
+
 .canvas-groups-rows .group-rows-count .count-title {
  margin-right: 4px;
  color: #666666;
--- a/frontend/src/components/sf-table/table-main/records/record/cell/index.css
+++ b/frontend/src/components/sf-table/table-main/records/record/cell/index.css
@@ -4,7 +4,7 @@
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
-  border-right: 1px solid #eee;
+  border-right: 1px solid var(--bs-border-color);
  padding: 6px 8px;
  display: flex;
  justify-content: flex-start;
@@ -48,20 +48,6 @@
  height: 12px;
 }

-.sf-table-cell .cell-file-add {
-  height: 31px;
-  line-height: 31px;
-  text-align: center;
-  color: #666666;
-  box-sizing: border-box;
-  position: relative;
-  top: -5px;
-  left: -8px;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
 .sf-table-cell .file-cell-content {
  flex: 1;
  display: flex;
@@ -109,7 +95,7 @@
 .sf-table-cell .mobile-select-all-container .select-all-checkbox-show {
  height: 14px;
  width: 14px;
-  border: 1px solid #aaa;
+  border: 1px solid var(--bs-border-color);
  border-radius: 2px;
 }

@@ -146,11 +132,11 @@
 /* row cell ui */
 .sf-table-row:hover .sf-table-cell,
 .sf-table-row:hover .column {
-  background-color: #f9f9f9;
+  background-color: var(--bs-tr-hover-bg);
 }

 .sf-table-row:hover .cell-selected {
-  background-color: #fff;
+  background: var(--bs-body-bg);
 }

 .sf-table-records-wrapper:hover .sf-table-cell.cell-highlight {
@@ -163,5 +149,5 @@

 .sf-table-row.row-selected .sf-table-cell,
 .sf-table-row.row-selected .column {
-  background-color: #dbecfa !important;
+  background-color: var(--bs-tr-active-secondary-bg) !important;
 }
--- a/frontend/src/components/sf-table/table-main/records/record/index.css
+++ b/frontend/src/components/sf-table/table-main/records/record/index.css
@@ -4,11 +4,11 @@
  height: 20px;
  line-height: 20px;
  margin-left: 8px;
-  border: 1px solid #eee;
+  border: 1px solid var(--bs-border-color);
  padding: 0 2px;
  color: #666666;
  border-radius: 2px;
-  background: #fff;
+  background: var(--bs-body-bg);
  cursor: pointer;
  box-shadow: 0 0 1px;
 }
@@ -22,7 +22,7 @@
 }

 .frozen-columns {
-  background-color: #fff;
+  background: var(--bs-body-bg);
 }

 .sf-table-result-content .sf-table-row.can-drop-tip .sf-table-cell {
@@ -67,14 +67,13 @@
  min-height: 32px;
  height: auto;
  padding: 0 1rem;
-  border-left: 1px solid #ddd;
-  border-bottom: 1px solid #ddd;
-  border-right: 1px solid #ddd;
-  background-color: #fff;
+  border: 1px solid var(--bs-border-color);
+  border-top: none;
+  background: var(--bs-body-bg);
 }

 .sf-table-record-drag-layer .rdg-dragged-record:first-child {
-  border-top: 1px solid #ddd;
+  border-top: 1px solid var(--bs-border-color);
 }

 .sf-table-record-drag-layer .rdg-dragged-record .rdg-dragged-record-cell {
--- a/frontend/src/components/toast/toaster.css
+++ b/frontend/src/components/toast/toaster.css
@@ -56,7 +56,7 @@
  border-radius: 3px;
  box-shadow: rgba(67, 90, 111, 0.3) 0px 0px 1px, rgba(67, 90, 111, 0.47) 0px 8px 10px -4px;
  padding: 10px 16px;
-  background-color: #fff;
+  background: var(--bs-body-bg);
 }

 .seahub-toast-alert-container.success {
--- a/frontend/src/components/tree-section/index.css
+++ b/frontend/src/components/tree-section/index.css
@@ -20,7 +20,7 @@

 .tree-section .tree-section-header.tree-section-header-hover,
 .tree-section .tree-section-header:not(.tree-section-header-hover):hover {
-  background-color: #F0F0F0;
+  background-color: var(--bs-nav-hover-bg);
 }

 .tree-section .tree-section-header .tree-section-header-title {
@@ -51,7 +51,7 @@
 }

 .tree-section .tree-section-header .tree-section-header-operation:hover {
-  background-color: #DBDBDB;
+  background-color: var(--bs-icon-hover-secondary-bg);
  cursor: pointer;
  border-radius: 3px;
 }
@@ -109,7 +109,7 @@
 }

 .tree-section .tree-section-body .right-icon:hover {
-  background-color: #DBDBDB;
+  background-color: var(--bs-icon-hover-secondary-bg);
  cursor: pointer;
  border-radius: 3px;
 }
--- a/frontend/src/components/user-item/index.css
+++ b/frontend/src/components/user-item/index.css
@@ -25,7 +25,7 @@

 .user-item .user-name {
  margin-left: 5px;
-  color: #212529;
+  color: var(--bs-body-color);
 }

 .user-item .user-avatar img {
--- a/frontend/src/css/comments-list.css
+++ b/frontend/src/css/comments-list.css
@@ -1,12 +1,12 @@
 .seafile-comment {
-  background-color: #fff;
+  background: var(--bs-body-bg);
  display: flex;
  flex-direction: column;
 }

 .seafile-comment-title {
-  border-bottom: 1px solid #eee;
-  background-color: #fff;
+  border-bottom: 1px solid var(--bs-border-color);
+  background: var(--bs-body-bg);
  height: 46px;
  line-height: 46px;
  padding: 0 16px;
@@ -35,7 +35,7 @@
 }

 .seafile-comment-title .sdoc-icon-btn:hover {
-  background-color: #efefef;
+  background-color: var(--bs-icon-hover-bg);
 }

 .seafile-comment-item {
@@ -44,7 +44,7 @@
 }

 .seafile-comment-page .seafile-comment-item:hover {
-  background-color: #f5f5f5;
+  background-color: var(--bs-body-tertiary-bg);
  cursor: pointer;
 }

@@ -98,7 +98,7 @@
 .seafile-comment-item .seafile-comment-info .seafile-comment-dropdown .sf-dropdown-toggle:focus,
 .seafile-comment-item .seafile-comment-info .seafile-comment-dropdown .sf-dropdown-toggle:hover {
  color: #999;
-  background-color: #efefef;
+  background-color: var(--bs-icon-hover-bg);
 }

 .seafile-comment-item .seafile-comment-content {
@@ -108,7 +108,7 @@
 }

 .seafile-comment-item .seafile-comment-content a {
-  color: #212529;
+  color: var(--bs-body-color);
  cursor: default;
 }

@@ -144,7 +144,7 @@
  width: 100%;
  min-height: 90px;
  border-radius: 5px;
-  background-color: #fff;
+  background: var(--bs-body-bg);
 }

 .seafile-comment-footer .add-comment-input {
--- a/frontend/src/css/dirent-detail.css
+++ b/frontend/src/css/dirent-detail.css
@@ -54,7 +54,7 @@

 .dirent-table-container td {
  font-size: 14px;
-  color: #212529;
+  color: var(--bs-body-color);
  word-break: break-all;
 }

@@ -97,7 +97,7 @@

 .file-related-files ul li a,
 .list-related-file-table tr td a {
-  color: #212529;
+  color: var(--bs-body-color);
 }

 .list-related-file-body {
--- a/frontend/src/css/edit-filetag-popover.css
+++ b/frontend/src/css/edit-filetag-popover.css
@@ -1,7 +1,7 @@
 .edit-filetag-popover .edit-filetag-popover-input {
  max-height: 30px;
  font-size: 14px;
-  color: #212529;
+  color: var(--bs-body-color);
  height: 30px;
 }

--- a/frontend/src/css/empty-tip.css
+++ b/frontend/src/css/empty-tip.css
@@ -16,7 +16,7 @@
 .empty-tip .empty-tip-title {
  font-size: 18px;
  font-weight: 500;
-  color: #212529;
+  color: var(--bs-body-color);
  margin-bottom: 10px;
 }

--- a/frontend/src/css/file-chooser.css
+++ b/frontend/src/css/file-chooser.css
@@ -11,7 +11,7 @@
 }

 .file-chooser-item .item-active {
-  background: #f5f5f5;
+  background: var(--bs-nav-active-bg);
  border-radius: 3px;
 }

@@ -39,7 +39,7 @@
 }

 .file-chooser-item .item-info:hover {
-  background: #f0f0f0;
+  background: var(--bs-nav-hover-bg);
  border-radius: 3px;
 }

@@ -88,7 +88,7 @@
 }

 .file-chooser-search-container .searched-list-item.tr-active {
-  background-color: #f5f5f5 !important;
+  background-color: var(--bs-nav-active-bg) !important;
 }

 .file-chooser-search-container .searched-item-icon {
@@ -109,7 +109,7 @@
 }

 .file-chooser-search-container .tr-highlight {
-  background-color: #f0f0f0;
+  background-color: var(--bs-nav-hover-bg);
 }

 .file-chooser-search-input {
@@ -155,7 +155,7 @@
 }

 .file-chooser-list-view-header:hover {
-  background-color: #f5f5f5;
+  background-color: var(--bs-nav-active-bg);
 }

 .file-chooser-list-view-header .name {
--- a/frontend/src/css/file-history-old.css
+++ b/frontend/src/css/file-history-old.css
@@ -35,14 +35,14 @@
 .old-history-main .get-more-btn {
  width: 100%;
  padding: .5em 0;
-  background: #efefef;
+  background: var(--bs-button-active-bg);
  border: 0;
  color: #666;
  border-radius: 2px;
 }

 .old-history-main .get-more-btn:hover {
-  color: #444;
+  color: var(--bs-secondary-color);
 }

 .old-history-main p {
--- a/frontend/src/css/file-history.css
+++ b/frontend/src/css/file-history.css
@@ -9,7 +9,7 @@
 }

 .file-history-header { /* for markdown file history */
-  background-color: #fff;
+  background: var(--bs-body-bg);
  height: 50px;
 }

@@ -103,7 +103,7 @@
  flex: 0 0 auto;
  user-select: none;
  border-left: 1px solid #eee;
-  background-color: #fff;
+  background: var(--bs-body-bg);
  display: flex;
  flex-direction: column;
 }
--- a/frontend/src/css/file-uploader.css
+++ b/frontend/src/css/file-uploader.css
@@ -18,15 +18,15 @@
  border: 1px solid #ddd;
  border-radius: 3px;
  box-shadow: 0 0 6px #ddd;
-  background-color: #fff;
+  background: var(--bs-body-bg);
  z-index: 1050;
 }

 .uploader-list-header {
-  background-color: #f0f0f0;
+  background-color: var(--bs-header-quartus-bg);
  padding: 0.625rem;
  font-size: 1rem;
-  color: #212529;
+  color: var(--bs-body-color);
  display: flex;
  justify-content: space-between;
  min-height: 2.25rem;
@@ -54,7 +54,7 @@

 .uploader-list-content {
  padding: 0 1rem 1.25rem;
-  background-color: #fff;
+  background: var(--bs-body-bg);
  overflow: auto;
 }

--- a/frontend/src/css/file-view.css
+++ b/frontend/src/css/file-view.css
@@ -8,8 +8,8 @@ body {

 .file-view-header {
  padding: 4px 10px;
-  background: #fff;
-  border-bottom: 1px solid #eee;
+  background: var(--bs-body-bg);
+  border-bottom: 1px solid var(--bs-border-color);
  flex-shrink: 0;
 }

@@ -61,7 +61,7 @@ body {
 }

 .file-view-header .file-toolbar-btn:hover {
-  background-color: #EFEFEF;
+  background-color: var(--bs-icon-hover-bg);
  border-radius: 3px;
 }

@@ -71,7 +71,7 @@ body {
 }

 .file-view-header .file-toolbar-btn.disabled:hover {
-  background-color: #fff;
+  background: var(--bs-body-bg);
 }

 .file-view-header .file-toolbar-btn#save-file {
@@ -112,7 +112,7 @@ body {

 .file-view-body .file-view-content {
  padding: 30px 0;
-  background: #f5f5f5;
+  background: var(--bs-body-tertiary-bg);
  border-right: 4px solid transparent;
 }

@@ -123,7 +123,7 @@ body {
 .file-details-container {
  position: absolute;
  right: 0;
-  background-color: #fff;
+  background: var(--bs-body-bg);
  width: 300px;
  height: 100%;
  box-shadow: -1px 0 3px 0 #ccc;
--- a/frontend/src/css/files-activities.css
+++ b/frontend/src/css/files-activities.css
@@ -3,7 +3,7 @@
  cursor: pointer;
 }
 .activity-details:hover {
-  color: #212529;
+  color: var(--bs-body-color);
 }
 .mobile-activity-time {
  display: inline-block;
@@ -15,7 +15,7 @@
 }

 .cur-activity-modifiers:hover {
-  background: #f5f5f5;
+  background: var(--bs-icon-hover-bg);
  cursor: pointer;
 }

@@ -25,8 +25,8 @@

 .activity-modifier-selector-container {
  width: 320px;
-  background: #fff;
-  border: 1px solid #eee;
+  background: var(--bs-body-bg);
+  border: 1px solid var(--bs-border-color);
  margin-top: 2px;
  z-index: 2;
 }
@@ -34,7 +34,7 @@
 .activity-selected-modifiers {
  min-height: 2rem;
  background: #f5f5f5;
-  border-bottom: 1px solid #dde2ea;
+  border-bottom: 1px solid var(--bs-border-color);
  line-height: 1;
 }

--- a/frontend/src/css/files.css
+++ b/frontend/src/css/files.css
@@ -15,7 +15,7 @@
  color: #666;
  text-align: center;
  padding: 4px 0;
-  border-bottom: 1px solid #eee;
+  border-bottom: 1px solid var(--bs-border-color);
 }

 #files-content-container .libraries-empty-tip-in-grid-mode {
@@ -23,7 +23,7 @@
  text-align: center;
  height: 56px;
  line-height: 52px;
-  border: 2px dashed #eeeeee;
+  border: 2px dashed var(--bs-border-color);
  border-radius: 4px;
 }

@@ -34,11 +34,11 @@
 }

 .library-grid-item:hover {
-  background: #f5f5f5;
+  background: var(--bs-tr-hover-bg);
 }

 .library-grid-item .library-name {
-  color: #212529;
+  color: var(--bs-body-color);
 }

 .library-grid-item .library-grid-item-icon {
--- a/frontend/src/css/grid-view.css
+++ b/frontend/src/css/grid-view.css
@@ -19,7 +19,7 @@
 }

 .grid-item:hover {
-  background: #f5f5f5;
+  background: var(--bs-tr-hover-bg);
  border-radius: 5px;
 }

@@ -38,8 +38,8 @@
  max-width: 88px;
  max-height: 88px;
  padding: 1px;
-  background: #fff;
-  border: 1px solid #ddd;
+  background: var(--bs-body-bg);
+  border: 1px solid var(--bs-border-color);
  border-radius: 1px;
 }

@@ -60,7 +60,7 @@
 }

 .grid-file-name-link {
-  color: #212529;
+  color: var(--bs-body-color);
  font-size: 0.875rem;
  -webkit-box-orient: vertical;
  word-wrap: break-word;
@@ -68,7 +68,6 @@
 }

 .grid-file-name-link:hover {
-  color: #212529;
  text-decoration: none;
 }

@@ -80,7 +79,7 @@
 }

 .grid-selected-active {
-  background-color: #f0f0f0;
+  background-color: var(--bs-nav-hover-bg);
  border-radius: 5px;
 }

--- a/frontend/src/css/group-departments.css
+++ b/frontend/src/css/group-departments.css
@@ -17,7 +17,7 @@
 .department-dialog-content .department-dialog-left-panel {
  flex: 0 0 30%;
  padding: 1rem;
-  border-right: 1px solid #eee;
+  border-right: 1px solid var(--bs-border-color);
 }

 .department-dialog-content .department-dialog-left-panel .input-icon-addon {
@@ -32,19 +32,19 @@
 }

 .department-dialog-content .department-dialog-left-panel .clear-keyword-icon:hover {
-  background: #efefef;
+  background: var(--bs-icon-hover-bg);
 }

 .department-dialog-content .department-dialog-member {
  display: flex;
  flex: 0 0 35%;
-  border-right: 1px solid #eee;
+  border-right: 1px solid var(--bs-border-color);
 }

 .department-dialog-content .department-dialog-member-selected {
  display: flex;
  flex: 0 0 35%;
-  border-right: 1px solid #eee;
+  border-right: 1px solid var(--bs-border-color);
  flex-direction: column;
  justify-content: space-between;
 }
@@ -60,12 +60,12 @@
 }

 .department-dialog-content .department-dialog-group .group-item:hover {
-  background-color: #f5f5f5;
+  background-color: var(--bs-nav-hover-bg);
 }

 .department-dialog-content .department-dialog-group .group-item.tr-highlight:hover,
 .department-dialog-content .department-dialog-group .tr-highlight {
-  background-color: #f0f0f0;
+  background-color: var(--bs-nav-hover-bg);
  color: inherit;
  position: relative;
 }
@@ -172,8 +172,8 @@
  font-size: 13px;
  font-weight: lighter;
  text-align: justify;
-  color: #fff;
-  background-color: #303133;
+  color: var(--bs-body-color);
+  background-color: var(--bs-tooltip-bg);
 }

 .bs-tooltip-top .arrow::before,
--- a/frontend/src/css/header.css
+++ b/frontend/src/css/header.css
@@ -1,5 +1,5 @@
 .top-header {
-  background-color: #f8fafd;
-  border-bottom: 1px solid #eee;
+  background-color: var(--bs-header-bg);
+  border-bottom: 1px solid var(--bs-border-color);
  padding: .5rem 1rem;
 }
--- a/frontend/src/css/history-record-item.css
+++ b/frontend/src/css/history-record-item.css
@@ -24,7 +24,7 @@
 }

 .history-info .time {
-  color: #212529;
+  color: var(--bs-body-color);
 }

 .history-info .owner {
--- a/frontend/src/css/image-file-view.css
+++ b/frontend/src/css/image-file-view.css
@@ -14,7 +14,7 @@

 #image-view {
  padding: 1px;
-  background: #fff;
+  background: var(--bs-body-bg);
  border: 1px solid #eee;
  width: auto;
  height: auto;
@@ -32,7 +32,7 @@
  color: #666;
  width: 50px;
  height: 50px;
-  background: #fff;
+  background: var(--bs-body-bg);
  border-radius: 100%;
  line-height: 50px;
  z-index: 1;
@@ -48,7 +48,7 @@

 #img-prev:hover,
 #img-next:hover {
-  color: #212529;
+  color: var(--bs-body-color);
 }

 .image-zoomer {
--- a/frontend/src/css/layout.css
+++ b/frontend/src/css/layout.css
@@ -18,7 +18,7 @@
  display: flex;
  flex-direction: column;
  overflow: hidden;
-  background: #fff;
+  background: var(--bs-body-bg);
  transition: flex 0.3s ease-in-out;
  -webkit-transition: flex 0.3s ease-in-out;
  -moz-transition: flex 0.3s ease-in-out;
@@ -36,6 +36,8 @@
  flex: 1 0 78%;
  display: flex;
  flex-direction: column;
+  background-color: var(--bs-body-bg);
+  color: var(--bs-body-color);
 }

@media (max-width: 767px) {
@@ -62,8 +64,8 @@
  padding: .5rem 1rem;
  display: flex;
  flex-shrink: 0;
-  background-color: #F8FAFD;
-  border-bottom: 1px solid #eee;
+  background-color: var(--bs-header-bg);
+  border-bottom: 1px solid var(--bs-border-color);
  z-index: 100;
 }

@@ -79,7 +81,7 @@
 .side-panel-center,
 .side-panel-footer {
  min-height: 0;
-  border-right: 1px solid #eee;
+  border-right: 1px solid var(--bs-border-color);
 }

 .cur-view-container {
@@ -93,12 +95,12 @@
 .cur-view-path {
  padding: 8px 16px;
  height: 48px;
-  background: #fff;
+  background: var(--bs-body-bg);
  display: flex;
  align-items: center;
  flex-shrink: 0;
  justify-content: space-between;
-  border-bottom: 1px solid #eee;
+  border-bottom: 1px solid var(--bs-border-color);
 }

@keyframes displayDirPath {
@@ -137,7 +139,7 @@
 }

 .cur-view-path .cur-view-path-btn:hover {
-  background-color: #EFEFEF;
+  background-color: var(--bs-icon-hover-bg);
  border-radius: 3px;
 }

@@ -176,6 +178,7 @@

 .repos-container {
  padding-bottom: 10rem;
+  background-color: var(--bs-body-bg);
 }

 .table-drop-active::before {
@@ -217,8 +220,8 @@ div[tabindex="-1"][role="group"] {
  flex-shrink:0;
  align-items: center;
  justify-content: space-between;
-  background-color: #fff;
-  border-bottom: 1px solid #eee;
+  background: var(--bs-body-bg);
+  border-bottom: 1px solid var(--bs-border-color);
  box-shadow: 0 3px 2px -2px rgba(200,200,200,.15);
 }

--- a/frontend/src/css/lib-content-view.css
+++ b/frontend/src/css/lib-content-view.css
@@ -4,7 +4,7 @@

 .cur-view-content.lib-content-container {
  padding: 0;
-  background-color: #fff;
+  background: var(--bs-body-bg);
  position: absolute;
  top: 48px;
  width: 100%;
@@ -41,8 +41,9 @@
  display: flex;
  flex-direction: column;
  overflow: hidden;
-  background-color: #fff;
-  border-right: 1px solid #eee;
+  background: var(--bs-body-bg);
+  color: var(--bs-body-color);
+  border-right: 1px solid var(--bs-border-color);
 }

 .dir-content-nav:hover {
@@ -89,7 +90,7 @@
 }

 .tree-node-inner-hover {
-  background-color: #f0f0f0;
+  background-color: var(--bs-nav-hover-bg);
  border-radius: 0.25rem;
 }

@@ -114,7 +115,7 @@
 .folder-toggle-icon {
  position: absolute;
  left: 0;
-  color: #666666;
+  color: var(--bs-icon-secondary-color);
  line-height: 1.625;
  width: 1.5rem;
  display: flex;
@@ -147,7 +148,7 @@
  display: inline-block;
  width: 1rem;
  text-align: center;
-  color: #666666;
+  color: var(--bs-icon-secondary-color);
 }

 .tree-node-inner .right-icon {
@@ -156,7 +157,7 @@
  right: 0.5rem;
  bottom: 0;
  width: 1rem;
-  color: #666666;
+  color: var(--bs-icon-secondary-color);
  z-index: 2;
  font-size: 0.8125rem;
  text-align: center;
@@ -168,12 +169,12 @@
  vertical-align: middle;
  font-size: 0.8125rem;
  line-height: 1.625rem !important;
-  color: #666666;
+  color: var(--bs-icon-secondary-color);
 }

 .tree-node-hight-light {
  border-radius: 4px;
-  background-color: #f5f5f5 !important;
+  background-color: var(--bs-nav-active-color) !important;
 }

 .tree-node-hight-light::before {
@@ -216,7 +217,7 @@

 .dir-content-main .sf-slate-viewer-scroll-container {
  padding: 0;
-  background-color: #fff;
+  background: var(--bs-body-bg);
  border: none;
  overflow: inherit;
 }
@@ -235,8 +236,8 @@
 }

 .op-btn {
-  background: #fff;
-  border: 1px solid #dbdbdb;
+  background: var(--bs-body-bg);
+  border: 1px solid var(--bs-border-color);
  border-radius: 3px;
  height: 32px;
  padding: 0 .5rem;
@@ -263,7 +264,7 @@
  display: inline-block;
  padding: 0 6px;
  font-size: 1rem;
-  color: inherit;
+  color: var(--bs-body-color);
  border-radius: 3px;
  text-decoration: none;
  min-width: 28px;
@@ -295,11 +296,11 @@
 }

 .dir-view-path .path-item:hover {
-  background: #efefef;
+  background: var(--bs-nav-hover-bg);
 }

 .dir-view-path .path-item.path-item-read-only:hover {
-  background: #fff;
+  background: var(--bs-body-bg);
 }

 .dir-view-path .path-item-refresh {
@@ -317,7 +318,7 @@
 }

 .dir-view-path .path-item-refresh:hover {
-  background: #efefef;
+  background: var(--bs-icon-hover-bg);
 }

 .dir-view-path .sf3-font-refresh {
@@ -368,7 +369,7 @@
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
-  border-bottom: 1px solid #eee;
+  border-bottom: 1px solid var(--bs-border-color);
  position: relative;
  font-size: 1rem;
 }
@@ -428,13 +429,13 @@
 }

 .custom-modal .repo-list-item.active {
-  background-color: #f5f5f5;
+  background-color: var(--bs-nav-active-bg);
  font-weight: 500;
  border-radius: 3px;
 }

 .custom-modal .repo-list-item:hover{
-  background-color: #f0f0f0;
+  background-color: var(--bs-nav-hover-bg);
  border-radius: 3px;
 }

@@ -483,7 +484,8 @@
  border: 0;
  cursor: pointer;
  box-shadow: none;
-  background-color: #fff;
+  background: var(--bs-body-bg);
+  color: var(--bs-body-color);
 }

 .custom-modal .modal-footer .footer-left-btn.disabled {
@@ -491,7 +493,7 @@
 }

 .custom-modal .modal-footer .footer-left-btn:not(.disabled):hover {
-  background-color: #f0f0f0;
+  background-color: var(--bs-nav-hover-bg);
  border-radius: 3px;
 }

--- a/frontend/src/css/lib-settings.css
+++ b/frontend/src/css/lib-settings.css
@@ -27,8 +27,12 @@
  flex: 1 1 auto;
 }

+.lib-setting-nav .nav-pills .nav-item .nav-link:hover {
+  background: var(--bs-nav-hover-bg);
+}
+
 .lib-setting-nav .nav-pills .nav-item .nav-link.active {
-  background: #f5f5f5;
+  background: var(--bs-nav-active-bg);
  color: inherit;
  position: relative;
 }
--- a/frontend/src/css/log-filter.css
+++ b/frontend/src/css/log-filter.css
@@ -4,7 +4,7 @@
 }

 .activity-details:hover {
-  color: #212529;
+  color: var(--bs-body-color);
 }

 .mobile-activity-time {
@@ -27,8 +27,8 @@

 .activity-modifier-selector-container {
  width: 320px;
-  background: #fff;
-  border: 1px solid #eee;
+  background: var(--bs-body-bg);
+  border: 1px solid var(--bs-border-color);
  margin-top: 2px;
  z-index: 2;
 }
--- a/frontend/src/css/main-side-nav-folded.css
+++ b/frontend/src/css/main-side-nav-folded.css
@@ -1,11 +1,11 @@
 .side-panel .side-nav-folded {
  overflow: visible;
-  background-color: #fff;
+  background: var(--bs-body-bg);
 }

 .side-panel .side-nav-folded .side-nav-con {
  overflow: visible;
-  background-color: #fff;
+  background: var(--bs-body-bg);
 }

 .side-panel .side-nav-folded .nav-item {
@@ -18,7 +18,7 @@

 .side-nav-folded #files-sub-nav {
  width: 240px;
-  background: #fff;
+  background: var(--bs-body-bg);
  top: 60px;
  transition: left 250ms cubic-bezier(0.25, 0.1, 0.25, 0.1), opacity 250ms cubic-bezier(0.25, 0.1, 0.25, 0.1);
 }
--- a/frontend/src/css/manage-members-dialog.css
+++ b/frontend/src/css/manage-members-dialog.css
@@ -43,7 +43,7 @@
 }

 .group-manage-members-dialog .search-group-members.active {
-  background: #fff;
+  background: var(--bs-body-bg);
  border-color: #ccc;
 }

--- a/frontend/src/css/metadata-rc-calendar.css
+++ b/frontend/src/css/metadata-rc-calendar.css
@@ -67,7 +67,7 @@
 }

 .sf-metadata-rc-calendar .rdg-editor-container input.editor-main[readonly] {
-  background-color: #fff;
+  background: var(--bs-body-bg);
 }

 .sf-metadata-rc-calendar .rc-calendar-time-picker {
--- a/frontend/src/css/notification.css
+++ b/frontend/src/css/notification.css
@@ -17,7 +17,7 @@
 #notifications .title {
  line-height: 1.5;
  font-size: 1rem;
-  color: #212529;
+  color: var(--bs-body-color);
  font-weight: normal;
 }

--- a/frontend/src/css/org-admin-info-page.css
+++ b/frontend/src/css/org-admin-info-page.css
@@ -4,7 +4,7 @@

 .org-admin-info-content .info-content-item {
  padding: 30px;
-  background: #fff;
+  background: var(--bs-body-bg);
  border: 1px solid #e4e4e4;
  border-radius: 5px;
  width: calc(50% - 5.5px);
--- a/frontend/src/css/pagination.css
+++ b/frontend/src/css/pagination.css
@@ -5,7 +5,7 @@

 .paginator .paginator-dropdown .btn:active,
 .paginator .paginator-dropdown .btn:focus {
-  background-color: #fff;
+  background: var(--bs-button-active-bg);
  border-color: #1991eb;
  outline: 0;
  box-shadow: 0 0 0 2px rgba(70, 127, 207, 0.25);
--- a/frontend/src/css/password-input.css
+++ b/frontend/src/css/password-input.css
@@ -13,7 +13,7 @@
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 250px;
-  background: #fff;
+  background: var(--bs-body-bg);
  transform: translateY(-50%);
 }

@@ -88,7 +88,7 @@

 .password-strength-check-container .progress {
  border-radius: 0;
-  background-color: #fff;
+  background: var(--bs-body-bg);
 }

 .password-strength-check-container .progress .progress-bar {
--- a/frontend/src/css/pdf-file-view.css
+++ b/frontend/src/css/pdf-file-view.css
@@ -37,7 +37,7 @@
  top: -7px;
  right: 10px;
  inset-inline-start: auto;
-  background: #fff;
+  background: var(--bs-body-bg);
  padding: 8px;
  border: 1px solid rgba(0, 40, 100, 0.12);
  box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05);
@@ -119,7 +119,7 @@ input#findInput {
 #findPrevious:hover,
 #findNext:hover,
 #findClearQuery:hover {
-  background: #efefef;
+  background: var(--bs-icon-hover-bg);
 }

 #findPrevious::before,
@@ -149,7 +149,7 @@ input#findInput {
 }

 #findbar .toolbarLabel:hover {
-  background: #f5f5f5;
+  background: var(--bs-nav-hover-bg);
 }

 #printServiceDialog,
@@ -175,7 +175,7 @@ input#findInput {

 .pdfViewer .page {
  position: relative;
-  background: #fff;
+  background: var(--bs-body-bg);
  border: none;
  box-shadow: 0 0 6px #ccc;
  margin: 0 auto 10px;
@@ -195,7 +195,7 @@ input#findInput {
 }

 select#scaleSelect {
-  background: #fff;
+  background: var(--bs-body-bg);
  height: 24px;
  font-size: 12px;
 }
@@ -260,12 +260,12 @@ input#pageNumber {
  top: 0;
  bottom: 0;
  border-top: none;
-  background: #fff;
+  background: var(--bs-body-bg);
 }

 #toolbarSidebar {
  height: auto;
-  background: #fff;
+  background: var(--bs-body-bg);
 }

 #thumbnailView {
@@ -304,7 +304,7 @@ input#pageNumber {
 }

 #thumbnailView .thumbnail.selected {
-  background: #f0f0f0;
+  background: var(--bs-nav-hover-bg);
 }

 #thumbnailView .thumbnail .thumbnail-page-number {
@@ -316,7 +316,7 @@ input#pageNumber {
 }

 #thumbnailView .thumbnail .thumbnailImage {
-  border: 1px solid #ddd;
+  border: 1px solid var(--bs-border-color);
  border-radius: 3px;
 }

--- a/frontend/src/css/published-wiki-entrance.css
+++ b/frontend/src/css/published-wiki-entrance.css
@@ -9,7 +9,7 @@
 } 
 
 .view-published-wiki:hover {
-   background: #efefef;
+   background: var(--bs-icon-hover-bg);
   text-decoration: none;
   color: #666;
 }
--- a/frontend/src/css/react-context-menu.css
+++ b/frontend/src/css/react-context-menu.css
@@ -5,7 +5,7 @@
  font-size: 16px;
  color: #373a3c;
  text-align: left;
-  background-color: #fff;
+  background: var(--bs-body-bg);
  background-clip: padding-box;
  border: 1px solid rgba(0, 0, 0, .15);
  border-radius: .25rem;
--- a/frontend/src/css/repo-folder-trash.css
+++ b/frontend/src/css/repo-folder-trash.css
@@ -7,8 +7,8 @@ body {
 }

 .top-header {
-  background-color: #f8fafd;
-  border-bottom: 1px solid #eee;
+  background-color: var(--bs-header-bg);
+  border-bottom: 1px solid var(--bs-border-color);
  padding: .5rem 1rem;
  flex-shrink: 0;
 }
@@ -27,23 +27,23 @@ body {

 .op-bar {
  padding: 9px 10px;
-  background: #f0f0f0;
+  background: var(--bs-button-bg);
  border-radius: 2px;
 }

 .more {
-  background: #efefef;
+  background: var(--bs-button-bg);
  border: 0;
  color: #666;
 }

 .more:hover {
-  color: #000;
-  background: #dfdfdf;
+  color: var(--bs-body-color);
+  background: var(--bs-button-hover-bg);
 }

 .clean {
-  border-color: #ccc;
+  border-color: var(--bs-border-color);
  border-radius: 2px;
  height: 30px;
  line-height: 28px;
--- a/frontend/src/css/repo-history.css
+++ b/frontend/src/css/repo-history.css
@@ -7,8 +7,8 @@ body {
 }

 .top-header {
-  background-color: #f8fafd;
-  border-bottom: 1px solid #eee;
+  background-color: var(--bs-header-bg);
+  border-bottom: 1px solid var(--bs-border-color);
  padding: .5rem 1rem;
  flex-shrink: 0;
 }
--- a/frontend/src/css/repo-info-bar.css
+++ b/frontend/src/css/repo-info-bar.css
@@ -1,8 +1,9 @@
 .repo-info-bar {
  padding: 10px;
  margin: 10px 16px 0;
-  border: 1px solid #e6e6dd;
+  border: 1px solid var(--bs-border-color);
  border-radius: 5px;
+  color: var(--bs-body-color);
 }

 .used-tag-list {
@@ -47,7 +48,7 @@
 }

 .file-info a {
-  color: #212529;
+  color: var(--bs-body-color);
 }

 .info-icon {
@@ -74,5 +75,5 @@

 .repo-info-bar .repo-info-bar-migrate .btn-link:active {
  color: #ED7109;
-  background-color: #fff;
+  background: var(--bs-body-bg);
 }
--- a/frontend/src/css/repo-snapshot.css
+++ b/frontend/src/css/repo-snapshot.css
@@ -7,7 +7,7 @@ body {
 }

 .top-header {
-  background-color: #f8fafd;
+  background-color: var(--bs-header-bg);
  border-bottom: 1px solid #eee;
  padding: .5rem 1rem;
  flex-shrink: 0;
--- a/frontend/src/css/sdoc-revision.css
+++ b/frontend/src/css/sdoc-revision.css
@@ -6,7 +6,7 @@
 .sdoc-revision .sdoc-revision-header {
  height: 50px;
  border-bottom: 1px solid #eee;
-  background-color: #fff;
+  background: var(--bs-body-bg);
 }

 .sdoc-revision .sdoc-revision-header .sdoc-revision-header-left {
@@ -35,13 +35,13 @@
  width: 100%;
  min-height: 120px;
  flex: 1;
-  background-color: #fff;
+  background: var(--bs-body-bg);
  word-break: break-word;
  border: 1px solid #e6e6dd;
 }

 .sdoc-revision .sdoc-revision-content .sdoc-editor-content {
-  background-color: #fff;
+  background: var(--bs-body-bg);
 }

 .sdoc-revision .sdoc-revision-content .article {
--- a/frontend/src/css/seahub-modal-header.css
+++ b/frontend/src/css/seahub-modal-header.css
@@ -8,8 +8,8 @@
  font-size: 1.40625rem;
  font-weight: 700;
  line-height: 1;
-  color: #000;
-  text-shadow: 0 1px 0 #fff;
+  color: var(--bs-icon-secondary-color);
+  text-shadow: 0 1px 0 var(--bs-body-bg);
 }

 .modal .seahub-modal-btn.close:not(:disabled):not(.disabled):hover {
@@ -24,7 +24,7 @@
 }

 .modal .seahub-modal-btn .seahub-modal-btn-inner:hover {
-  background-color: #efefef;
+  background-color: var(--bs-icon-hover-bg);
 }

 .modal .seahub-modal-btn .seahub-modal-btn-inner .sf3-font {
--- a/frontend/src/css/search.css
+++ b/frontend/src/css/search.css
@@ -20,7 +20,8 @@
  min-height: 200px;
  border-radius: 3px;
  box-shadow: 0 3px 8px 0 rgba(116, 129, 141, 0.1);
-  background-color: #fff;
+  background: var(--bs-tertiary-bg);
+  color: var(--bs-body-color);
  cursor: default;
  width: 700px;
  padding: 16px 0;
@@ -54,7 +55,7 @@
 }

 .search-container.show .input-icon .search-icon-right.search-filter-controller.active:hover {
-  background-color: #efefef;
+  background-color: var(--bs-icon-hover-bg);
 }

 .search-icon-left {
@@ -75,7 +76,7 @@
 }

 .search-icon-right:hover {
-  background-color: #EFEFEF;
+  background-color: var(--bs-icon-hover-bg);
  border-radius: 3px;
 }

@@ -97,6 +98,7 @@

 .search-container.show .search-input {
  height: 38px;
+  background-color: field;
 }

 .search-result-container {
@@ -104,7 +106,7 @@
  top: 2rem;
  left: 0;
  width: 100%;
-  background-color: #fff;
+  background: var(--bs-tertiary-bg);
  border-radius: 0 0 3px 3px;
  box-shadow: 0 3px 8px 0 rgba(116, 129, 141, 0.1);
  top: 60px;
@@ -151,7 +153,7 @@
 }

 .search-result-container .search-result-item.search-result-item-highlight {
-  background-color: #f0f0f0;
+  background-color: var(--bs-nav-active-bg);
 }

 .search-result-container .search-result-container-sidepanel {
--- a/frontend/src/css/select-editor.css
+++ b/frontend/src/css/select-editor.css
@@ -44,7 +44,7 @@
 }

 .permission-editor__menu .permission-editor__option--is-disabled:hover {
-  background-color: #f0f0f0 !important;
+  background-color: var(--bs-nav-hover-bg) !important;
  color: #9c9c9c !important;
 }

@@ -55,7 +55,7 @@
  font-size: 12px;
  line-height: 13px;
  cursor: pointer;
-  color: #212529;
+  color: var(--bs-body-color);
 }

 .permission-editor-btn-add-custom-permission .sf3-font {
@@ -70,3 +70,7 @@
 .permission-editor .btn-add-custom-permission span {
  word-break: keep-all;
 }
+
+.permission-editor__control {
+  background-color: field !important;
+}
--- a/frontend/src/css/share-link-dialog.css
+++ b/frontend/src/css/share-link-dialog.css
@@ -8,7 +8,7 @@
 .share-dialog-content .share-dialog-side {
  flex-basis: 18%;
  padding: 1rem;
-  border-bottom: 1px solid #eee;
+  border-bottom: 1px solid var(--bs-border-color);
 }

 .share-dialog .nav .nav-item .nav-link {
@@ -26,7 +26,7 @@

  .share-dialog-content .share-dialog-side {
    border: 0;
-    border-right: 1px solid #eee;
+    border-right: 1px solid var(--bs-border-color);
  }

  .share-dialog-side .nav {
@@ -45,7 +45,7 @@
 }

 .share-dialog-side .nav-pills .nav-item .nav-link.active {
-  background-color: #f0f0f0;
+  background-color: var(--bs-nav-active-bg);
  color: inherit;
  position: relative;
 }
@@ -64,7 +64,7 @@
 }

 .share-dialog-side .nav-pills .nav-item .nav-link:hover {
-  background-color: #f0f0f0;
+  background-color: var(--bs-nav-hover-bg);
 }

 .share-dialog-content .share-dialog-main {
@@ -179,7 +179,7 @@ input.expire-input {
  align-items: center;
  justify-content: space-between;
  padding: .375rem 0;
-  border-bottom: 1px solid #efefef;
+  border-bottom: 1px solid var(--bs-border-color);
 }

 .custom-permission .permission-header .back-icon {
--- a/frontend/src/css/share-to-user.css
+++ b/frontend/src/css/share-to-user.css
@@ -1,15 +1,16 @@
 .user-details-popover {
-  border: 1px solid #eee;
+  border: 1px solid var(--bs-border-color);
  border-radius: 4px;
  box-shadow: 0 0 14px rgba(0, 0, 0, 0.14);
-  background: #fff;
+  background: var(--bs-tertiary-bg);
+  color: var(--bs-body-color);
  z-index: 1000;
  left: 2px;
  top: 24px;
 }

 .user-details-main {
-  border-bottom: 1px solid #eee;
+  border-bottom: 1px solid var(--bs-border-color);
 }

 .user-details-name {
--- a/frontend/src/css/shared-dir-view.css
+++ b/frontend/src/css/shared-dir-view.css
@@ -7,17 +7,17 @@ body {
 }

 #shared-dir-view .side-panel {
-  border-right: 1px solid #eee;
+  border-right: 1px solid var(--bs-border-color);
 }

 #shared-dir-view .meta-info {
-  border-bottom: 1px solid #eee;
+  border-bottom: 1px solid var(--bs-border-color);
 }

 /* tree view */
 .tree-node-hight-light {
  border-radius: 4px;
-  background-color: #f5f5f5 !important;
+  background-color: var(--bs-nav-active-bg) !important;
 }

 .tree-node-hight-light::before {
@@ -42,7 +42,7 @@ body {
 }

 .tree-node-inner-hover {
-  background-color: #f0f0f0;
+  background-color: var(--bs-nav-hover-bg);
  border-radius: 0.25rem;
 }

@@ -94,7 +94,7 @@ body {
 }

 #shared-dir-view .path-container .path-item:hover {
-  background: #efefef;
+  background: var(--bs-icon-hover-bg);
 }

 #shared-dir-view .path-container .path-split {
@@ -134,8 +134,8 @@ body {
  top: 10px;
  right: 24px;
  padding: 5px;
-  background: #fff;
-  border: 1px solid #eee;
+  background: var(--bs-body-bg);
+  border: 1px solid var(--bs-border-color);
  border-radius: 3px;
  margin: 0;
 }
--- a/frontend/src/css/shared-file-view.css
+++ b/frontend/src/css/shared-file-view.css
@@ -10,7 +10,7 @@
 .shared-file-view-md-header {
  background: #f5f5f5;
  height: 53px;
-  border-bottom: 1px solid #eee;
+  border-bottom: 1px solid var(--bs-border-color);
  padding: 8px 16px 4px;
  justify-content: space-between;
 }
@@ -23,7 +23,7 @@
  width: 100%;
  height: 60px;
  padding: 0 1rem;
-  background: #fff;
+  background: var(--bs-body-bg);
  margin: 0 auto;
  display: flex;
  align-items: center;
@@ -44,8 +44,8 @@
 .shared-file-view-body {
  height: calc(100% - 60px);
  padding: 30px 0 15px;
-  background: #f5f5f5;
-  border: 1px solid #ededed;
+  background: var(--bs-body-tertiary-bg);
+  border: 1px solid var(--bs-border-color);
  overflow: auto;
 }

@@ -78,7 +78,7 @@
 }

 .shared-file-view-head .file-toolbar-btn:hover {
-  background-color: #EFEFEF;
+  background-color: var(--bs-icon-hover-bg);
  border-radius: 3px;
 }

--- a/frontend/src/css/side-panel.css
+++ b/frontend/src/css/side-panel.css
@@ -36,7 +36,7 @@
  width: 200px;
  height: 150px;
  position: absolute;
-  background-color: #fff;
+  background: var(--bs-body-bg);
  z-index: 1004;
  box-shadow: 0 0 10px #aaa;
  border-radius: 3px;
--- a/frontend/src/css/single-dropdown-toolbar.css
+++ b/frontend/src/css/single-dropdown-toolbar.css
@@ -5,7 +5,7 @@
 }

 .sf-dropdown-combined-toggle:hover {
-  background: #efefef;
+  background: var(--bs-icon-hover-bg);
 }

 .sf-dropdown-combined-toggle .main-icon {
--- a/frontend/src/css/single-selector.css
+++ b/frontend/src/css/single-selector.css
@@ -8,7 +8,7 @@

 .sf-single-selector .options-container {
  min-width: 165px;
-  background: #fff;
+  background: var(--bs-body-bg);
  border: 1px solid #eee;
  z-index: 2;
 }
--- a/frontend/src/css/spreadsheet-file-view.css
+++ b/frontend/src/css/spreadsheet-file-view.css
@@ -8,7 +8,7 @@
  max-width: 950px;
  min-height: 100%;
  margin: 0 auto;
-  background: #fff;
+  background: var(--bs-body-bg);
  border: 1px solid #ccc;
  box-shadow: 0 0 6px #ccc;
 }
--- a/frontend/src/css/system-departments.css
+++ b/frontend/src/css/system-departments.css
@@ -4,7 +4,7 @@

 .departments-tree-panel {
  width: 25%;
-  border-right: 1px solid #eee;
+  border-right: 1px solid var(--bs-border-color);
  height: 100%;
  overflow: auto;
 }
@@ -26,7 +26,7 @@

 .departments-tree-panel .tree-node.active {
  border-radius: 4px;
-  background-color: #f5f5f5 !important;
+  background-color: var(--bs-nav-active-bg) !important;
 }

 .departments-tree-panel .tree-node.active::before {
@@ -43,7 +43,7 @@
 }

 .tree-node:hover {
-  background-color: #f0f0f0;
+  background-color: var(--bs-nav-hover-bg);
 }

 .tree-node .sf3-font {
@@ -75,7 +75,7 @@
 }

 .tree-node .right-icon:hover {
-  background-color: #dbdbdb;
+  background-color: var(--bs-icon-hover-secondary-bg);
 }

 .departments-tree-panel .tree-node-children {
@@ -86,6 +86,8 @@
 .departments-tree-panel .new-dept-btn {
  padding: 0 6px;
  margin-top: 10px;
+  background-color: var(--bs-button-bg);
+  color: var(--bs-button-color);
 }

 .departments-tree-panel .new-dept-btn-icon {
--- a/frontend/src/css/system-info.css
+++ b/frontend/src/css/system-info.css
@@ -7,7 +7,7 @@
  font-size: 1rem;
  font-weight: normal;
  padding-bottom: 0.2em;
-  border-bottom: 1px solid #ddd;
+  border-bottom: 1px solid var(--bs-border-color);
  margin-bottom: 0.7em;
 }

--- a/frontend/src/css/system-stat.css
+++ b/frontend/src/css/system-stat.css
@@ -7,11 +7,11 @@

 .sys-stat-tool {
  font-size: 13px;
-  color: #212529;
+  color: var(--bs-body-color);
 }

 .sys-stat-tool .item-active {
-  background: #efefef;
+  background: var(--bs-nav-active-bg);
 }

 .system-statistic-input-container {
@@ -28,7 +28,7 @@
 .statistic-traffic-tab {
  display: flex;
  font-size: 13px;
-  color: #212529;
+  color: var(--bs-body-color);
  margin-top: 10px;
 }

@@ -51,9 +51,9 @@
 }

 .statistic-reports-title {
-  background: #f7f7f7;
+  background: var(--bs-th-bg);
  margin-top: 15px;
-  color: #222222;
+  color: var(--bs-body-color);
  padding: 3px 10px;
 }

--- a/frontend/src/css/tc-accept.css
+++ b/frontend/src/css/tc-accept.css
@@ -7,7 +7,7 @@ body {
 }

 .top-header {
-  background-color: #f8fafd;
+  background-color: var(--bs-header-bg);
  border-bottom: 1px solid #eee;
  padding: .5rem 1rem;
  flex-shrink: 0;
--- a/frontend/src/css/tip-for-new-file.css
+++ b/frontend/src/css/tip-for-new-file.css
@@ -23,7 +23,7 @@
  margin: 0 0.75em 1.5em;
  cursor: pointer;
  width: 160px;
-  background: #fff;
+  background: var(--bs-body-bg);
  border: 1px solid #d1d1d1;
 }

--- a/frontend/src/css/toolbar.css
+++ b/frontend/src/css/toolbar.css
@@ -15,7 +15,7 @@
  width: 1px;
  height: 30px;
  content: '';
-  background-color: #ddd;
+  background-color: var(--bs-border-color);
 }

 /* end toolbar-container */
@@ -26,10 +26,11 @@
  margin-right: 0.25rem;
  height: 30px;
  min-width: 55px;
-  background-color: #fff;
+  background: var(--bs-body-bg);
+  color: var(--bs-body-color);
  line-height: 29px;
  font-weight: normal;
-  border: 1px solid #ccc;
+  border: 1px solid var(--bs-border-color);
  border-radius: 2px;
 }

@@ -57,7 +58,7 @@
  height: 32px;
  margin-left: 8px;
  text-decoration: none;
-  color: #ccc;
+  color: var(--bs-icon-color);
 }
 /* end common-toolbar */

--- a/frontend/src/css/tree-view-contextmenu.css
+++ b/frontend/src/css/tree-view-contextmenu.css
@@ -8,10 +8,10 @@
  padding: 0.5rem 0;
  margin: 0.125rem 0 0;
  font-size: 0.9375rem;
-  color: #212529;
+  color: var(--bs-body-color);
  text-align: left;
  list-style: none;
-  background-color: #fff;
+  background: var(--bs-body-bg);
  background-clip: padding-box;
  border: 1px solid rgba(0, 40, 100, 0.12);
  border-radius: 3px;
--- a/frontend/src/css/upload-link.css
+++ b/frontend/src/css/upload-link.css
@@ -7,7 +7,7 @@ body {
 }

 .top-header {
-  background-color: #f8fafd;
+  background-color: var(--bs-header-bg);
  border-bottom: 1px solid #eee;
  padding: .5rem 1rem;
  flex-shrink: 0;
--- a/frontend/src/css/user-notifications.css
+++ b/frontend/src/css/user-notifications.css
@@ -34,7 +34,7 @@
 }

 .notification-list-content .notification-modal-body .notice-dialog-side {
-  border-right: 1px solid #eee;
+  border-right: 1px solid var(--bs-border-color);
  display: flex;
  flex: 0 0 20%;
  padding: 12px 8px;
@@ -49,8 +49,8 @@
 }

 .notification-list-content .notification-modal-body .notice-dialog-side .nav-item .nav-link.active {
-  background-color: #F5F5F5;
-  color: #212529;
+  background-color: var(--bs-nav-active-bg);
+  color: var(--bs-body-color);
 }

 .notification-list-content .notification-modal-body .notice-dialog-side .nav-item .nav-link.active::before {
@@ -94,7 +94,7 @@

 .notification-dialog-body table th {
  padding: 0.3125rem 0.1875rem;
-  border-bottom: 1px solid #eee;
+  border-bottom: 1px solid var(--bs-border-color);
  text-align: left;
  font-weight: normal;
  line-height: 1.6;
@@ -102,14 +102,14 @@
 }

 .notification-dialog-body table tbody tr:hover {
-  background: #f5f5f5;
+  background: var(--bs-tr-hover-bg);
  cursor: pointer;
 }

 .notification-dialog-body table td {
  padding: 0.5rem 0.1875rem;
  border-bottom: none;
-  color: #212529;
+  color: var(--bs-body-color);
  font-size: 14px;
  word-break: break-all;
 }
--- a/frontend/src/css/wiki-trash-dialog.css
+++ b/frontend/src/css/wiki-trash-dialog.css
@@ -23,7 +23,7 @@
 }

 .trash-dialog .modal-body .more {
-  background: #efefef;
+  background: var(--bs-button-active-bg);
  border: 0;
  color: #666;
 }
--- a/frontend/src/metadata/components/cell-editors/collaborator-editor/delete-collaborator/index.css
+++ b/frontend/src/metadata/components/cell-editors/collaborator-editor/delete-collaborator/index.css
@@ -32,7 +32,7 @@
 }

 .collaborator .collaborator-name {
-  color: #212529;
+  color: var(--bs-body-color);
  margin-left: 5px;
  max-width: 200px;
  flex: 1 1;
--- a/frontend/src/metadata/components/cell-editors/collaborator-editor/index.css
+++ b/frontend/src/metadata/components/cell-editors/collaborator-editor/index.css
@@ -4,7 +4,7 @@
  min-height: 160px;
  overflow: hidden;
  opacity: 1;
-  background-color: #ffffff;
+  background: var(--bs-body-bg);
  border: 1px solid #dedede;
  border-radius: 4px;
  box-shadow: 0px 2px 10px 0 #dedede;
--- a/frontend/src/metadata/components/cell-editors/single-select-editor/index.css
+++ b/frontend/src/metadata/components/cell-editors/single-select-editor/index.css
@@ -4,7 +4,7 @@
  min-height: 160px;
  overflow: hidden;
  opacity: 1;
-  background-color: #ffffff;
+  background: var(--bs-body-bg);
  border: 1px solid #dedede;
  border-radius: 4px;
  box-shadow: 0px 2px 10px 0 #dedede;
--- a/frontend/src/metadata/components/cell-editors/tags-editor/delete-tags/index.css
+++ b/frontend/src/metadata/components/cell-editors/tags-editor/delete-tags/index.css
@@ -1,6 +1,6 @@
 .sf-metadata-delete-select-tags {
-  background-color: #f5f5f5;
-  border-bottom: 1px solid #dde2ea;
+  background-color: var(--bs-body-tertiary-bg);
+  border-bottom: 1px solid var(--bs-border-color);
  border-radius: 3px 3px 0 0;
  min-height: 28px;
  padding: 8px 16px;
@@ -18,7 +18,7 @@
  padding: 0 8px 0 2px;
  font-size: 13px;
  border-radius: 10px;
-  border: 1px solid #dbdbdb;
+  border: 1px solid var(--bs-border-color);
  background: #fff;
  margin-top: 2px;
  margin-bottom: 2px;
--- a/frontend/src/metadata/components/cell-editors/tags-editor/index.css
+++ b/frontend/src/metadata/components/cell-editors/tags-editor/index.css
@@ -1,5 +1,5 @@
 .sf-metadata-tags-editor {
-  background-color: #fff;
+  background: var(--bs-body-bg);
  border: 1px solid #dedede;
  border-radius: 4px;
  box-shadow: 0 2px 10px 0 #dedede;
@@ -64,7 +64,7 @@
 }

 .sf-metadata-tags-editor .sf-metadata-tags-editor-tag-container-highlight {
-  background: #f5f5f5;
+  background: var(--bs-nav-hover-bg);
  cursor: pointer;
 }

@@ -97,7 +97,7 @@
  display: flex;
  justify-content: flex-start;
  align-items: center;
-  background-color: #fff;
+  background: var(--bs-body-bg);
  font-size: 13px;
  border: 1px solid #dbdbdb;
  border-radius: 10px;
--- a/frontend/src/metadata/components/cell-editors/tags-editor/tag-item/index.css
+++ b/frontend/src/metadata/components/cell-editors/tags-editor/tag-item/index.css
@@ -2,7 +2,7 @@
  position: relative;
  align-items: center;
  border-radius: 2px;
-  color: #212529;
+  color: var(--bs-body-color);
  display: flex;
  font-size: 13px;
  height: 30px;
--- a/frontend/src/metadata/components/cell-formatter/collaborator/index.css
+++ b/frontend/src/metadata/components/cell-formatter/collaborator/index.css
@@ -7,6 +7,7 @@
  font-size: 13px;
  border-radius: 10px;
  background: #eaeaea;
+  color: #212529;
  width: fit-content;
  max-width: 200px;
 }
--- a/frontend/src/metadata/components/cell-formatter/file-tags/index.css
+++ b/frontend/src/metadata/components/cell-formatter/file-tags/index.css
@@ -37,7 +37,7 @@
  display: flex;
  justify-content: flex-start;
  align-items: center;
-  background-color: #fff;
+  background: var(--bs-body-bg);
  font-size: 13px;
  border: 1px solid #dbdbdb;
  border-radius: 10px;
--- a/frontend/src/metadata/components/cell-formatter/long-text/long-text-preview/index.css
+++ b/frontend/src/metadata/components/cell-formatter/long-text/long-text-preview/index.css
@@ -11,7 +11,7 @@
  overflow: hidden;
  bottom: 20px;
  border: 1px solid rgba(0, 40, 100, 0.12);
-  background-color: #ffffff; 
+  background: var(--bs-body-bg); 
  box-shadow: 0 0 5px #ccc;
  background-clip: padding-box;
  z-index: 100;
--- a/frontend/src/metadata/components/data-process-setter/field-display-settings/index.css
+++ b/frontend/src/metadata/components/data-process-setter/field-display-settings/index.css
@@ -10,7 +10,9 @@
 }

 .sf-metadata-filed-display-setting .sf-metadata-filed-display-setting-header .sf-metadata-filed-display-toggle-btn:hover {
-  color: #3a2121;
+  border-radius: 3px;
+  background-color: var(--bs-icon-hover-bg);
+  color: var(--bs-icon-secondary-color);
  cursor: pointer;
 }

@@ -30,7 +32,7 @@
 }

 .sf-metadata-filed-display-setting .sf-metadata-filed-display-setting-body .sf-metadata-filed-display-setting-item-container:hover {
-  background-color: #f0f0f0;
+  background-color: var(--bs-nav-hover-bg);
 }

 .sf-metadata-filed-display-setting .sf-metadata-filed-display-setting-body .sf-metadata-filed-display-setting-dragbar {
@@ -63,7 +65,6 @@
  margin-left: 0;
  padding-right: 5px;
  flex: 1;
-  color: #212529;
  transition: .3s color;
 }

--- a/Show More
+++ b/Show More