[Feature request] Dynamically theme-color change with dark mode

[Unbinilium]

Feature request

Description

Since Apple introduced new Safari design in WWDC 2021, personally, I think that changing theme-color with dark mode dynamically would have a nicer look for upcoming Safari 15.x (maybe improve other browsers too). Or in another word the current theme-color is too bright for the dark mode, compared in the attached video.

Screen.Recording.2021-06-14.at.00.17.38.mov

Proposed Solution

Not experienced in Vue but I think something like this would did help:

// ToggleDarkButton.vue

…

const changeThemeColor = (): void => {
  const themeColorEl = window?.document.querySelector(
    'meta[name="theme-color"]'
  )

  themeColorEl?.setAttribute('content', !isDark.value ? '#3eaf7c' : '#22272e')
}

…

const setDark = (): void => {
  setDarkClass()
  changeThemeColor()
}

onMounted(() => {
  …

  watch(isDark, setDark, { immediate: true })
})

If it fine I could pull a request, thanks for reviewing.

[meteorlxy]

Sounds good to me.

The color should sync with css vars

[Unbinilium]

Sounds good to me.

The color should sync with css vars

PR in vuepress/core#218, but still some problem need help, see it in PR note.

[jrappen]

As a reference, this vuepress 1.x plugin might help:

https://github.com/tolking/vuepress-theme-default-prefers-color-scheme

[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.