dumi 2.0.18 → 2.1.0

package/theme-default/builtins/Previewer/index.less

@@ -4,7 +4,11 @@
   margin: 24px 0 32px;
   border: 1px solid @c-border-light;
   border-radius: 4px;
-  background-color: #fff;
+  background-color: inherit;
+
+  @{dark-selector} & {
+    border-color: @c-border-less-dark;
+  }
 
   [data-dumi-demo-grid] & {
     margin: 0 0 16px;
@@ -41,6 +45,10 @@
         display: block;
         height: 24px;
         background-color: @c-border-light;
+
+        @{dark-selector} & {
+          background-color: @c-border-less-dark;
+        }
       }
 
       &::after {
@@ -72,6 +80,10 @@
 
   &-meta {
     border-top: 1px solid @c-border-light;
+
+    @{dark-selector} & {
+      border-top-color: @c-border-less-dark;
+    }
   }
 
   &-desc {
@@ -80,6 +92,10 @@
     > .markdown {
       padding: 14px 24px;
       border-bottom: 1px dashed @c-border-light;
+
+      @{dark-selector} & {
+        border-bottom-color: @c-border-less-dark;
+      }
     }
 
     > h5 {
@@ -100,9 +116,23 @@
         )
         100%;
 
+      @{dark-selector} & {
+        background: linear-gradient(
+            to top,
+            rgba(0, 0, 0, 95%),
+            rgba(0, 0, 0, 95%) 50%,
+            rgba(0, 0, 0, 0%)
+          )
+          100%;
+      }
+
       > a {
         color: @c-text;
 
+        @{dark-selector} & {
+          color: @c-text-dark;
+        }
+
         &:not(:hover) {
           text-decoration: none;
         }
@@ -113,6 +143,10 @@
           color: @c-warning;
           font-size: 12px;
           line-height: 15px;
+
+          @{dark-selector} & {
+            color: @c-warning-dark;
+          }
         }
       }
     }
@@ -121,14 +155,27 @@
   &[data-active] {
     box-shadow: 0 0 0 4px fade(@c-primary, 10%);
     border-color: lighten(@c-primary, 20%);
+
+    @{dark-selector} & {
+      box-shadow: 0 0 0 4px fade(@c-primary-dark, 10%);
+      border-color: darken(@c-primary-dark, 20%);
+    }
   }
 
   // debug mode
   &[data-debug] {
     border-color: lighten(@c-warning, 20%);
 
+    @{dark-selector} & {
+      border-color: darken(@c-warning-dark, 20%);
+    }
+
     &[data-active] {
       box-shadow: 0 0 0 4px fade(@c-warning, 10%);
+
+      @{dark-selector} & {
+        box-shadow: 0 0 0 4px fade(@c-warning-dark, 10%);
+      }
     }
   }
 }

package/theme-default/builtins/SourceCode/index.less

@@ -1,5 +1,22 @@
 @import (reference) '../../styles/variables.less';
 
+// override prism theme for dark mode
+@{dark-selector} {
+  .token.doctype,
+  .token.punctuation,
+  .token.entity,
+  code[class*='language-'],
+  pre[class*='language-'] {
+    color: @c-text-secondary-dark;
+  }
+
+  .token.comment,
+  .token.prolog,
+  .token.cdata {
+    color: @c-text-note-dark;
+  }
+}
+
 .@{prefix}-source-code {
   @bg-color: tint(@c-site-bg, 50%);
 
@@ -39,14 +56,26 @@
       width: 16px;
       fill: darken(@c-border, 20%);
       transition: fill 0.2s;
+
+      @{dark-selector} & {
+        fill: lighten(@c-border-dark, 20%);
+      }
     }
 
     &:hover > svg {
       fill: darken(@c-border, 30%);
+
+      @{dark-selector} & {
+        fill: lighten(@c-border-dark, 30%);
+      }
     }
 
     &[data-copied] > svg {
-      fill: rgb(11 174 11);
+      fill: @c-success;
+
+      @{dark-selector} & {
+        fill: @c-success-dark;
+      }
     }
   }
 
@@ -54,4 +83,14 @@
     opacity: 0;
     visibility: hidden;
   }
