Wrong background color for selected text

[dokurorz]

Issue Checklist

• [x] I am using NexT version 8.0 or later.
• [X] I have already read the Troubleshooting page of Hexo and Troubleshooting page of NexT.
• [X] I have already searched for current issues, which does not help me.

Expected behavior

By modifying /source/css/_variables/base.styl, the blue color looks reasonable.

Actual behavior

The default selection-bg is blue-deep #262a30, but it is indistinguishable in dark-theme code blocks.

Steps to reproduce the behavior

none

Node.js and NPM Information

v16.20.2
8.19.4

Package dependencies Information

├── hexo-deployer-sftp@0.4.1
├── hexo-generator-archive@2.0.0
├── hexo-generator-category@2.0.0
├── hexo-generator-index@3.0.0
├── hexo-generator-tag@2.0.0
├── hexo-renderer-ejs@2.0.0
├── hexo-renderer-marked@6.2.0
├── hexo-renderer-stylus@3.0.1
├── hexo-server@3.0.0
├── hexo-theme-landscape@1.0.0
└── hexo@7.1.1

Hexo Configuration

syntax_highlighter: highlight.js
highlight:
  line_number: true
  auto_detect: false
  tab_replace: ''
  wrap: true
  hljs: false

NexT Configuration

codeblock:
  theme:
    light: a11y-dark
    dark: a11y-dark

Other Information

Changing the color of selection-bg is simple, but replacing the default color with a color of better contrast would be more user-friendly.

[welcome[bot]]

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

[shenbo]

Same. In the source code ('\hexo-source\node_modules\hexo-theme-next\source\css_variables\base.styl'), the default $selection-bg is defined as $blue-deep, #262a30;

$blue-deep          = #262a30;
$selection-bg       = $blue-deep;

it's hard to indistinguish in dark-theme.

---

my solution: redefine the $selection-bg variable.

1. in the next theme config file: _config.next.yml, add:

custom_file_path:
  variable: variables.styl

2. creat variables.styl file in the blog root folder, add:

$selection-bg = #0066ff

3. hexo clean and hexo g