From c83620ad27e5cf08c02616d97452aa2a9b7b7c4b Mon Sep 17 00:00:00 2001 From: Yuhei Yasuda Date: Sun, 21 Apr 2024 20:03:50 +0900 Subject: [PATCH] use built-in theme for shiki --- astro.config.ts | 5 +- package-lock.json | 229 ++++++++++++++++++++++++++- package.json | 2 +- src/styles/base/variables.shiki.css | 13 -- src/styles/components/astro-code.css | 13 ++ tailwind.config.cjs | 1 + 6 files changed, 244 insertions(+), 19 deletions(-) delete mode 100644 src/styles/base/variables.shiki.css create mode 100644 src/styles/components/astro-code.css diff --git a/astro.config.ts b/astro.config.ts index 6b59ad6..6c983b3 100644 --- a/astro.config.ts +++ b/astro.config.ts @@ -37,7 +37,10 @@ export default defineConfig({ }, markdown: { shikiConfig: { - theme: 'css-variables', + themes: { + light: 'github-light-default', + dark: 'github-dark-default', + }, }, }, }); diff --git a/package-lock.json b/package-lock.json index ffd1096..7aaa370 100644 --- a/package-lock.json +++ b/package-lock.json @@ -24,7 +24,7 @@ "eslint-plugin-tailwindcss": "3.15.1", "mdast-util-to-string": "4.0.0", "patch-package": "8.0.0", - "postcss-dark-theme-class": "1.2.1", + "postcss-dark-theme-class": "1.2.2", "prettier": "3.2.5", "prettier-plugin-astro": "0.13.0", "prettier-plugin-css-order": "2.1.2", @@ -6709,6 +6709,227 @@ "node": ">= 0.8.0" } }, + "node_modules/lightningcss": { + "version": "1.24.1", + "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.24.1.tgz", + "integrity": "sha512-kUpHOLiH5GB0ERSv4pxqlL0RYKnOXtgGtVe7shDGfhS0AZ4D1ouKFYAcLcZhql8aMspDNzaUCumGHZ78tb2fTg==", + "optional": true, + "peer": true, + "dependencies": { + "detect-libc": "^1.0.3" + }, + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + }, + "optionalDependencies": { + "lightningcss-darwin-arm64": "1.24.1", + "lightningcss-darwin-x64": "1.24.1", + "lightningcss-freebsd-x64": "1.24.1", + "lightningcss-linux-arm-gnueabihf": "1.24.1", + "lightningcss-linux-arm64-gnu": "1.24.1", + "lightningcss-linux-arm64-musl": "1.24.1", + "lightningcss-linux-x64-gnu": "1.24.1", + "lightningcss-linux-x64-musl": "1.24.1", + "lightningcss-win32-x64-msvc": "1.24.1" + } + }, + "node_modules/lightningcss-darwin-arm64": { + "version": "1.24.1", + "resolved": "https://registry.npmjs.org/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.24.1.tgz", + "integrity": "sha512-1jQ12jBy+AE/73uGQWGSafK5GoWgmSiIQOGhSEXiFJSZxzV+OXIx+a9h2EYHxdJfX864M+2TAxWPWb0Vv+8y4w==", + "cpu": [ + "arm64" + ], + "optional": true, + "os": [ + "darwin" + ], + "peer": true, + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/lightningcss-darwin-x64": { + "version": "1.24.1", + "resolved": "https://registry.npmjs.org/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.24.1.tgz", + "integrity": "sha512-R4R1d7VVdq2mG4igMU+Di8GPf0b64ZLnYVkubYnGG0Qxq1KaXQtAzcLI43EkpnoWvB/kUg8JKCWH4S13NfiLcQ==", + "cpu": [ + "x64" + ], + "optional": true, + "os": [ + "darwin" + ], + "peer": true, + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/lightningcss-freebsd-x64": { + "version": "1.24.1", + "resolved": "https://registry.npmjs.org/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.24.1.tgz", + "integrity": "sha512-z6NberUUw5ALES6Ixn2shmjRRrM1cmEn1ZQPiM5IrZ6xHHL5a1lPin9pRv+w6eWfcrEo+qGG6R9XfJrpuY3e4g==", + "cpu": [ + "x64" + ], + "optional": true, + "os": [ + "freebsd" + ], + "peer": true, + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/lightningcss-linux-arm-gnueabihf": { + "version": "1.24.1", + "resolved": "https://registry.npmjs.org/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.24.1.tgz", + "integrity": "sha512-NLQLnBQW/0sSg74qLNI8F8QKQXkNg4/ukSTa+XhtkO7v3BnK19TS1MfCbDHt+TTdSgNEBv0tubRuapcKho2EWw==", + "cpu": [ + "arm" + ], + "optional": true, + "os": [ + "linux" + ], + "peer": true, + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/lightningcss-linux-arm64-gnu": { + "version": "1.24.1", + "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.24.1.tgz", + "integrity": "sha512-AQxWU8c9E9JAjAi4Qw9CvX2tDIPjgzCTrZCSXKELfs4mCwzxRkHh2RCxX8sFK19RyJoJAjA/Kw8+LMNRHS5qEg==", + "cpu": [ + "arm64" + ], + "optional": true, + "os": [ + "linux" + ], + "peer": true, + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/lightningcss-linux-arm64-musl": { + "version": "1.24.1", + "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.24.1.tgz", + "integrity": "sha512-JCgH/SrNrhqsguUA0uJUM1PvN5+dVuzPIlXcoWDHSv2OU/BWlj2dUYr3XNzEw748SmNZPfl2NjQrAdzaPOn1lA==", + "cpu": [ + "arm64" + ], + "optional": true, + "os": [ + "linux" + ], + "peer": true, + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/lightningcss-linux-x64-gnu": { + "version": "1.24.1", + "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.24.1.tgz", + "integrity": "sha512-TYdEsC63bHV0h47aNRGN3RiK7aIeco3/keN4NkoSQ5T8xk09KHuBdySltWAvKLgT8JvR+ayzq8ZHnL1wKWY0rw==", + "cpu": [ + "x64" + ], + "optional": true, + "os": [ + "linux" + ], + "peer": true, + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/lightningcss-linux-x64-musl": { + "version": "1.24.1", + "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.24.1.tgz", + "integrity": "sha512-HLfzVik3RToot6pQ2Rgc3JhfZkGi01hFetHt40HrUMoeKitLoqUUT5owM6yTZPTytTUW9ukLBJ1pc3XNMSvlLw==", + "cpu": [ + "x64" + ], + "optional": true, + "os": [ + "linux" + ], + "peer": true, + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/lightningcss-win32-x64-msvc": { + "version": "1.24.1", + "resolved": "https://registry.npmjs.org/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.24.1.tgz", + "integrity": "sha512-joEupPjYJ7PjZtDsS5lzALtlAudAbgIBMGJPNeFe5HfdmJXFd13ECmEM+5rXNxYVMRHua2w8132R6ab5Z6K9Ow==", + "cpu": [ + "x64" + ], + "optional": true, + "os": [ + "win32" + ], + "peer": true, + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/lightningcss/node_modules/detect-libc": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-1.0.3.tgz", + "integrity": "sha512-pGjwhsmsp4kL2RTz08wcOlGN83otlqHeD/Z5T8GXZB+/YcpQ/dgo+lbU8ZsGxV0HIvqqxo9l7mqYwyYMD9bKDg==", + "optional": true, + "peer": true, + "bin": { + "detect-libc": "bin/detect-libc.js" + }, + "engines": { + "node": ">=0.10" + } + }, "node_modules/lilconfig": { "version": "3.1.1", "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.1.tgz", @@ -8881,9 +9102,9 @@ } }, "node_modules/postcss-dark-theme-class": { - "version": "1.2.1", - "resolved": "https://registry.npmjs.org/postcss-dark-theme-class/-/postcss-dark-theme-class-1.2.1.tgz", - "integrity": "sha512-EzQMGOcYnE0eMBjfgB+xnamlZ8O02Aiojyg/iv84cpRUdLKZW8ankZWxWUhhIid1OF7yl4G3BeYfE+7CGY2tdQ==", + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/postcss-dark-theme-class/-/postcss-dark-theme-class-1.2.2.tgz", + "integrity": "sha512-5yjWcU4mLKT15/1fWfyjRQrYZpUM54YWewVXnDrjlcCC/uMc+4uqsQUASPJCN6lf2z7dnDWWcjZKDKLsSblaxQ==", "funding": [ { "type": "opencollective", diff --git a/package.json b/package.json index 8a96e5d..09d1e4a 100644 --- a/package.json +++ b/package.json @@ -35,7 +35,7 @@ "eslint-plugin-tailwindcss": "3.15.1", "mdast-util-to-string": "4.0.0", "patch-package": "8.0.0", - "postcss-dark-theme-class": "1.2.1", + "postcss-dark-theme-class": "1.2.2", "prettier": "3.2.5", "prettier-plugin-astro": "0.13.0", "prettier-plugin-css-order": "2.1.2", diff --git a/src/styles/base/variables.shiki.css b/src/styles/base/variables.shiki.css deleted file mode 100644 index e42a456..0000000 --- a/src/styles/base/variables.shiki.css +++ /dev/null @@ -1,13 +0,0 @@ -:root { - --astro-code-color-text: theme(textColor.dynamic.DEFAULT); - --astro-code-color-background: theme(backgroundColor.dynamic.muted); - --astro-code-token-constant: light-dark(#0550ae, #79c0ff); - --astro-code-token-string: light-dark(#0a3069, #a5d6ff); - --astro-code-token-comment: light-dark(#6e7781, #8b949e); - --astro-code-token-keyword: light-dark(#cf222e, #ff7b72); - --astro-code-token-parameter: light-dark(#24292f, #c9d1d9); - --astro-code-token-function: light-dark(#8250df, #d2a8ff); - --astro-code-token-string-expression: light-dark(#0a3069, #a5d6ff); - --astro-code-token-punctuation: light-dark(#0a3069, #a5d6ff); - --astro-code-token-link: light-dark(#0a3069, #a5d6ff); -} diff --git a/src/styles/components/astro-code.css b/src/styles/components/astro-code.css new file mode 100644 index 0000000..1e527e0 --- /dev/null +++ b/src/styles/components/astro-code.css @@ -0,0 +1,13 @@ +.astro-code, +.astro-code span { + background-color: theme(backgroundColor.dynamic.muted) !important; + + /* https://shiki.style/guide/dual-themes#query-based-dark-mode */ + @media (prefers-color-scheme: dark) { + background-color: var(--shiki-dark-bg) !important; + color: var(--shiki-dark) !important; + font-style: var(--shiki-dark-font-style) !important; + font-weight: var(--shiki-dark-font-weight) !important; + text-decoration: var(--shiki-dark-text-decoration) !important; + } +} diff --git a/tailwind.config.cjs b/tailwind.config.cjs index 0827fec..d4439f0 100644 --- a/tailwind.config.cjs +++ b/tailwind.config.cjs @@ -38,6 +38,7 @@ const cssFiles = plugin(({ addBase, addComponents, addUtilities }) => { /** @type {import('tailwindcss').Config} */ module.exports = { content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'], + safelist: ['astro-code'], theme: { fontSize: { // https://w3c.github.io/jlreq/#id343