+
+  @{dark-selector} & {
+    @bg-color: shade(@c-site-bg-dark, 50%);
+
+    background-color: @bg-color;
+
+    &-copy {
+      background-color: fadeout(@bg-color, 80%);
+    }
+  }
 }

package/theme-default/builtins/Table/index.less

@@ -27,7 +27,7 @@
         rgba(0, 0, 0, 0%)
       );
 
-      [data-prefers-color='dark'] & {
+      @{dark-selector} & {
         background-image: linear-gradient(
           to right,
           rgba(0, 0, 0, 50%),
@@ -44,7 +44,7 @@
         rgba(0, 0, 0, 0%)
       );
 
-      [data-prefers-color='dark'] & {
+      @{dark-selector} & {
         background-image: linear-gradient(
           to left,
           rgba(0, 0, 0, 50%),

package/theme-default/layouts/DocLayout/index.less

@@ -3,12 +3,21 @@
 body {
   margin: 0;
   padding: 0;
+  background-color: @c-site-bg;
+
+  @{dark-selector} & {
+    background-color: @c-site-bg-dark;
+  }
 }
 
 .@{prefix}-doc-layout {
   font-family: sans-serif;
   background-color: @c-site-bg;
 
+  @{dark-selector} & {
+    background-color: @c-site-bg-dark;
+  }
+
   @media @mobile {
     &::before {
       content: '';
@@ -44,6 +53,11 @@ body {
     background-color: fadeout(@c-site-bg, 10%);
     backdrop-filter: blur(6px);
 
+    @{dark-selector} & {
+      border-top-color: @c-border-less-dark;
+      background-color: fadein(@c-site-bg-dark, 10%);
+    }
+
     @media @mobile {
       display: flex;
     }
@@ -54,11 +68,19 @@ body {
       border: 0;
       background-color: transparent;
 
+      @{dark-selector} & {
+        color: @c-text-secondary-dark;
+      }
+
       > svg {
         width: 16px;
         margin-right: 6px;
         fill: @c-text-secondary;
         vertical-align: middle;
+
+        @{dark-selector} & {
+          fill: @c-text-secondary-dark;
+        }
       }
     }
   }
@@ -95,6 +117,10 @@ body {
         color: @c-text-note;
         font-size: 13px;
         line-height: 1;
+
+        @{dark-selector} & {
+          color: @c-text-note-dark;
+        }
       }
     }
   }

package/theme-default/locales/en-US.json

@@ -1,6 +1,8 @@
 {
-  "a": "A",
   "header.search.placeholder": "Type keywords...",
+  "header.color.mode.light": "Light Mode",
+  "header.color.mode.dark": "Dark Mode",
+  "header.color.mode.auto": "Follow System",
   "previewer.actions.code.expand": "Show Code",
   "previewer.actions.code.shrink": "Hide Code",
   "previewer.actions.codesandbox": "Open in CodeSandbox",

package/theme-default/locales/zh-CN.json

@@ -1,6 +1,8 @@
 {
-  "a": "嘿",
   "header.search.placeholder": "输入关键字搜索...",
+  "header.color.mode.light": "亮色模式",
+  "header.color.mode.dark": "暗色模式",
+  "header.color.mode.auto": "跟随系统",
   "previewer.actions.code.expand": "展开代码",
   "previewer.actions.code.shrink": "收起代码",
   "previewer.actions.codesandbox": "在 CodeSandbox 中打开",

package/theme-default/slots/ColorSwitch/index.d.ts

@@ -0,0 +1,4 @@
+import { type FC } from 'react';
+import './index.less';
+declare const ColorSwitch: FC;
+export default ColorSwitch;

package/theme-default/slots/ColorSwitch/index.js

@@ -0,0 +1,82 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+import { FormattedMessage, useIntl, usePrefersColor } from 'dumi';
+import React from 'react';
+import "./index.less";
+
+var IconDark = function IconDark() {
+  return /*#__PURE__*/React.createElement("svg", {
+    viewBox: "0 0 16 16"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M8.218 1.455c3.527.109 6.327 3.018 6.327 6.545 0 3.6-2.945 6.545-6.545 6.545a6.562 6.562 0 0 1-6.036-4h.218c3.6 0 6.545-2.945 6.545-6.545 0-.91-.182-1.745-.509-2.545m0-1.455c-.473 0-.909.218-1.2.618-.29.4-.327.946-.145 1.382.254.655.4 1.31.4 2 0 2.8-2.291 5.09-5.091 5.09h-.218c-.473 0-.91.22-1.2.62-.291.4-.328.945-.146 1.38C1.891 14.074 4.764 16 8 16c4.4 0 8-3.6 8-8a7.972 7.972 0 0 0-7.745-8h-.037Z"
+  }));
+};
+
+var IconLight = function IconLight() {
+  return /*#__PURE__*/React.createElement("svg", {
+    viewBox: "0 0 16 16"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M8 13a1 1 0 0 1 1 1v1a1 1 0 1 1-2 0v-1a1 1 0 0 1 1-1ZM8 3a1 1 0 0 1-1-1V1a1 1 0 1 1 2 0v1a1 1 0 0 1-1 1Zm7 4a1 1 0 1 1 0 2h-1a1 1 0 1 1 0-2h1ZM3 8a1 1 0 0 1-1 1H1a1 1 0 1 1 0-2h1a1 1 0 0 1 1 1Zm9.95 3.536.707.707a1 1 0 0 1-1.414 1.414l-.707-.707a1 1 0 0 1 1.414-1.414Zm-9.9-7.072-.707-.707a1 1 0 0 1 1.414-1.414l.707.707A1 1 0 0 1 3.05 4.464Zm9.9 0a1 1 0 0 1-1.414-1.414l.707-.707a1 1 0 0 1 1.414 1.414l-.707.707Zm-9.9 7.072a1 1 0 0 1 1.414 1.414l-.707.707a1 1 0 0 1-1.414-1.414l.707-.707ZM8 4a4 4 0 1 0 0 8 4 4 0 0 0 0-8Zm0 6.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5Z"
+  }));
+};
+
+var IconAuto = function IconAuto() {
+  return /*#__PURE__*/React.createElement("svg", {
+    viewBox: "0 0 16 16"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M14.595 8a6.595 6.595 0 1 1-13.19 0 6.595 6.595 0 0 1 13.19 0ZM8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0Zm0 2.014v11.972A5.986 5.986 0 0 0 8 2.014Z"
+  }));
+};
+
+var ICON_MAPPING = {
+  light: IconLight,
+  dark: IconDark,
+  auto: IconAuto
+};
+
+var ColorSwitch = function ColorSwitch() {
+  var intl = useIntl();
+
+  var _usePrefersColor = usePrefersColor(),
+      _usePrefersColor2 = _slicedToArray(_usePrefersColor, 3),
+      prefersColor = _usePrefersColor2[1],
+      setPrefersColor = _usePrefersColor2[2];
+
+  var Icon = ICON_MAPPING[prefersColor];
+  return /*#__PURE__*/React.createElement("span", {
+    className: "dumi-default-color-switch",
+    "data-dumi-tooltip": intl.formatMessage({
+      id: "header.color.mode.".concat(prefersColor)
+    }),
+    "data-dumi-tooltip-bottom": true
+  }, Icon && /*#__PURE__*/React.createElement(Icon, null), /*#__PURE__*/React.createElement("select", {
+    onChange: function onChange(ev) {
+      return setPrefersColor(ev.target.value);
+    },
+    value: prefersColor
+  }, /*#__PURE__*/React.createElement("option", {
+    value: "light"
+  }, /*#__PURE__*/React.createElement(FormattedMessage, {
+    id: "header.color.mode.light"
+  })), /*#__PURE__*/React.createElement("option", {
+    value: "dark"
+  }, /*#__PURE__*/React.createElement(FormattedMessage, {
+    id: "header.color.mode.dark"
+  })), /*#__PURE__*/React.createElement("option", {
+    value: "auto"
+  }, /*#__PURE__*/React.createElement(FormattedMessage, {
+    id: "header.color.mode.auto"
+  }))));
+};
+
+export default ColorSwitch;

package/theme-default/slots/ColorSwitch/index.less

@@ -0,0 +1,58 @@
+@import (reference) '../../styles/variables.less';
+
+.@{prefix}-color-switch {
+  position: relative;
+  font-size: 0;
+  line-height: 0;
+
+  @media screen and (max-width: 1430px) {
+    &::before {
+      left: auto;
+      right: auto;
+      inset-inline-end: -15px;
+      transform: none;
+
+      [class*='-switch'] + & {
+        inset-inline-end: 0;
+      }
+    }
+  }
+
+  [class*='-switch'] + & {
+    margin-inline-start: 15px;
+    margin-inline-end: -15px;
+    padding-inline: 15px;
+    border-inline-start: 1px solid @c-border;
+
+    @{dark-selector} & {
+      border-inline-start-color: @c-border-dark;
+    }
+  }
+
+  svg {
+    width: 16px;
+    fill: @c-text-secondary;
+
+    @{dark-selector} & {
+      fill: @c-text-secondary-dark;
+    }
+  }
+
+  &:hover svg {
+    fill: @c-primary;
+
+    @{dark-selector} & {
+      fill: @c-primary-dark;
+    }
+  }
+
+  select {
+    position: absolute;
+    top: 0;
+    left: 0;
+    opacity: 0;
+    max-width: 100%;
+    max-height: 16px;
+    cursor: pointer;
+  }
+}

package/theme-default/slots/Content/index.less

@@ -3,13 +3,25 @@
 .markdown {
   color: @c-text;
 
+  @{dark-selector} & {
+    color: @c-text-dark;
+  }
+
   // hyperlink
   a {
     color: @c-primary;
+
+    @{dark-selector} & {
+      color: @c-primary-dark;
+    }
   }
 
   img {
     max-width: 100%;
+
+    @{dark-selector} & {
+      opacity: 0.8;
+    }
   }
 
   // inline code
@@ -18,6 +30,10 @@
     color: #d56161;
     background: darken(@c-site-bg, 2%);
     border-radius: 2px;
+
+    @{dark-selector} & {
+      background: lighten(@c-site-bg-dark, 5%);
+    }
   }
 
   // pre tag
@@ -26,6 +42,10 @@
     padding-left: 24px;
     padding-right: 24px;
     background-color: tint(@c-site-bg, 50%);
+
+    @{dark-selector} & {
+      background-color: shade(@c-site-bg-dark, 50%);
+    }
   }
 
   // table
@@ -35,6 +55,10 @@
 
   th {
     background-color: tint(@c-site-bg, 50%);
+
+    @{dark-selector} & {
+      background-color: shade(@c-site-bg-dark, 50%);
+    }
   }
 
   th,
@@ -44,6 +68,10 @@
     padding-inline-start: 16px;
     padding-inline-end: 16px;
     border-color: @c-border-light;
+
+    @{dark-selector} & {
+      border-color: @c-border-less-dark;
+    }
   }
 
   // blockquote
@@ -53,6 +81,11 @@
     margin-inline-end: 0;
     background-color: tint(@c-site-bg, 50%);
     border-left: 5px solid @c-border-light;
+
+    @{dark-selector} & {
+      background-color: shade(@c-site-bg-dark, 50%);
+      border-left-color: @c-border-less-dark;
+    }
   }
 
   // list
@@ -78,6 +111,10 @@
       text-align: right;
       line-height: inherit;
 
+      @{dark-selector} & {
+        color: @c-text-dark;
+      }
+
       [data-direction='rtl'] & {
         float: right;
       }
@@ -90,6 +127,10 @@
         content: '#';
         color: @c-text-secondary;
         font-size: 20px;
+
+        @{dark-selector} & {
+          color: @c-text-secondary-dark;
+        }
       }
     }
 
