[Feature request] New Default Theme for VuePress 2

[pengzhanbo]

Clear and concise description of the problem

We are in the process of creating a new default theme for the VuePress 2, which will replace the old default theme, with the old theme being renamed to @vuepress/theme-legacy.

We will list the updated content in this issue, discussing the differences between old and new themes, compatibility solutions, and other updates related to vuepress upstream and downstream.

Features

The new theme will follow the same style as the default theme of VitePress.

Differences

Configuration

• SiteTtitle and logo: delete home / logo / logoDark / logoAlt, use siteTitle / logo / logoLink instead.

• Nav:

  • Change the type to NavItem[], children was deprecated, use items instead
  • delete repo, use socialLinks instead
  • delete colorMode / colorModeSwitch, use appearance instead
  • support local nav

• Sidebar:

  • rename options value auto to structure
  • children was deprecated, use items instead

• DocFooter: latestUpdated support lastUpdatedFormatOptions

• Code Block: Use shiki as the default highlighting. support line highlighting, colors diff errors and warning focus

• containers: support tip / info / warning / danger / important, and github alerts.

Frontmatter

• Replace layout with pageLayout in VitePress, as layout is already used for other purposes in VuePress.
• Now you can use the outline to control the display levels of the TOC within the page. etc. [2, 3]

Note

More content will continue to be added during the development period.

Suggested solution

Currently working on vuepress/ecosystem branch:theme-default .

Alternative

No response

Additional context

No response

[Mister-Hope]

the new theme should support https://theme-hope.vuejs.press/guide/layout/sidebar.html#generate-sidebar-from-file-structure

[pengzhanbo]

the new theme should support theme-hope.vuejs.press/guide/layout/sidebar.html#generate-sidebar-from-file-structure

Implemented in the new theme.

[Mister-Hope]

Q1

Why is some contents being removed in templateBuild, when darkmode is meant to be enabled, won't the screen flash?

[pengzhanbo]

Q1

Why is some contents being removed in templateBuild, when darkmode is meant to be enabled, won't the screen flash?

It does not flicker, when the appearance is set to force-dark, an inline script ;document.documentElement.classList.add('dark') will be inserted into the HTML;

for other values, it will be inserted differently：

;(() => {
  const preference = localStorage.getItem('vuepress-color-scheme') || fallbackPreference
  const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches
  if (!preference || preference === 'auto' ? prefersDark : preference === 'dark')
    document.documentElement.classList.add('dark')
})()

see node/config/resolvePageHead.ts

[Mister-Hope]

If the default theme is based on CSS, then we can try if we can use lightning CSS.

[pengzhanbo]

If the default theme is based on CSS, then we can try if we can use lightning CSS.

While I would like to use lightning CSS, it may cause issues if the theme's users are using other plugins that contain scss.

[github-actions]

This issue is marked as stale because it has not had recent activity. Issues marked with stale will be closed if they have no activity within 7 days.