refactor: imporve detailed styles for default theme

src/client/pages/Demo/index.less

@@ -0,0 +1,4 @@
+body {
+  margin: 0;
+  padding: 0;
+}

src/client/pages/Demo.ts → src/client/pages/Demo/index.ts

@@ -1,5 +1,6 @@
 import { useParams, useSiteData } from 'dumi';
 import { createElement, type FC } from 'react';
+import './index.less';
 
 const DemoRenderPage: FC = () => {
   const { id } = useParams();

src/client/theme-api/DumiPage.tsx

@@ -4,7 +4,7 @@ import React, { useEffect, useState, type FC, type ReactNode } from 'react';
 import { useTabQueryState } from './useTabMeta';
 
 export const DumiPage: FC<{ children: ReactNode }> = (props) => {
-  const { hash, pathname } = useLocation();
+  const { hash } = useLocation();
   const { tabs } = useRouteMeta();
   const [tabKey, setTabKey] = useTabQueryState();
   const [tab, setTab] = useState<NonNullable<typeof tabs>[0] | undefined>(() =>
@@ -20,15 +20,13 @@ export const DumiPage: FC<{ children: ReactNode }> = (props) => {
   // handle hash change
   useEffect(() => {
     const id = hash.replace('#', '');
-    const elm = id && document.getElementById(id);
 
-    if (elm) elm.scrollIntoView();
-  }, [hash]);
+    setTimeout(() => {
+      const elm = id && document.getElementById(decodeURIComponent(id));
 
-  // handle pathname change
-  useEffect(() => {
-    document.documentElement.scrollTo(0, 0);
-  }, [pathname]);
+      if (elm) document.documentElement.scrollTo(0, elm.offsetTop - 80);
+    }, 1);
+  }, [hash]);
 
   return (
     <>

src/client/theme-default/builtins/Table/index.less

@@ -1,7 +1,7 @@
 @import (reference) '../../styles/variables.less';
 
 .@{prefix}-table {
-  margin: 16px 0 32px;
+  margin: 24px 0 32px;
   transform: translate(0, 0);
 
   &-content {
@@ -23,15 +23,15 @@
       left: 0;
       background-image: linear-gradient(
         to right,
-        rgba(0, 0, 0, 0.1),
-        rgba(0, 0, 0, 0)
+        rgb(0 0 0 / 10%),
+        rgb(0 0 0 / 0%)
       );
 
       [data-prefers-color='dark'] & {
         background-image: linear-gradient(
           to right,
-          rgba(0, 0, 0, 0.5),
-          rgba(0, 0, 0, 0)
+          rgb(0 0 0 / 50%),
+          rgb(0 0 0 / 0%)
         );
       }
     }
@@ -40,15 +40,15 @@
       right: 0;
       background-image: linear-gradient(
         to left,
-        rgba(0, 0, 0, 0.1),
-        rgba(0, 0, 0, 0)
+        rgb(0 0 0 / 10%),
+        rgb(0 0 0 / 0%)
       );
 
       [data-prefers-color='dark'] & {
         background-image: linear-gradient(
           to left,
-          rgba(0, 0, 0, 0.5),
-          rgba(0, 0, 0, 0)
+          rgb(0 0 0 / 50%),
+          rgb(0 0 0 / 0%)
         );
       }
     }

src/client/theme-default/layouts/DocLayout/index.less

@@ -3,10 +3,11 @@
 body {
   margin: 0;
   padding: 0;
-  background-color: @c-site-bg;
 }
 
 .@{prefix}-doc-layout {
+  background-color: @c-site-bg;
+
   @media @mobile {
     &::before {
       content: '';

src/client/theme-default/slots/Content/index.less

@@ -41,6 +41,54 @@
     padding-inline-end: 16px;
     border-color: @c-border-light;
   }
+
+  // blockquote
+  blockquote {
+    font-style: italic;
+    margin-inline-start: 0;
+    margin-inline-end: 0;
+    background-color: tint(@c-site-bg, 50%);
+    border-left: 5px solid @c-border-light;
+  }
+
+  // list
+  ul li {
+    line-height: 1.8;
+  }
+
+  // anchor of headings
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    > a[aria-hidden]:first-child {
+      float: left;
+      width: 20px;
+      padding-right: 4px;
+      margin-left: -24px;
+      color: @c-text;
+      // hide phantom blank node
+      font-size: 0;
+      text-align: right;
+      line-height: inherit;
+
+      &:hover {
+        border: 0;
+      }
+
+      > .icon-link::before {
+        content: '#';
+        color: @c-text-secondary;
+        font-size: 20px;
+      }
+    }
+
+    &:not(:hover) > a[aria-hidden]:first-child > .icon-link {
+      visibility: hidden;
+    }
+  }
 }
 
 .@{prefix}-content {

src/client/theme-default/slots/Features/index.less

@@ -48,7 +48,7 @@
 
     > h3 {
       margin: 4px 0;
-      color: #2c4262;
+      color: @c-text;
       font-weight: normal;
       font-size: 20px;
 
@@ -59,7 +59,7 @@
 
     > p {
       margin: 12px 0;
-      color: #61728a;
+      color: @c-text-secondary;
       font-size: 16px;
       line-height: 1.475;
 

src/client/theme-default/slots/Hero/index.less

@@ -35,7 +35,7 @@
 
   > p {
     margin: 32px;
-    color: #4e6789;
+    color: @c-text-secondary;
     font-size: 20px;
     line-height: 1.6;
 

src/client/theme-default/styles/variables.less

@@ -7,9 +7,9 @@
 @s-header-height-m: 52px;
 
 @c-primary: #1677ff;
-@c-text: #333;
-@c-text-secondary: #666;
-@c-text-note: #999;
+@c-text: #30363f;
+@c-text-secondary: #4f5866;
+@c-text-note: #8a9099;
 @c-border: #d0d5d8;
 @c-border-light: #e4e9ec;
 @c-site-bg: #f7f9fb;

src/features/theme/index.ts

@@ -179,7 +179,7 @@ export default (api: IApi) => {
     api.writeTmpFile({
       noPluginDir: true,
       path: 'dumi/theme/ContextWrapper.tsx',
-      content: `import React, { useState, useEffect } from 'react';
+      content: `import React, { useState, useEffect, useRef } from 'react';
 import { useOutlet, history } from 'dumi';
 import { SiteContext } from '${winPath(
         require.resolve('../../client/theme-api/context'),
@@ -190,10 +190,19 @@ import { locales } from '../locales/config';
 export default function DumiContextWrapper() {
   const outlet = useOutlet();
   const [loading, setLoading] = useState(true);
+  const prev = useRef(history.location.pathname);
 
-  // mark loading when route change, page component will set false when loaded
   useEffect(() => {
-    return history.listen(() => setLoading(true));
+    return history.listen((next) => {
+      // mark loading when route change, page component will set false when loaded
+      setLoading(true);
+
+      // scroll to top when route changed
+      if (next.location.pathname !== prev.current) {
+        prev.current = next.location.pathname;
+        document.documentElement.scrollTo(0, 0);
+      }
+    });
   }, []);
 
   return (