port theme.*.styl to color-definations.scss

Author: Lhcfl

_config.example.yml

@@ -3,7 +3,7 @@
 keywords: Blog,博客,Hexo
 author: Yourname
 description: A simple and beautiful blog
-defaultTheme: light-mode # light-mode or dark-mode
+defaultTheme: light-mode # light-mode or dark-mode or default
 
 # icon
 # If the is size is incorrect, please edit /source/css/style.styl

layout/partial/head.pug

@@ -18,13 +18,11 @@ meta(content="black", name="apple-mobile-web-app-status-bar-style")
 meta(content="telephone=no", name="format-detection")
 
 meta#site_data_static(data-url=url_for("/"))
-meta#default-theme(data=theme.defaultTheme == "dark-mode" ? "dark" : "light")
 
 meta(name="renderer", content="webkit")
 link(rel="shortcut icon", type="image/x-icon", href=url_for(theme.favicon))
 
 link(rel="stylesheet", href=url_for("js_complied/bundle.css"))
-link(rel="stylesheet", href=url_for("css/theme/" + (theme.defaultTheme == "dark-mode" ? "dark" : "light") + ".css"))
 link(rel="stylesheet", href=url_for("css/style.css"))
 link(rel="stylesheet", href=url_for("css/font-awesome.min.css"))
 link(rel="alternate", type="application/atom+xml", title="ATOM 1.0", href="/atom.xml")

layout/partial/layout.pug

@@ -1,5 +1,5 @@
 doctype
-html(lang="zh-CN")
+html(lang="zh-CN", theme=theme.defaultTheme)
   head
     include head
 

source/css/theme/base.styl

@@ -1,39 +1,25 @@
-import { SiteStatic } from './site-static';
-
-function loadStyles(url: string) {
-  var link = document.createElement('link');
-  link.id = 'themecss';
-  link.rel = 'stylesheet';
-  link.type = 'text/css';
-  link.href = url;
-  var head = document.getElementsByTagName('head')[0];
-  head.appendChild(link);
-}
-
-function getDefaultTheme() {
-  return document.getElementById('default-theme')?.getAttribute('data');
+function getTheme() {
+  return document.querySelector('html')!.getAttribute('theme') ?? 'default';
 }
 
 function setTheme() {
-  if (document.getElementById('themecss')) {
-    document.getElementById('themecss')?.remove();
-  }
-  if (localStorage['themeChanged'] && getDefaultTheme() == 'light') {
-    loadStyles(SiteStatic.url_for('css/theme/dark.css'));
-  } else if (localStorage['themeChanged'] && getDefaultTheme() == 'dark') {
-    loadStyles(SiteStatic.url_for('css/theme/light.css'));
-  } else {
-    loadStyles(SiteStatic.url_for(`css/theme/${getDefaultTheme()}.css`));
+  const theme = localStorage.getItem('theme');
+  if (theme) {
+    document.querySelector('html')!.setAttribute('theme', theme);
   }
 }
 
 setTheme();
 
 export function darkLightToggle() {
-  if (!localStorage['themeChanged']) {
-    localStorage.setItem('themeChanged', 'true');
+  let themeNow = getTheme();
+  if (themeNow === 'default') {
+    themeNow = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'true';
+  }
+  if (themeNow === 'dark') {
+    localStorage.setItem('theme', 'light');
   } else {
-    localStorage.removeItem('themeChanged');
+    localStorage.setItem('theme', 'dark');
   }
   setTheme();
 }

source/css/theme/dark.styl

@@ -1,3 +1,4 @@
+import './scss/color-defination.scss';
 import './scss/blog_basic.scss';
 import './scss/highlight.scss';
 import './scss/style.scss';

source/css/theme/light.styl

@@ -0,0 +1,48 @@
+@mixin percentageColor($name, $c1, $c2) {
+  @for $i from 1 to 20 {
+    #{--#{$name}-#{$i*50}}: mix($c1, $c2, $i * 5%);
+  }
+}
+
+@mixin genColor($name, $c1, $c2) {
+  #{--#{$name}-rgb}: join($c1, (), comma);
+  #{--#{$name}}: rgb($c1);
+  @include percentageColor($name, rgb($c1), rgb($c2));
+
+  #{--#{$name}-high}: mix(rgb($c1), rgb($c2), 90%);
+  #{--#{$name}-midium}: mix(rgb($c1), rgb($c2), 70%);
+  #{--#{$name}-low-mid}: mix(rgb($c1), rgb($c2), 50%);
+  #{--#{$name}-low}: mix(rgb($c1), rgb($c2), 20%);
+  #{--#{$name}-very-low}: mix(rgb($c1), rgb($c2), 0.05%);
+}
+
+@mixin darkTheme() {
+  $primary: 255 255 255;
+  $secondary: 40 40 40;
+  @include genColor('primary', $primary, $secondary);
+  @include genColor('secondary', $secondary, $primary);
+}
+
+@mixin lightTheme() {
+  $primary: 22 22 22;
+  $secondary: 255 255 255;
+  @include genColor('primary', $primary, $secondary);
+  @include genColor('secondary', $secondary, $primary);
+}
+
+html[theme='dark'] {
+  @include darkTheme();
+}
+
+html[theme='light'] {
+  @include lightTheme();
+}
+
+html[theme='default'] {
+  @include lightTheme();
+}
+@media (prefers-color-scheme: dark) {
+  html[theme='default'] {
+    @include darkTheme();
+  }
+}