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

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

Open Unbinilium opened this issue 3 years ago • 3 comments

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.

https://user-images.githubusercontent.com/15633984/121815457-412dec00-cca9-11eb-8458-fede21b65966.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.