quickshell/quickshell-web
3
1
Fork 0
Code Issues Projects Activity

change shiki dark theme and add light theme

Browse source
This commit is contained in:
outfoxxed 2024-10-17 01:03:12 -07:00
parent c9db5773d3
commit ea5b56acc8
Signed by: outfoxxed
GPG key ID: 4C88A185FB89301E
4 changed files with 124 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
package.json
View file

@ -17,6 +17,7 @@
"@astrojs/solid-js": "^4.4.2",
"@hbsnow/rehype-sectionize": "^1.0.7",
"@pagefind/default-ui": "^1.1.1",
"@shikijs/rehype": "^1.22.0",
"@types/node": "^20.14.11",
"astro": "^4.15.9",
"astro-breadcrumbs": "^2.3.1",

27
src/config/io/markdown.ts
View file

@ -11,6 +11,7 @@ import type {
} from "@astrojs/markdown-remark";
import { createMarkdownProcessor } from "@astrojs/markdown-remark";
import { remarkAlert } from "remark-github-blockquote-alert";
import rehypeShiki from "@shikijs/rehype";
import sectionize from "@hbsnow/rehype-sectionize";
import type { ShikiTransformer } from "shiki";
@ -122,14 +123,28 @@ const shikiRewriteTypelinks: ShikiTransformer = {
};
export const markdownConfig: AstroMarkdownOptions = {
syntaxHighlight: "shiki",
shikiConfig: {
theme: "material-theme-ocean",
wrap: true,
transformers: [shikiRewriteTypelinks],
},
syntaxHighlight: false,
remarkPlugins: [remarkParseAtTypes, [remarkAlert, { legacyTitle: true }]],
rehypePlugins: [
[rehypeShiki, {
themes: {
light: "slack-ochin",
dark: "slack-dark",
},
colorReplacements: {
"slack-ochin": {
"#357b42": "#989eb9", // comments
"#b1108e": "#224bbb", // fields
},
"slack-dark": {
"#222222": "#0f111a", // bg
"#6a9955": "#525666", // comments
},
},
defaultColor: false,
wrap: true,
transformers: [shikiRewriteTypelinks],
}],
// FIXME: incompatible types between unified/Plugin and Astro/RehypePlugin
[sectionize as RehypePlugin, { idPropertyName: "id" }],
rehypeRewriteTypelinks,

12
src/styles/css-config/code.css
View file

@ -5,6 +5,18 @@
background-color: hsl(var(--blue) 85 35 / 0.1);
}
.shiki,
.shiki span {
color: var(--shiki-light);
background-color: var(--shiki-light-bg);
}
html.dark .shiki,
html.dark .shiki span {
color: var(--shiki-dark);
background-color: var(--shiki-dark-bg);
}
pre {
padding: 1rem;
border-radius: 0.618rem;

90
yarn.lock
View file

@ -1402,6 +1402,20 @@ __metadata:
languageName: node
linkType: hard
"@shikijs/core@npm:1.22.0":
version: 1.22.0
resolution: "@shikijs/core@npm:1.22.0"
dependencies:
"@shikijs/engine-javascript": "npm:1.22.0"
"@shikijs/engine-oniguruma": "npm:1.22.0"
"@shikijs/types": "npm:1.22.0"
"@shikijs/vscode-textmate": "npm:^9.3.0"
"@types/hast": "npm:^3.0.4"
hast-util-to-html: "npm:^9.0.3"
checksum: 10c0/d663fee39180680ccb9ea8dd5abb397e953375989a4fd52fb65a2616388db21d1d0a715a68afae93c4b48f0e037bd0c3a600cd52fb8560461ba87e2102e00cd1
languageName: node
linkType: hard
"@shikijs/engine-javascript@npm:1.20.0":
version: 1.20.0
resolution: "@shikijs/engine-javascript@npm:1.20.0"
@ -1413,6 +1427,17 @@ __metadata:
languageName: node
linkType: hard
"@shikijs/engine-javascript@npm:1.22.0":
version: 1.22.0
resolution: "@shikijs/engine-javascript@npm:1.22.0"
dependencies:
"@shikijs/types": "npm:1.22.0"
"@shikijs/vscode-textmate": "npm:^9.3.0"
oniguruma-to-js: "npm:0.4.3"
checksum: 10c0/f1a2c3c6ad5db549229dafe11a57bef2b0896e5c1b33dec15bd323e4e785dc469a277b088a89f774a66b30c8c62e9e5b76d3d485f46096dc290329aab33d92eb
languageName: node
linkType: hard
"@shikijs/engine-oniguruma@npm:1.20.0":
version: 1.20.0
resolution: "@shikijs/engine-oniguruma@npm:1.20.0"
@ -1423,6 +1448,30 @@ __metadata:
languageName: node
linkType: hard
"@shikijs/engine-oniguruma@npm:1.22.0":
version: 1.22.0
resolution: "@shikijs/engine-oniguruma@npm:1.22.0"
dependencies:
"@shikijs/types": "npm:1.22.0"
"@shikijs/vscode-textmate": "npm:^9.3.0"
checksum: 10c0/a57f2352dc35e6f3705348488c0ec2b91a99380489917bddc1d1444b775ba529fc99491ac0c16d0add6d2552ca9fd197e88bd47b0166d163bfc6a80345294452
languageName: node
linkType: hard
"@shikijs/rehype@npm:^1.22.0":
version: 1.22.0
resolution: "@shikijs/rehype@npm:1.22.0"
dependencies:
"@shikijs/types": "npm:1.22.0"
"@types/hast": "npm:^3.0.4"
hast-util-to-string: "npm:^3.0.1"
shiki: "npm:1.22.0"
unified: "npm:^11.0.5"
unist-util-visit: "npm:^5.0.0"
checksum: 10c0/9c6d8cbd8e6deb4032fd1bda7934c26f8ebfca7805c7702cade3bf2eaeb5fa7237ece12eac2a66b96139866256aad3a70eddf4cfe4d94572d05c6ba9baf4be5f
languageName: node
linkType: hard
"@shikijs/types@npm:1.20.0":
version: 1.20.0
resolution: "@shikijs/types@npm:1.20.0"
@ -1433,6 +1482,16 @@ __metadata:
languageName: node
linkType: hard
"@shikijs/types@npm:1.22.0":
version: 1.22.0
resolution: "@shikijs/types@npm:1.22.0"
dependencies:
"@shikijs/vscode-textmate": "npm:^9.3.0"
"@types/hast": "npm:^3.0.4"
checksum: 10c0/220ba56b046dd07cb5e12c02f061e926129d5295fba60c4910a45d65312cdcbcc120329ec550195fdb85ab60ae9e3af31430bffce3ceba80b30d21e32467c013
languageName: node
linkType: hard
"@shikijs/vscode-textmate@npm:^9.2.2":
version: 9.2.2
resolution: "@shikijs/vscode-textmate@npm:9.2.2"
@ -1440,6 +1499,13 @@ __metadata:
languageName: node
linkType: hard
"@shikijs/vscode-textmate@npm:^9.3.0":
version: 9.3.0
resolution: "@shikijs/vscode-textmate@npm:9.3.0"
checksum: 10c0/6aa80798b7d7f8be8029bb397ce1b9b75c0d0963d6aa444b9ae165595ceee931cf3767ca1681ba71a6e27484eeccab584bd38db3420da477f1a8d745040b1b1f
languageName: node
linkType: hard
"@sinclair/typebox@npm:^0.27.8":
version: 0.27.8
resolution: "@sinclair/typebox@npm:0.27.8"
@ -4336,6 +4402,15 @@ __metadata:
languageName: node
linkType: hard
"hast-util-to-string@npm:^3.0.1":
version: 3.0.1
resolution: "hast-util-to-string@npm:3.0.1"
dependencies:
"@types/hast": "npm:^3.0.0"
checksum: 10c0/b5fa1912a6ba6131affae52a0f4394406c4c0d23c2b0307f1d69988f1030c7bb830289303e67c5ad8f674f5f23a454c1dcd492c39e45a22c1f46d3c9bce5bd0c
languageName: node
linkType: hard
"hast-util-to-text@npm:^4.0.2":
version: 4.0.2
resolution: "hast-util-to-text@npm:4.0.2"
@ -6316,6 +6391,7 @@ __metadata:
"@biomejs/biome": "npm:^1.8.3"
"@hbsnow/rehype-sectionize": "npm:^1.0.7"
"@pagefind/default-ui": "npm:^1.1.1"
"@shikijs/rehype": "npm:^1.22.0"
"@types/node": "npm:^20.14.11"
astro: "npm:^4.15.9"
astro-breadcrumbs: "npm:^2.3.1"
@ -6837,6 +6913,20 @@ __metadata:
languageName: node
linkType: hard
"shiki@npm:1.22.0":
version: 1.22.0
resolution: "shiki@npm:1.22.0"
dependencies:
"@shikijs/core": "npm:1.22.0"
"@shikijs/engine-javascript": "npm:1.22.0"
"@shikijs/engine-oniguruma": "npm:1.22.0"
"@shikijs/types": "npm:1.22.0"
"@shikijs/vscode-textmate": "npm:^9.3.0"
"@types/hast": "npm:^3.0.4"
checksum: 10c0/750ee1751340ad65368921a4a4f29249b9632c8b547a0c4052eb8a467be0da8b3af7a5e8751482a9e387f67053f8c8a7e5f50bf1be6fcf6f91ed3952bd20965e
languageName: node
linkType: hard
"shiki@npm:^1.10.3, shiki@npm:^1.16.2":
version: 1.20.0
resolution: "shiki@npm:1.20.0"