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.

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

Automatic enabling of dark mode #40

Closed
jforce opened this issue May 20, 2020 · 4 comments
Closed

Automatic enabling of dark mode #40

jforce opened this issue May 20, 2020 · 4 comments

Comments

@jforce
Copy link

jforce commented May 20, 2020

Describe the bug
The instructions on the Wiki for automatically enabling dark mode don't seem to work wiki link

To Reproduce
Always reproducible

Expected behavior
The file journey.js to exist.
I've found the same section in journal.html however amending this doesn't seem to have any effect.

        // From https://www.jdeal.cn/archives/Dark.html
        var night = document.cookie.replace(/(?:(?:^|.*;\s*)night\s*\=\s*([^;]*).*$)|^.*$/, "$1");
        if (night==""){
            if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
                this.toggleDarkMode();
            }
        }else{
            // If night is not empty
            if (night=="1") {
                this.toggleDarkMode();
            }
        }

Environment
Hugo Static Site Generator v0.67.1 linux/amd64 BuildDate: 2020-03-16T08:10:43Z

Additional context
It would be great to have this as a parameter in the toml configuration. Let me know if you need anything else.

@jforce jforce changed the title Automatic enabling of Dark Mode Automatic enabling of dark mode May 20, 2020
@AmazingRise
Copy link
Owner

AmazingRise commented May 20, 2020

Hi, thanks for your feedback.
But it works well for me here.
To validate that, I've added several console.log, like this:

// From https://www.jdeal.cn/archives/Dark.html
        var night = document.cookie.replace(/(?:(?:^|.*;\s*)night\s*\=\s*([^;]*).*$)|^.*$/, "$1");
        if (night==""){
            console.log("No cookies detected.");
            if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
                console.log("Dark mode enabled by default.");
                this.toggleDarkMode();
            }
        }else{
            // If night is not empty
            if (night=="1") {
                this.toggleDarkMode();
            }
        }

When I switched my browser to dark mode, it was changed as excepted, both in Firefox and Chromium.
图片

As for wiki, thanks for your advice, I will update soon.
And I will also consider making it a variable.

@jforce
Copy link
Author

jforce commented May 20, 2020

Thanks Rise, just given your new update a go and working perfectly

@AmazingRise
Copy link
Owner

OK. If you have any further questions, please feedback. Thanks.

@Darthagnon
Copy link
Contributor

Is there a way to always enable Dark Mode by default irrespective of browser-mode? Or am I misunderstanding what auto dark mode does? I've tried setting the param, but the site still initialises in light mode (I think my browser might be "light mode" with a dark theme).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants