create-rezor 0.0.0 → 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026-present Yang Mingshan
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,25 @@
+# create-rezor
+
+创建 Rezor 小程序项目的最佳方案。
+
+## 使用
+
+要使用 `create-rezor` 创建一个全新的 Rezor 小程序项目，请直接在终端内运行以下命令：
+
+```bash
+npm create rezor@latest
+```
+
+<!-- prettier-ignore -->
+> [!NOTE]
+> `@latest` **不能**省略，否则 `npm` 可能会使用已缓存的旧版本。
+
+## 致谢
+
+此项目由 [create-vue](https://github.com/vuejs/create-vue) 修改而来。
+
+## 许可证
+
+[MIT](https://opensource.org/licenses/MIT)
+
+Copyright (c) 2026-present Yang Mingshan

package/outfile.js

@@ -0,0 +1,368 @@
+#!/usr/bin/env node
+/* eslint-disable @typescript-eslint/no-unsafe-member-access */
+/* eslint-disable @typescript-eslint/no-unsafe-assignment */
+import fs from 'node:fs';
+import path from 'node:path';
+import process from 'node:process';
+import { fileURLToPath } from 'node:url';
+import ejs from 'ejs';
+import prompts from 'prompts';
+import { red, green, bold } from 'kolorist';
+const defaultBanner = 'Rezor - 拥有原生性能的 React 小程序框架';
+// Generated by the following code:
+//
+// require('gradient-string')([
+//   { color: '#f472b6', pos: 0 },
+//   { color: '#f472b6', pos: 0.1 },
+//   { color: '#818cf8', pos: 1 }
+// ])('Rezor - 拥有原生性能的 React 小程序框架')
+//
+// Use the output directly here to keep the bundle small.
+const gradientBanner = '\u001b[38;2;244;114;182mR\u001b[39m\u001b[38;2;244;114;182me\u001b[39m\u001b[38;2;244;114;182mz\u001b[39m\u001b[38;2;238;115;185mo\u001b[39m\u001b[38;2;233;117;189mr\u001b[39m \u001b[38;2;227;118;192m-\u001b[39m \u001b[38;2;221;119;195m拥\u001b[39m\u001b[38;2;215;121;199m有\u001b[39m\u001b[38;2;210;122;202m原\u001b[39m\u001b[38;2;204;123;205m生\u001b[39m\u001b[38;2;198;124;208m性\u001b[39m\u001b[38;2;192;126;212m能\u001b[39m\u001b[38;2;187;127;215m的\u001b[39m \u001b[38;2;181;128;218mR\u001b[39m\u001b[38;2;175;130;222me\u001b[39m\u001b[38;2;169;131;225ma\u001b[39m\u001b[38;2;164;132;228mc\u001b[39m\u001b[38;2;158;134;232mt\u001b[39m \u001b[38;2;152;135;235m小\u001b[39m\u001b[38;2;146;136;238m程\u001b[39m\u001b[38;2;141;137;241m序\u001b[39m\u001b[38;2;135;139;245m框\u001b[39m\u001b[38;2;129;140;248m架\u001b[39m';
+function postOrderDirectoryTraverse(dir, dirCallback, fileCallback) {
+    for (const filename of fs.readdirSync(dir)) {
+        if (filename === '.git') {
+            continue;
+        }
+        const fullpath = path.resolve(dir, filename);
+        if (fs.lstatSync(fullpath).isDirectory()) {
+            postOrderDirectoryTraverse(fullpath, dirCallback, fileCallback);
+            dirCallback(fullpath);
+            continue;
+        }
+        fileCallback(fullpath);
+    }
+}
+function isValidPackageName(projectName) {
+    return /^(?:@[a-z\d-*~][a-z\d-*._~]*\/)?[a-z\d-~][a-z\d-._~]*$/.test(projectName);
+}
+function toValidPackageName(projectName) {
+    return projectName
+        .trim()
+        .toLowerCase()
+        .replaceAll(/\s+/g, '-')
+        .replace(/^[._]/, '')
+        .replaceAll(/[^a-z\d-~]+/g, '-');
+}
+function canSkipEmptying(dir) {
+    if (!fs.existsSync(dir)) {
+        return true;
+    }
+    const files = fs.readdirSync(dir);
+    if (files.length === 0) {
+        return true;
+    }
+    if (files.length === 1 && files[0] === '.git') {
+        return true;
+    }
+    return false;
+}
+function emptyDir(dir) {
+    if (!fs.existsSync(dir)) {
+        return;
+    }
+    postOrderDirectoryTraverse(dir, (dir) => {
+        fs.rmdirSync(dir);
+    }, (file) => {
+        fs.unlinkSync(file);
+    });
+}
+function renderTemplate(src, dest, result) {
+    const stats = fs.statSync(src);
+    if (stats.isDirectory()) {
+        // If it's a directory, render its subdirectories and files recursively
+        fs.mkdirSync(dest, { recursive: true });
+        for (const file of fs.readdirSync(src)) {
+            renderTemplate(path.resolve(src, file), path.resolve(dest, /^_[a-z]/.test(file) ? file.replace('_', '.') : file), result);
+        }
+        return;
+    }
+    const filename = path.basename(src);
+    if (filename.endsWith('.ejs')) {
+        const template = fs.readFileSync(src, 'utf8');
+        let content = ejs.render(template, result);
+        if (filename === 'package.json.ejs') {
+            content = content.replaceAll(',\n    trailing-comma', '');
+        }
+        fs.writeFileSync(dest.replace(/\.ejs$/, ''), content);
+        return;
+    }
+    if (filename === 'project.config.json') {
+        const project = JSON.parse(fs.readFileSync(src, 'utf8'));
+        project.projectname = result.packageName;
+        fs.writeFileSync(dest, JSON.stringify(project, null, 2) + '\n');
+        return;
+    }
+    if (filename === 'app.json') {
+        const app = JSON.parse(fs.readFileSync(src, 'utf8'));
+        app.window.navigationBarTitleText = result.packageName;
+        fs.writeFileSync(dest, JSON.stringify(app, null, 2) + '\n');
+        return;
+    }
+    fs.copyFileSync(src, dest);
+}
+function getCommand(packageManager, scriptName) {
+    if (scriptName === 'install') {
+        return packageManager === 'yarn' ? 'yarn' : `${packageManager} install`;
+    }
+    return ['npm', 'bun'].includes(packageManager) ?
+        `${packageManager} run ${scriptName}`
+        : `${packageManager} ${scriptName}`;
+}
+function generateReadme({ packageManager, projectName, needsTypeScript, needsVitest, needsEslint, needsStylelint, needsPrettier, }) {
+    let readme = `# ${projectName}
+
+⚠️ 注意：将此项目导入微信开发者工具时请选择项目根目录而非 \`dist\` 目录。
+
+更多信息请访问官方文档：[rezor.dev](https://rezor.dev)
+
+## 依赖安装
+
+\`\`\`sh
+${getCommand(packageManager, 'install')}
+\`\`\`
+
+## 本地开发
+
+\`\`\`sh
+${getCommand(packageManager, 'dev')}
+\`\`\`
+
+## 生产构建
+
+\`\`\`sh
+${getCommand(packageManager, 'build')}
+\`\`\`
+`;
+    if (needsPrettier) {
+        readme += `
+## 代码格式化
+
+\`\`\`sh
+${getCommand(packageManager, 'format')}
+\`\`\`
+`;
+    }
+    if (needsEslint) {
+        readme += `
+## ${needsTypeScript ? 'TS' : 'JS'} 代码质量检测
+
+\`\`\`sh
+${getCommand(packageManager, needsStylelint ? 'lint:script' : 'lint')}
+\`\`\`
+`;
+    }
+    if (needsStylelint) {
+        readme += `
+## CSS 代码质量检测
+
+\`\`\`sh
+${getCommand(packageManager, needsEslint ? 'lint:style' : 'lint')}
+\`\`\`
+`;
+    }
+    if (needsTypeScript) {
+        readme += `
+## 类型检测
+
+\`\`\`sh
+${getCommand(packageManager, 'type-check')}
+\`\`\`
+`;
+    }
+    if (needsVitest) {
+        readme += `
+## 单元测试
+
+\`\`\`sh
+${getCommand(packageManager, 'test')}
+\`\`\`
+`;
+    }
+    return readme;
+}
+async function init() {
+    console.log();
+    console.log(process.stdout.isTTY && process.stdout.getColorDepth() > 8 ?
+        gradientBanner
+        : defaultBanner);
+    console.log();
+    const cwd = process.cwd();
+    let targetDir = process.argv[2];
+    const defaultProjectName = targetDir ?? 'rezor-project';
+    let result = {};
+    try {
+        // Prompts:
+        // - Project name:
+        //   - whether to overwrite the existing directory or not?
+        //   - enter a valid package name for package.json
+        result = await prompts([
+            {
+                name: 'projectName',
+                type: targetDir ? null : 'text',
+                message: '请输入项目名称：',
+                initial: defaultProjectName,
+                onState(state) {
+                    targetDir = String(state.value).trim() || defaultProjectName;
+                },
+            },
+            {
+                name: 'shouldOverwrite',
+                type: () => (canSkipEmptying(targetDir) ? null : 'toggle'),
+                message() {
+                    const dirForPrompt = targetDir === '.' ? '当前目录' : `目标文件夹 "${targetDir}"`;
+                    return `${dirForPrompt} 非空，是否覆盖？`;
+                },
+                initial: true,
+                active: '是',
+                inactive: '否',
+            },
+            {
+                name: 'overwriteChecker',
+                type(_, values) {
+                    if (values.shouldOverwrite === false) {
+                        throw new Error(red('✖') + ` 操作取消`);
+                    }
+                    return null;
+                },
+            },
+            {
+                name: 'packageName',
+                type: () => (isValidPackageName(targetDir) ? null : 'text'),
+                message: '请输入包名称：',
+                initial: () => toValidPackageName(targetDir),
+                validate: (dir) => isValidPackageName(dir) || '无效的 package.json 名称',
+            },
+            {
+                name: 'needsTypeScript',
+                type: 'toggle',
+                message: '是否使用 TypeScript 语法？',
+                initial: false,
+                active: '是',
+                inactive: '否',
+            },
+            {
+                name: 'needsVitest',
+                type: 'toggle',
+                message: '是否引入 Vitest 用于单元测试？',
+                initial: false,
+                active: '是',
+                inactive: '否',
+            },
+            {
+                name: 'needsEslint',
+                type: 'toggle',
+                message: (_, values) => `是否引入 ESLint 用于 ${values.needsTypeScript ? 'TS' : 'JS'} 代码质量检测？`,
+                initial: false,
+                active: '是',
+                inactive: '否',
+            },
+            {
+                name: 'needsStylelint',
+                type: 'toggle',
+                message: '是否引入 Stylelint 用于 CSS 代码质量检测？',
+                initial: false,
+                active: '是',
+                inactive: '否',
+            },
+            {
+                name: 'needsPrettier',
+                type: 'toggle',
+                message: '是否引入 Prettier 用于代码格式化？',
+                initial: false,
+                active: '是',
+                inactive: '否',
+            },
+        ], {
+            onCancel() {
+                throw new Error(red('✖') + ` 操作取消`);
+            },
+        });
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    }
+    catch (error) {
+        console.error(error.message);
+        process.exit(1);
+    }
+    // `initial` won't take effect if the prompt type is null
+    // so we still have to assign the default values here
+    const { projectName, shouldOverwrite = false, packageName = projectName ?? defaultProjectName, needsTypeScript = false, needsVitest = false, needsEslint = false, needsStylelint = false, needsPrettier = false, } = result;
+    const root = path.join(cwd, targetDir);
+    if (fs.existsSync(root) && shouldOverwrite) {
+        emptyDir(root);
+    }
+    else if (!fs.existsSync(root)) {
+        fs.mkdirSync(root);
+    }
+    console.log(`\n正在初始化项目 ${root}...`);
+    const templateRoot = fileURLToPath(new URL('template', import.meta.url));
+    // Instructions:
+    // Supported package managers: pnpm > yarn > bun > npm
+    const userAgent = process.env.npm_config_user_agent ?? '';
+    const packageManager = userAgent.includes('pnpm') ? 'pnpm'
+        : userAgent.includes('yarn') ? 'yarn'
+            : userAgent.includes('bun') ? 'bun'
+                : 'npm';
+    const render = (templateName) => {
+        renderTemplate(path.resolve(templateRoot, templateName), root, {
+            packageName,
+            needsTypeScript,
+            needsVitest,
+            needsEslint,
+            needsStylelint,
+            needsPrettier,
+            packageManager: ['npm', 'bun'].includes(packageManager) ? '' : (userAgent.split(' ')[0].replace('/', '@')),
+        });
+    };
+    render('base');
+    if (needsTypeScript) {
+        render('typescript');
+    }
+    else {
+        render('javascript');
+    }
+    if (needsEslint) {
+        render('eslint');
+    }
+    if (needsStylelint) {
+        render('stylelint');
+    }
+    if (needsPrettier) {
+        render('prettier');
+    }
+    // Vitest should be the last one to render.
+    if (needsVitest) {
+        if (needsTypeScript) {
+            render('vitest-typescript');
+        }
+        else {
+            render('vitest');
+        }
+    }
+    fs.writeFileSync(path.resolve(root, 'README.md'), generateReadme({
+        packageManager,
+        projectName: projectName ?? packageName ?? defaultProjectName,
+        needsTypeScript,
+        needsVitest,
+        needsEslint,
+        needsStylelint,
+        needsPrettier,
+    }));
+    console.log(`\n项目初始化完成，可执行以下命令：\n`);
+    if (root !== cwd) {
+        const cdProjectName = path.relative(cwd, root);
+        console.log(`  ${bold(green(`cd ${cdProjectName.includes(' ') ? `"${cdProjectName}"` : cdProjectName}`))}`);
+    }
+    console.log(`  ${bold(green(getCommand(packageManager, 'install')))}`);
+    if (needsPrettier) {
+        console.log(`  ${bold(green(getCommand(packageManager, 'format')))}`);
+    }
+    console.log(`  ${bold(green(getCommand(packageManager, 'dev')))}`);
+    console.log();
+}
+try {
+    await init();
+}
+catch (error) {
+    console.error(error);
+}

package/package.json

@@ -1,12 +1,40 @@
 {
   "name": "create-rezor",
-  "version": "0.0.0",
-  "description": "",
-  "main": "index.js",
-  "keywords": [],
-  "author": "",
-  "license": "ISC",
+  "version": "0.1.0",
+  "type": "module",
+  "description": "Rezor 脚手架",
+  "bin": {
+    "create-rezor": "outfile.js"
+  },
+  "files": [
+    "outfile.js",
+    "template"
+  ],
+  "engines": {
+    "node": ">=18.19.1 <19 || >=20.6.1"
+  },
+  "repository": "https://github.com/rezorjs/create-rezor.git",
+  "author": "Yang Mingshan <y.mingshan3@gmail.com>",
+  "license": "MIT",
+  "dependencies": {
+    "ejs": "^5.0.1",
+    "kolorist": "^1.8.0",
+    "prompts": "^2.4.2"
+  },
+  "devDependencies": {
+    "@eslint/js": "^10.0.1",
+    "@types/ejs": "^3.1.5",
+    "@types/node": "^25.5.0",
+    "@types/prompts": "^2.4.9",
+    "eslint": "^10.1.0",
+    "prettier": "^3.8.1",
+    "typescript": "^6.0.2",
+    "typescript-eslint": "^8.58.0"
+  },
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "format": "prettier --check \"**/*.{js,ts,json,md}\"",
+    "lint": "eslint .",
+    "type": "tsc --noEmit",
+    "build": "tsc && mv index.js outfile.js"
   }
 }

package/template/base/_editorconfig

@@ -0,0 +1,9 @@
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true

package/template/base/_gitignore

@@ -0,0 +1,6 @@
+.DS_Store
+node_modules
+dist
+*.log*
+.vscode
+.idea

package/template/base/_npmrc

@@ -0,0 +1 @@
+registry=https://registry.npmmirror.com/

package/template/base/package.json.ejs

@@ -0,0 +1,102 @@
+{
+  "name": "<%- packageName %>",
+  "version": "1.0.0",
+  "private": true,
+  "type": "module",
+  <%_ if (packageManager) { _%>
+  "packageManager": "<%- packageManager %>",
+  <%_ } _%>
+  "engines": {
+    "node": ">=18.19.1 <19 || >=20.6.1"
+  },
+  "scripts": {
+    <%_ if (needsPrettier) { _%>
+    "format": "prettier --write \"**/*.{js<% if (needsEslint) { %>,cjs<% } %><% if (needsTypeScript) { %>,ts<% } %>,json,css,html,md}\"",
+    <%_ } _%>
+    <%_ if (needsEslint) { _%>
+    "lint<% if (needsStylelint) { %>:script<% } %>": "eslint .",
+    <%_ } _%>
+    <%_ if (needsStylelint) { _%>
+    "lint<% if (needsEslint) { %>:style<% } %>": "stylelint \"src/**/*.css\"",
+    <%_ } _%>
+    <%_ if (needsTypeScript) { _%>
+    "type-check": "tsc",
+    <%_ } _%>
+    <%_ if (needsVitest) { _%>
+    "test": "vitest",
+    <%_ } _%>
+    "dev": "cross-env NODE_ENV=development node build.js",
+    "build": "cross-env NODE_ENV=production node build.js"
+  },
+  "dependencies": {
+    "@babel/runtime": "^7.29.2",
+    "rezor": "^0.1.0",
+    trailing-comma
+  },
+  "devDependencies": {
+    "@babel/core": "^7.29.0",
+    "@babel/plugin-transform-runtime": "^7.29.0",
+    "@babel/preset-env": "^7.29.2",
+    <%_ if (needsTypeScript) { _%>
+    "@babel/preset-typescript": "^7.28.5",
+    <%_ } _%>
+    "@babel/traverse": "^7.29.0",
+    "@babel/types": "^7.29.0",
+    <%_ if (needsEslint) { _%>
+    "@eslint/js": "^10.0.1",
+    <%_ } _%>
+    "@rollup/plugin-commonjs": "^29.0.2",
+    "@rollup/plugin-node-resolve": "^16.0.3",
+    "@rollup/plugin-replace": "^6.0.3",
+    "@rollup/plugin-terser": "^1.0.0",
+    <%_ if (needsTypeScript && needsVitest) { _%>
+    "@types/node": "^25.5.2",
+    <%_ } _%>
+    <%_ if (needsVitest) { _%>
+    "@vitest/coverage-v8": "^4.1.2",
+    <%_ } _%>
+    "babel-plugin-autocomplete-index": "^0.2.0",
+    "babel-plugin-module-resolver": "^5.0.3",
+    "babel-plugin-transform-inline-environment-variables": "^0.4.4",
+    "chokidar": "^5.0.0",
+    "cross-env": "^10.1.0",
+    <%_ if (needsEslint) { _%>
+    "eslint": "^10.2.0",
+    <%_ if (needsPrettier) { _%>
+    "eslint-config-prettier": "^10.1.8",
+    <%_ } _%>
+    <%_ } _%>
+    "fs-extra": "^11.3.4",
+    <%_ if (needsEslint) { _%>
+    "globals": "^17.4.0",
+    <%_ } _%>
+    "kolorist": "^1.8.0",
+    "local-pkg": "^1.1.2",
+    "postcss": "^8.5.8",
+    "postcss-load-config": "^6.0.1",
+    "postcss-pxtorpx-pro": "^2.0.0",
+    <%_ if (needsPrettier) { _%>
+    "prettier": "^3.8.1",
+    <%_ } _%>
+    "rollup": "^4.60.1",
+    <%_ if (needsStylelint) { _%>
+    "stylelint": "^17.6.0",
+    "stylelint-config-standard": "^40.0.0",
+    <%_ } _%>
+    "terser": "^5.46.1",
+    <%_ if (needsTypeScript) { _%>
+    "typescript": "^6.0.2",
+    <%_ } _%>
+    <%_ if (needsTypeScript && needsEslint) { _%>
+    "typescript-eslint": "^8.58.0",
+    <%_ } _%>
+    <%_ if (needsVitest) { _%>
+    "vitest": "^4.1.2",
+    <%_ } _%>
+    trailing-comma
+  },
+  "browserslist": [
+    "iOS >= 10",
+    "Chrome >= 63"
+  ]
+}

package/template/base/postcss.config.js

@@ -0,0 +1,17 @@
+import pxtorpx from 'postcss-pxtorpx-pro';
+
+const config = {
+  plugins: [
+    {
+      postcssPlugin: 'postcss-import-css-to-wxss',
+      AtRule: {
+        import: (atRule) => {
+          atRule.params = atRule.params.replace('.css', '.wxss');
+        },
+      },
+    },
+    pxtorpx({ transform: (x) => x }),
+  ],
+};
+
+export default config;

package/template/base/project.config.json

@@ -0,0 +1,69 @@
+{
+  "description": "项目配置文件",
+  "miniprogramRoot": "dist/",
+  "packOptions": {
+    "ignore": [],
+    "include": []
+  },
+  "setting": {
+    "urlCheck": false,
+    "es6": false,
+    "enhance": false,
+    "postcss": false,
+    "preloadBackgroundData": false,
+    "minified": false,
+    "newFeature": true,
+    "coverView": true,
+    "nodeModules": false,
+    "autoAudits": false,
+    "showShadowRootInWxmlPanel": false,
+    "scopeDataCheck": false,
+    "uglifyFileName": false,
+    "checkInvalidKey": true,
+    "checkSiteMap": true,
+    "uploadWithSourceMap": false,
+    "compileHotReLoad": true,
+    "lazyloadPlaceholderEnable": false,
+    "useMultiFrameRuntime": true,
+    "useApiHook": true,
+    "useApiHostProcess": true,
+    "babelSetting": {
+      "ignore": [],
+      "disablePlugins": [],
+      "outputPath": ""
+    },
+    "useIsolateContext": false,
+    "userConfirmedUseIsolateContext": false,
+    "userConfirmedBundleSwitch": false,
+    "packNpmManually": false,
+    "packNpmRelationList": [],
+    "minifyWXSS": true,
+    "disableUseStrict": false,
+    "minifyWXML": true,
+    "showES6CompileOption": false,
+    "useCompilerPlugins": false,
+    "ignoreUploadUnusedFiles": true,
+    "compileWorklet": false,
+    "localPlugins": false,
+    "condition": false,
+    "swc": false,
+    "disableSWC": true,
+    "skylineRenderEnable": false,
+    "useStaticServer": false,
+    "useLanDebug": false,
+    "ignoreDevUnusedFiles": true,
+    "bigPackageSizeSupport": false
+  },
+  "compileType": "miniprogram",
+  "libVersion": "development",
+  "appid": "",
+  "projectname": "rezor-project",
+  "simulatorType": "wechat",
+  "simulatorPluginLibVersion": {},
+  "condition": {},
+  "srcMiniprogramRoot": "dist/",
+  "editorSetting": {
+    "tabIndent": "insertSpaces",
+    "tabSize": 2
+  }
+}

package/template/base/src/app.css

@@ -0,0 +1,18 @@
+page {
+  color: #181818;
+  font-size: 28px;
+  font-family:
+    ui-sans-serif,
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    sans-serif;
+  background: #fff;
+}
+
+@media (prefers-color-scheme: dark) {
+  page {
+    color: #fff;
+    background: #181818;
+  }
+}