@@ -112,6 +153,10 @@
     border-top-right-radius: 10px;
     box-shadow: 0 8px 24px 0 rgba(0, 0, 0, 5%);
 
+    @{dark-selector} & {
+      background-color: lighten(@c-site-bg-dark, 3%);
+    }
+
     @media @mobile {
       max-width: initial;
       margin: 0 -24px;

package/theme-default/slots/ContentTabs/index.less

@@ -9,6 +9,10 @@
   padding: 0 @s-content-padding;
   border-bottom: 1px solid @c-border-light;
 
+  @{dark-selector} & {
+    border-bottom-color: @c-border-less-dark;
+  }
+
   @media @mobile {
     margin: -24px -24px 24px;
     padding: 0 24px;
@@ -37,8 +41,16 @@
       cursor: pointer;
       transition: all 0.2s;
 
+      @{dark-selector} & {
+        color: @c-text-secondary-dark;
+      }
+
       &:hover {
         color: @c-primary;
+
+        @{dark-selector} & {
+          color: @c-primary-dark;
+        }
       }
     }
 
@@ -55,6 +67,10 @@
 
       > button {
         color: @c-text;
+
+        @{dark-selector} & {
+          color: @c-text-dark;
+        }
       }
 
       &::after {
@@ -65,6 +81,10 @@
         bottom: -1px;
         height: 1px;
         background-color: @c-primary;
+
+        @{dark-selector} & {
+          background-color: @c-primary-dark;
+        }
       }
     }
   }

