Add: MWeb 主题区分 dark、light

Change-Id: I3021f4bd59109a577377d0075bb530354f9e2eac

scripts/compile.js

@@ -17,7 +17,7 @@ const sass = require("sass");
 const path = require("path");
 const minimist = require("minimist");
 const sassExtract = require("sass-extract");
-const themeConfig = require("../src/themes/config");
+const themeConfig = require("../src/themes/mweb-config");
 const { adjust } = require("./utils");
 const args = minimist(process.argv.slice(2), {
   string: ["file", "platform", "themeDir", "distDir"],
@@ -31,16 +31,18 @@ const args = minimist(process.argv.slice(2), {
 const platformConfig = {
   mweb: {
     filter: (filename) => /^mweb-/.test(filename), // 过滤需要编译的 scss 文件
-    namer: (filename) => `${path.parse(filename).name}.css`, // scss 编译后写入的文件名
-  },
-  typora: {
-    filter: (filename) => /^typora-/.test(filename),
-    namer: (filename) => `${path.parse(filename).name}.css`,
+    namer: (filename) => `${filename}.css`, // scss 编译后写入的文件名
+    writer: writerForMWeb
   },
   mweb4: {
     filter: (filename) => /^mweb-/.test(filename),
-    namer: (filename) => `${path.parse(filename).name}.mwebtheme`,
+    namer: (filename) => `${filename}.mwebtheme`,
     compiler: compilerForMWeb4,
+    writer: writerForMWeb
+  },
+  typora: {
+    filter: (filename) => /^typora-/.test(filename),
+    namer: (filename) => `${filename}.css`,
   },
 };
 
@@ -395,10 +397,28 @@ function compilerForMWeb4({ filePath }) {
 ${css}`;
 }
 
-function writeFile({ filePath, css }) {
+function write({ filePath, css }) {
+  fs.ensureDirSync(args.distDir);
   const { namer } = platformConfig[args.platform];
-  const filename = path.basename(filePath);
-  const outFile = `${args.distDir}/${namer(filename)}`;
+  const filename = path.basename(filePath); // with extension
+  const outFile = `${args.distDir}/${namer(path.parse(filename).name)}`;
+  fs.writeFile(outFile, css, (error) => {
+    if (error) {
+      console.log(`写入文件失败：${outFile}`, error);
+      process.exit(1);
+    } else console.log(`输出：${outFile}`);
+  });
+}
+
+function writerForMWeb({ filePath, css }) {
+  fs.ensureDirSync(args.distDir);
+  fs.ensureDirSync(args.distDir + '/dark');
+  fs.ensureDirSync(args.distDir + '/light');
+  const { namer } = platformConfig[args.platform];
+  const themeName = filePath.match(/mweb-(.*)\.scss$/)[1]; // eg: ayu, lark, etc.
+  const filename = filePath.match(/(mweb-.*)\.scss$/)[1];
+  const isDark = themeConfig[themeName].mode == "dark";
+  const outFile = `${args.distDir}/${isDark ? 'dark' : 'light'}/${namer(filename)}`;
   fs.writeFile(outFile, css, (error) => {
     if (error) {
       console.log(`写入文件失败：${outFile}`, error);
@@ -409,7 +429,6 @@ function writeFile({ filePath, css }) {
 
 function main() {
   fs.removeSync(args.distDir);
-  fs.ensureDirSync(args.distDir);
 
   const cfg = platformConfig[args.platform];
   const files = args.file
@@ -426,7 +445,9 @@ function main() {
       let css = cfg.compiler
         ? await cfg.compiler({ filePath })
         : await compile({ filePath });
-      writeFile({ filePath, css });
+        cfg.writer
+        ? await cfg.writer({ filePath, css })
+        : await write({ filePath, css });
     } catch (err) {
       console.log("sass 编译失败：", err);
       process.exit(1);

scripts/gallery/utils.js

@@ -13,7 +13,7 @@ const toRootPrefix = "../../";
 const fromRoot = (pathFromRoot) => toRootPrefix + pathFromRoot;
 const filePath = (file) => path.join(__dirname, `${file}`);
 
-const themes = require(fromRoot("src/themes/config"));
+const themes = require(fromRoot("src/themes/mweb-config.js"));
 
 const buildScss = async ({ distPath, minify }) => {
   fs.ensureDirSync(filePath(distPath + "/js"));

src/themes/config.js → src/themes/mweb-config.js

@@ -1,7 +1,8 @@
 /**
  * 每次新增一个 mweb 主题文件，都需要在这里新增一项，字段包括：
- * - file：文件名
- * - mode（可选）："dark"，是否是深色主题
+ * - file: 文件名
+ * - mode（可选）: "dark"，是否是深色主题
+ * - isMWeb4EditorThemeCompatible: 是否支持生成 MWeb 4.x 的编辑器主题，必须配置 sass 颜色变量才可以
  */
 
 const themes = {