Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

support defaultDarkMode #796

Closed
xiaoyunwu opened this issue Apr 5, 2022 · 13 comments
Closed

support defaultDarkMode #796

xiaoyunwu opened this issue Apr 5, 2022 · 13 comments
Labels
enhancement New feature or request package:theme-default

Comments

@xiaoyunwu
Copy link

Feature request

Right now, the default-them use the prefers-color-scheme via const darkStorage = useStorage('vuepress-color-scheme', 'auto'), so builder does not have explicit control on the default darkMode.

Description

support defaultMarkMode which should be auto, light or dark. Where auto is defined by perfers-color-scheme.

Proposed Solution

There should be a configuration defaultDarkMode so that builder can specify in the config.ts.
@Mister-Hope
Copy link
Member

Mister-Hope commented Apr 5, 2022 •
edited

1, 'auto' do fit most situations (you are talking about edge case)
2. You should be able to achieve this by overide templateBuild option. Simply add an extra script to add the value you want if not exist (you have workaround)

@Mister-Hope Mister-Hope added the wontfix This will not be worked on label Apr 5, 2022
@xiaoyunwu
Copy link
Author

xiaoyunwu commented Apr 5, 2022 via email

@Mister-Hope
Copy link
Member

https://v2.vuepress.vuejs.org/reference/theme-api.html#templatebuild

@xiaoyunwu
Copy link
Author

xiaoyunwu commented Apr 5, 2022 via email

@Mister-Hope
Copy link
Member

Mister-Hope commented Apr 5, 2022 •
edited

We are not expecting to teach you everything. And the docs should be clear enough: Specify the HTML template for build. could be overridden by user config.

@Mister-Hope
Copy link
Member

Mister-Hope commented Apr 5, 2022 •
edited 

<!DOCTYPE html>
<html lang="{{ lang }}">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="generator" content="VuePress {{ version }}">
    <style>
      :root {
        --c-bg: #fff;
      }
      html.dark {
        --c-bg: #22272e;
      }
      html, body {
        background-color: var(--c-bg);
      }
    </style>
    <script>
      const userMode = localStorage.getItem('vuepress-color-scheme');
      if(!userMode) localStorage.setItem('vuepress-color-scheme', 'xxx'); // xxx is the one you like
			const systemDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
			if (userMode === 'dark' || (userMode !== 'light' && systemDarkMode)) {
				document.documentElement.classList.toggle('dark', true);
			}
    </script>
    <!--vuepress-ssr-head-->
    <!--vuepress-ssr-resources-->
    <!--vuepress-ssr-styles-->
  </head>
  <body>
    <div id="app"><!--vuepress-ssr-app--></div>
    <!--vuepress-ssr-scripts-->
  </body>
</html>

Slightly edited from the orignal @vuepress/theme-default template with only 1 new line.

@Mister-Hope
Copy link
Member

Place the above template somewhere in your project, and add templateBuild option in your user config file, and setting its value to be the path of the file above

@Mister-Hope
Copy link
Member

Mister-Hope commented Apr 5, 2022 •
edited

the doc on template build does not have information on how to use it even
for other things. How do we know how to use it?

Unless the docs is totally missing description or there are missing apis, this kind of problems should be regarded on your side. Even tools like vue and react are not providing demos for every apis.

If you read through the whole docs, understanding that api should not be hard, but it does if you just see the option description, and that't not our problem.

We would like to give some simple hints on how you can achieve something, but we do not have reposonability impletement that for you just because you can not understand how to achieve that.

Just as a reminder, this is an open source project, which means we can ( and I will) ignore some personal cutomize help.

@Mister-Hope
Copy link
Member

Also, if the above way is hacky for you, https://v2.vuepress.vuejs.org/reference/default-theme/extending.html can be another way.

@xiaoyunwu
Copy link
Author

xiaoyunwu commented Apr 5, 2022 via email

@Mister-Hope
Copy link
Member

Mister-Hope commented Apr 6, 2022 •
edited

You may overide the darkmode toggle button using alias or theme extending, and setting a new default value, the understanding above is incorrrect.

For details you may check the hint in my theme here:

Defaul theme could be similar.

@xiaoyunwu
Copy link
Author

xiaoyunwu commented Apr 6, 2022 via email

@bulletmark
Copy link

I agree with the OP @xiaoyunwu here. I am new to vuepress and find it is odd that there is no config option to default the theme to dark. The templateBuild approach shown here is way too complicated and cumbersome.

@meteorlxy meteorlxy added enhancement New feature or request package:theme-default and removed wontfix This will not be worked on labels Jun 9, 2022
@meteorlxy meteorlxy reopened this Jun 9, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
enhancement New feature or request package:theme-default
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@bulletmark @xiaoyunwu @meteorlxy @Mister-Hope