package/theme-default/slots/Features/index.less

@@ -51,8 +51,18 @@
       color: @c-text;
       font-weight: normal;
       font-size: 20px;
+
+      @{dark-selector} & {
+        color: @c-text-dark;
+      }
+
       a {
         color: @c-primary;
+
+        @{dark-selector} & {
+          color: @c-primary-dark;
+        }
+
         &:not(:hover) {
           text-decoration: none;
         }
@@ -69,6 +79,10 @@
       font-size: 16px;
       line-height: 1.475;
 
+      @{dark-selector} & {
+        color: @c-text-secondary-dark;
+      }
+
       @media @mobile {
         font-size: 14px;
       }
@@ -76,6 +90,10 @@
       a {
         color: @c-primary;
 
+        @{dark-selector} & {
+          color: @c-primary-dark;
+        }
+
         &:not(:hover) {
           text-decoration: none;
         }

package/theme-default/slots/Footer/index.less

@@ -9,6 +9,11 @@
   text-align: center;
   padding: @s-content-padding * 0.6 0;
 
+  @{dark-selector} & {
+    border-top-color: @c-border-less-dark;
+    color: @c-text-note-dark;
+  }
+
   @media @mobile {
     padding: @s-content-padding * 0.3 0;
     font-size: 13px;
@@ -17,6 +22,10 @@
   a {
     color: @c-primary;
 
+    @{dark-selector} & {
+      color: @c-primary-dark;
+    }
+
     &:not(:hover) {
       text-decoration: none;
     }

package/theme-default/slots/Header/index.js

@@ -13,7 +13,8 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import HeaderExtra from "../HeadeExtra";
 import { ReactComponent as IconClose } from '@ant-design/icons-svg/inline-svg/outlined/close.svg';
 import { ReactComponent as IconMenu } from '@ant-design/icons-svg/inline-svg/outlined/menu.svg';
-import { useRouteMeta } from 'dumi';
+import { useRouteMeta, useSiteData } from 'dumi';
+import ColorSwitch from "dumi/theme/slots/ColorSwitch";
 import LangSwitch from "dumi/theme/slots/LangSwitch";
 import Logo from "dumi/theme/slots/Logo";
 import Navbar from "dumi/theme/slots/Navbar";
@@ -31,6 +32,9 @@ var Header = function Header() {
       showMenu = _useState2[0],
       setShowMenu = _useState2[1];
 
+  var _useSiteData = useSiteData(),
+      themeConfig = _useSiteData.themeConfig;
+
   return /*#__PURE__*/React.createElement("div", {
     className: "dumi-default-header",
     "data-static": Boolean(frontmatter.hero) || undefined,
@@ -46,7 +50,7 @@ var Header = function Header() {
     className: "dumi-default-header-right"
   }, /*#__PURE__*/React.createElement(Navbar, null), /*#__PURE__*/React.createElement("div", {
     className: "dumi-default-header-right-aside"
-  }, /*#__PURE__*/React.createElement(SearchBar, null), /*#__PURE__*/React.createElement(LangSwitch, null), /*#__PURE__*/React.createElement(RtlSwitch, null), /*#__PURE__*/React.createElement(HeaderExtra, null))), /*#__PURE__*/React.createElement("button", {
+  }, /*#__PURE__*/React.createElement(SearchBar, null), /*#__PURE__*/React.createElement(LangSwitch, null), /*#__PURE__*/React.createElement(RtlSwitch, null), themeConfig.prefersColor.switch && /*#__PURE__*/React.createElement(ColorSwitch, null), /*#__PURE__*/React.createElement(HeaderExtra, null))), /*#__PURE__*/React.createElement("button", {
     type: "button",
     className: "dumi-default-header-menu-btn",
     onClick: function onClick(ev) {