feat(style): make theme variant configurable

include/hexo/filter/stylus.js

@@ -0,0 +1,13 @@
+/**
+ * Add resolved variables to the theme config for stylus.
+ */
+module.exports = function (hexo) {
+    hexo.extend.filter.register('template_locals', locals => {
+        const fontcdn = hexo.extend.helper.get('fontcdn').bind(hexo);
+        hexo.theme.config['@fontface'] = {
+            default: fontcdn('Ubuntu:wght@400;600&family=Source+Code+Pro', 'css2'),
+            cyberpunk: fontcdn('Oxanium:wght@300;400;600&family=Roboto+Mono', 'css2')
+        };
+        return locals;
+    });
+};

include/register.js

@@ -3,6 +3,7 @@ const logger = require('hexo-log')();
 module.exports = hexo => {
     logger.info('=== Registering Hexo extensions ===');
     require('hexo-component-inferno/lib/hexo/filter/locals')(hexo);
+    require('./hexo/filter/stylus')(hexo);
     require('./hexo/generator/category')(hexo);
     require('./hexo/generator/insight')(hexo);
     require('hexo-component-inferno/lib/hexo/generator/categories')(hexo);

include/schema/config.json

@@ -9,6 +9,15 @@
             "description": "Version of the configuration file",
             "default": "3.0.0"
         },
+        "variant": {
+            "type": "string",
+            "description": "Icarus theme variant, can be \"default\" or \"cyberpunk\"",
+            "enum": [
+                "default",
+                "cyberpunk"
+            ],
+            "default": "default"
+        },
         "logo": {
             "type": [
                 "string",

layout/common/head.jsx

@@ -30,13 +30,14 @@ function getPageTitle(page, siteTitle, helper) {
 module.exports = class extends Component {
     render() {
         const { env, site, config, helper, page } = this.props;
-        const { url_for, cdn, iconcdn, fontcdn, is_post } = helper;
+        const { url_for, cdn, iconcdn, is_post } = helper;
         const {
             url,
             meta_generator = true,
             head = {},
             article,
-            highlight
+            highlight,
+            variant = 'default'
         } = config;
         const {
             meta = [],
@@ -137,10 +138,9 @@ module.exports = class extends Component {
             {rss ? <link rel="alternative" href={url_for(rss)} title={config.title} type="application/atom+xml" /> : null}
             {favicon ? <link rel="icon" href={url_for(favicon)} /> : null}
             <link rel="stylesheet" href={iconcdn()} />
-            <link rel="stylesheet" href={fontcdn('Ubuntu:400,600|Source+Code+Pro')} />
             {hlTheme ? <link rel="stylesheet" href={cdn('highlight.js', '9.12.0', 'styles/' + hlTheme + '.css')} /> : null}
+            <link rel="stylesheet" href={url_for('/css/' + variant + '.css')} />
             <Plugins site={site} config={config} helper={helper} page={page} head={true} />
-            <link rel="stylesheet" href={url_for('/css/style.css')} />
 
             {adsenseClientId ? <script data-ad-client={adsenseClientId}
                 src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js" async={true}></script> : null}

layout/plugin/back_to_top.jsx

@@ -22,7 +22,7 @@ BackToTop.Cacheable = cacheComponent(BackToTop, 'plugin.backtotop', props => {
     }
     return {
         title: helper.__('plugin.backtotop'),
-        jsUrl: helper.url_for('/js/back-to-top.js')
+        jsUrl: helper.url_for('/js/back_to_top.js')
     };
 });
 

source/css/cyberpunk.styl

@@ -1,6 +1,7 @@
-@import url('https://fonts.googleapis.com/css2?family=Oxanium:wght@300;400;600&display=swap')
+@import url(hexo-config('@fontface.cyberpunk'))
 
 $family-sans-serif ?= 'Oxanium', Ubuntu, Roboto, 'Open Sans', 'Microsoft YaHei', sans-serif
+$family-code ?= 'Roboto Mono', monospace, 'Microsoft YaHei'
 // shadow and radius
 $shadow ?= none
 $radius ?= 0

source/css/default.styl

@@ -0,0 +1,3 @@
+@import url(hexo-config('@fontface.default'))
+
+@import 'style'