Dark mode not working

[noraj]

Issue Checklist

• I am using the latest version of NexT.
• I have read the relevant documents of Hexo and NexT.
• I have reviewed the latest Roadmap on GitHub and searched for current issues, which does not help me.

---

Expected behavior

Darkmode working

Actual behavior

I have installed the last version of Next available via npm 8.7.0, installed a default website with hexo init, switeched to next theme, and just enabled dark mode but it's not working.

I have tried with all 4 schemes, disabled the next cache, ran hexo clean, emptied the browser cache, tried with both firefox and chromium, the website never get black.

It is reproducible 100% of the time with a minimal setup.

Steps to reproduce the behavior

1. hexo init darkmode_not_working && cd darkmode_not_working
2. npm install hexo-theme-next --save
3. cp node_modules/hexo-theme-next/_config.yml _config.next.yml
4. Switch to theme: next in _config.yml
5. Switch to darkmode: true in _config.next.yml
6. hexo g && hexo s

Environment Information

Node.js and NPM Information

$ node -v && npm -v                                                                                                                                                                                                                        
v16.6.1
7.20.3

Package dependencies Information

$ npm ls --depth 0                                                                                                                                                                                                                         
hexo-site@0.0.0 /home/noraj/Dev/the_forbidden_trove
├── hexo-generator-archive@1.0.0
├── hexo-generator-category@1.0.0
├── hexo-generator-index@2.0.0
├── hexo-generator-tag@1.0.0
├── hexo-renderer-ejs@1.0.0
├── hexo-renderer-marked@4.0.0
├── hexo-renderer-stylus@2.0.1
├── hexo-server@2.0.0
├── hexo-theme-landscape@0.0.3 extraneous
├── hexo-theme-next@8.7.0
└── hexo@5.4.0

Hexo Configuration

The default, just changed theme: next.

# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# Site
title: Hexo
subtitle: ''
description: ''
keywords:
author: John Doe
language: en
timezone: ''

# URL
## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'
url: http://example.com
permalink: :year/:month/:day/:title/
permalink_defaults:
pretty_urls:
  trailing_index: true # Set to false to remove trailing 'index.html' from permalinks
  trailing_html: true # Set to false to remove trailing '.html' from permalinks

# Directory
source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang
skip_render:

# Writing
new_post_name: :title.md # File name of new posts
default_layout: post
titlecase: false # Transform title into titlecase
external_link:
  enable: true # Open external links in new tab
  field: site # Apply to the whole site
  exclude: ''
filename_case: 0
render_drafts: false
post_asset_folder: false
relative_link: false
future: true
highlight:
  enable: true
  line_number: true
  auto_detect: false
  tab_replace: ''
  wrap: true
  hljs: false
prismjs:
  enable: false
  preprocess: true
  line_number: true
  tab_replace: ''

# Home page setting
# path: Root path for your blogs index page. (default = '')
# per_page: Posts displayed per page. (0 = disable pagination)
# order_by: Posts order. (Order by date descending by default)
index_generator:
  path: ''
  per_page: 10
  order_by: -date

# Category & Tag
default_category: uncategorized
category_map:
tag_map:

# Metadata elements
## https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta
meta_generator: true

# Date / Time format
## Hexo uses Moment.js to parse and display date
## You can customize the date format as defined in
## http://momentjs.com/docs/#/displaying/format/
date_format: YYYY-MM-DD
time_format: HH:mm:ss
## updated_option supports 'mtime', 'date', 'empty'
updated_option: 'mtime'

# Pagination
## Set per_page to 0 to disable pagination
per_page: 10
pagination_dir: page

# Include / Exclude file(s)
## include:/exclude: options only apply to the 'source/' folder
include:
exclude:
ignore:

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next

# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: ''

NexT Configuration

cache:
  enable: false

darkmode: true

Other Information

• Firefox 90.0.2
• Chromium 92.0.4515.131

[welcome]

Thanks for opening this issue, maintainers will get back to you as soon as possible!

[noraj]

PS: Yes I have read https://theme-next.js.org/docs/theme-settings/#Dark-Mode, #1602, #1599

NexT

Theme Settings

NexT User Docs – Theme Settings

[noraj]

In thought of an inheritance issue but setting it in theme_config or the site config doesn't solve the problem.

theme_config:
  darkmode: true

Even forcing teh value in node_modules/hexo-theme-next/_config.yml doesn't change it.

[noraj]

While served with hexo server or python -m http.server or ruby -run -ehttpd (webrick) the dark mode is not working, but surprisingly, in while served by Gitlab Pages after being generated by Gitlab CI the dark mode works.

My gitlab-ci config:

# Official framework image. Look for the different tagged releases at:
# https://hub.docker.com/r/library/node/tags/
# https://nodejs.org/en/download/releases/
image: node:15

stages:
  - deploy

# This folder is cached between builds
# http://docs.gitlab.com/ce/ci/yaml/README.html#cache
cache:
  paths:
  - node_modules/

before_script:
  - npm --version
  - node --version
  - npm install hexo-cli -g
  - npm install

pages:
  stage: deploy
  script:
    - hexo generate
  artifacts:
    paths:
      - public
  only:
    - master

CI env

$ npm --version
7.7.6
$ node --version
v15.14.0

[elkan1788]

I were meeted the same issue that when darkmode parameter setting true not work . And then found other site dark style design were used the html DOM with attribute data-theme and set it in CSS file theme work more powerful. See the below example:

• main.css

[data-theme=dark] body {
    background: #282828;
  }

• index.html

<html lang="en" data-theme="dark">
....
</html>

So that suggest use this way to instead of the @media(prefers-color-scheme: dark) which more better compatibility.