add multi-color scheme support

[jiangtj]

Please follow this Issue template to provide relevant information, such as source code repository, website URL and screenshots, which will help us investigate. 请按照此 Issue 模版提供相关信息，例如源码仓库、网站链接和屏幕截图，这将有助于我们进行调查。

Issue Checklist

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

---

Expected behavior

I found out that GitHub changed its darkmode scheme. It can choose two colors to be switched automatically by the system, or select a single color scheme. So we can refer to it to improve our theme.

Single theme

Sync with system

For our theme style, it is easy to implement, since mimi extracted the colors

for example blue.styl

@import 'light';
// custom color ...
:root {
  --text-color: blue;
}

But for some third-party plug-ins, we need to consider how to integrate. :expressionless:

for example

[liushulun]

Expect for that too!

Theme can only be switched by OS or browser for now. Add [Prefer theme] to force only one theme will be really helpful to me 🙏

[sghuang19]

Expect for that too!

Theme can only be switched by OS or browser for now. Add [Prefer theme] to force only one theme will be really helpful to me 🙏

This is going to be quite useful, a really valid use case.

[sghuang19]

@stevenjoezhang Our current way of doing dark mode is quite inconsistent and incomplete. What do you think?

Ideally color variables should be defined at the top level Stylus file. But in some places this is done at a class/component level.

Once we figured out a way to centralize that, the rest should be easy.

But for now @jiangtj you would have to carefully pick a file that looks ok on both bright and dark mode, sry for that 😢