style: optimize CSS directory structure

source/css/common/codeblock/code-theme.styl

@@ -1,3 +1,5 @@
+@import "../variables.styl"
+
 $code-foreground = lighten($default-text-color, 2%)
 $code-background = darken($background-color, 5%)
 $highlight-foreground = lighten($default-text-color, 2%)
@@ -32,37 +34,29 @@ $night-highlight-purple = #b294bb
 $night-highlight-deletion = #008000
 $night-highlight-addition = #800000
 
+code-theme(mode) {
+  --code-foreground: mode == 'light' ? $code-foreground : $night-code-foreground;
+  --code-background: mode == 'light' ? $code-background : $night-code-background;
+  --highlight-background: mode == 'light' ? $highlight-background : $night-highlight-background;
+  --highlight-foreground: mode == 'light' ? $highlight-foreground : $night-highlight-foreground;
+  --highlight-comment: mode == 'light' ? $highlight-comment : $night-highlight-comment;
+  --highlight-red: mode == 'light' ? $highlight-red : $night-highlight-red;
+  --highlight-orange: mode == 'light' ? $highlight-orange : $night-highlight-orange;
+  --highlight-yellow: mode == 'light' ? $highlight-yellow : $night-highlight-yellow;
+  --highlight-green: mode == 'light' ? $highlight-green : $night-highlight-green;
+  --highlight-aqua: mode == 'light' ? $highlight-aqua : $night-highlight-aqua;
+  --highlight-blue: mode == 'light' ? $highlight-blue : $night-highlight-blue;
+  --highlight-purple: mode == 'light' ? $highlight-purple : $night-highlight-purple;
+  --highlight-gutter-color: mode == 'light' ? $highlight-gutter-color : $night-highlight-gutter-color;
+  --highlight-gutter-bg-color: mode == 'light' ? $highlight-gutter-bg-color : $night-highlight-gutter-bg-color;
+}
+
+
 .normal-code-theme {
-  --code-foreground: $code-foreground;
+  code-theme('light');
-  --code-background: $code-background;
-  --highlight-background: $highlight-background;
-  --highlight-foreground: $highlight-foreground;
-  --highlight-comment: $highlight-comment;
-  --highlight-red: $highlight-red;
-  --highlight-orange: $highlight-orange;
-  --highlight-yellow: $highlight-yellow;
-  --highlight-green: $highlight-green;
-  --highlight-aqua: $highlight-aqua;
-  --highlight-blue: $highlight-blue;
-  --highlight-purple: $highlight-purple;
-  --highlight-gutter-color: $highlight-gutter-color;
-  --highlight-gutter-bg-color: $highlight-gutter-bg-color;
 }
 
 
 .night-code-theme {
-  --code-foreground: $night-code-foreground;
+  code-theme('dark');
-  --code-background: $night-code-background;
-  --highlight-background: $night-highlight-background;
-  --highlight-foreground: $night-highlight-foreground;
-  --highlight-comment: $night-highlight-comment;
-  --highlight-red: $night-highlight-red;
-  --highlight-orange: $night-highlight-orange;
-  --highlight-yellow: $night-highlight-yellow;
-  --highlight-green: $night-highlight-green;
-  --highlight-aqua: $night-highlight-aqua;
-  --highlight-blue: $night-highlight-blue;
-  --highlight-purple: $night-highlight-purple;
-  --highlight-gutter-color: $night-highlight-gutter-color;
-  --highlight-gutter-bg-color: $night-highlight-gutter-bg-color;
 }

source/css/common/variables.styl

@@ -1,10 +1,11 @@
-// ========================================================================
+// ========================================================================================
-//                              THEME VARIABLE                           //
+//                                   KEEP THEME VARIABLE                                 //
-// ========================================================================
+// ========================================================================================
 
-// ========================================================================
+
+// ========================================================================================
 // layout
-// ========================================================================
+// ========================================================================================
 $header-height = 76px;                                          // 头部默认高度
 $header-shrink-height = $header-height * 0.72;                  // 头部收缩高度
 $header-progress-height = 2.8px;                                // 头部进度条高度
@@ -18,9 +19,9 @@ $temp-content-max-width = hexo-config('style.content_max_width');
 $content-max-width = $temp-content-max-width ? convert($temp-content-max-width) : 1000px;
 
 
-// ========================================================================
+// ========================================================================================
 // 媒体查询
-// ========================================================================
+// ========================================================================================
 $media-max-width = 780px;                       // 媒体查询最大宽度 (平板)
 $media-max-width-mobile = 500px;                // 媒体查询最大宽度（手机）
 
@@ -33,9 +34,9 @@ keep-mobile()
     {block}
 
 
-// ========================================================================
+// ========================================================================================
 // z-index
-// ========================================================================
+// ========================================================================================
 $z-index-1 = 1001;
 $z-index-2 = 1002;
 $z-index-3 = 1003;
@@ -47,15 +48,17 @@ $z-index-8 = 1008;
 $z-index-9 = 1009;
 
 
-// ========================================================================
+// ========================================================================================
 // color
-// ========================================================================
+// ========================================================================================
 // primary color
 $temp-color = hexo-config('style.primary_color');
 $primary-color = $temp-color ? convert($temp-color) : #0066CC;
 
 
-// ====================== light mode color ======================
+// ========================================================================================
+// light mode color
+// ========================================================================================
 $background-color = #fff;
 $second-background-color = darken($background-color, 3%);
 $default-text-color = #505050;
@@ -73,7 +76,10 @@ $link-color = darken($default-text-color, 10%);
 $copyright-info-color = #CC0033;
 $avatar-background-color = #0066CC;
 
-// ====================== dark mode color ======================
+
+// ========================================================================================
+// dark mode color
+// ========================================================================================
 $dark-primary-color = $primary-color;
 $dark-background-color = #363636;
 $dark-second-background-color = darken($dark-background-color, 10%);
@@ -92,6 +98,7 @@ $dark-link-color = lighten($dark-default-text-color, 10%);
 $dark-copyright-info-color = darken($copyright-info-color, 20%);
 $dark-avatar-background-color = darken($avatar-background-color, 20%);
 
+
 // ========================================================================
 // font
 // ========================================================================

source/css/style.styl

@@ -1,4 +1,7 @@
-@import "layout/common/basic.styl"
+@import "common/basic.styl"
+@import "common/markdown.styl"
+@import "common/codeblock/highlight.styl"
+@import "common/codeblock/copy-code.styl"
 @import "layout/page.styl"
 @import "layout/_partial/local-search.styl"
 @import "layout/_partial/toc.styl"
@@ -20,7 +23,4 @@
 @import "layout/article-content.styl"
 @import "layout/category-content.styl"
 @import "layout/tag-content.styl"
-@import "layout/common/markdown.styl"
-@import "layout/common/codeblock/highlight.styl"
-@import "layout/common/codeblock/copy-code.styl"
 @import "layout/_partial/tagcloud.styl"