jaamd 0.1.15 → 0.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +73 -12
- package/index.ts +21 -3
- package/package.json +18 -4
- package/src/styles/shiki-dual.css +28 -0
- package/src/styles/variables.css +60 -0
- package/src/themes/dracula/dark.css +66 -0
- package/src/themes/dracula/index.css +66 -0
- package/src/themes/nord/dark.css +66 -0
- package/src/themes/nord/index.css +66 -0
- package/src/themes/one-dark/dark.css +66 -0
- package/src/themes/one-dark/index.css +66 -0
package/README.md
CHANGED
|
@@ -13,6 +13,10 @@
|
|
|
13
13
|
- [Integration Options](#integration-options)
|
|
14
14
|
- [MarkdownContent Component](#markdowncontent-component)
|
|
15
15
|
- [Theming](#theming)
|
|
16
|
+
- [Customizing variables](#customizing-variables)
|
|
17
|
+
- [Dark mode](#dark-mode)
|
|
18
|
+
- [Theme presets](#theme-presets)
|
|
19
|
+
- [Dual-theme Shiki](#dual-theme-shiki-optional)
|
|
16
20
|
- [Manual / Advanced Usage](#manual--advanced-usage)
|
|
17
21
|
|
|
18
22
|
---
|
|
@@ -62,7 +66,7 @@ To fix it, import the stylesheet **statically** in your layout's frontmatter alo
|
|
|
62
66
|
```astro
|
|
63
67
|
---
|
|
64
68
|
// In any layout that uses MarkdownContent
|
|
65
|
-
import "jaamd/default.css";
|
|
69
|
+
import "jaamd/default.css";
|
|
66
70
|
import "jaamd/styles.css";
|
|
67
71
|
---
|
|
68
72
|
```
|
|
@@ -73,9 +77,9 @@ The duplicate import from `injectScript` is automatically deduplicated by the br
|
|
|
73
77
|
|
|
74
78
|
```ts
|
|
75
79
|
jaamd({
|
|
76
|
-
selector: ".jaamd-content", // CSS selector for the JS enhancements
|
|
77
|
-
theme: "",
|
|
78
|
-
noDefault: false, //
|
|
80
|
+
selector: ".jaamd-content", // CSS selector for the JS enhancements
|
|
81
|
+
theme: "github-light", // Shiki theme name (or { light, dark } — see below)
|
|
82
|
+
noDefault: false, // skip injecting jaamd/default variable fallbacks
|
|
79
83
|
plugins: {
|
|
80
84
|
codeTabs: true, // :::code-tabs directive blocks
|
|
81
85
|
alerts: true, // > [!NOTE] / [!WARNING] blockquote alerts
|
|
@@ -134,30 +138,87 @@ import { MarkdownContent } from "jaamd/components";
|
|
|
134
138
|
|
|
135
139
|
## Theming
|
|
136
140
|
|
|
137
|
-
All styles are driven by CSS custom properties
|
|
141
|
+
All styles are driven by CSS custom properties prefixed with `--jaamd-*`. The default variable set (`jaamd/default`) is injected automatically so everything works out of the box.
|
|
138
142
|
|
|
139
|
-
|
|
143
|
+
### Customizing variables
|
|
144
|
+
|
|
145
|
+
Override any variable on `:root` in your own stylesheet:
|
|
140
146
|
|
|
141
147
|
```css
|
|
142
148
|
:root {
|
|
143
|
-
/* core colors */
|
|
144
149
|
--jaamd-color-fg: #334155;
|
|
145
150
|
--jaamd-color-fg-bright: #0f172a;
|
|
146
151
|
--jaamd-color-primary: #6366f1;
|
|
147
152
|
--jaamd-color-primary-light: #818cf8;
|
|
148
|
-
|
|
149
|
-
/* typography */
|
|
150
|
-
--jaamd-font-sans: ui-sans-serif, system-ui, sans-serif;
|
|
151
153
|
--jaamd-font-mono: ui-monospace, monospace;
|
|
152
154
|
--jaamd-font-size: 1rem;
|
|
153
155
|
}
|
|
154
156
|
```
|
|
155
157
|
|
|
156
|
-
|
|
158
|
+
See [`src/styles/variables.css`](src/styles/variables.css) for every available variable and its default value.
|
|
159
|
+
|
|
160
|
+
### Dark mode
|
|
161
|
+
|
|
162
|
+
The default variable set includes dark-mode overrides activated by the `dark` class on `<html>`. Toggle the class and all JAAMD elements adapt.
|
|
163
|
+
|
|
164
|
+
### Theme presets
|
|
165
|
+
|
|
166
|
+
Three additional presets restyle all `--jaamd-*` variables to match popular editor colour schemes:
|
|
167
|
+
|
|
168
|
+
| Preset | Import | Recommended Shiki theme |
|
|
169
|
+
|--------|--------|------------------------|
|
|
170
|
+
| Dracula | `jaamd/themes/dracula` | `dracula` |
|
|
171
|
+
| Nord | `jaamd/themes/nord` | `nord` |
|
|
172
|
+
| One Dark | `jaamd/themes/one-dark` | `one-dark-pro` |
|
|
173
|
+
|
|
174
|
+
**Standalone preset** — replaces the default light theme entirely:
|
|
175
|
+
|
|
176
|
+
```ts
|
|
177
|
+
jaamd({ theme: "dracula", noDefault: true })
|
|
178
|
+
```
|
|
179
|
+
|
|
180
|
+
```css
|
|
181
|
+
@import "jaamd/themes/dracula.css";
|
|
182
|
+
@import "jaamd/styles.css";
|
|
183
|
+
```
|
|
184
|
+
|
|
185
|
+
**Dark-mode toggle** — each preset ships a `/dark` variant scoped to `html.dark`:
|
|
186
|
+
|
|
187
|
+
```css
|
|
188
|
+
@import "jaamd/themes/dracula/dark.css";
|
|
189
|
+
```
|
|
190
|
+
|
|
191
|
+
```ts
|
|
192
|
+
import "jaamd/themes/dracula/dark";
|
|
193
|
+
```
|
|
194
|
+
|
|
195
|
+
You can also copy any preset from `src/themes/` and customise the values.
|
|
196
|
+
|
|
197
|
+
### Dual-theme Shiki (optional)
|
|
198
|
+
|
|
199
|
+
Pass an object to `theme` to configure Shiki with two colour schemes and CSS-variable–based switching:
|
|
200
|
+
|
|
201
|
+
```ts
|
|
202
|
+
jaamd({
|
|
203
|
+
theme: { light: "github-light", dark: "github-dark" },
|
|
204
|
+
})
|
|
205
|
+
```
|
|
206
|
+
|
|
207
|
+
JAAMD sets `defaultColor: false` on Shiki and injects a stylesheet that swaps token colours when `html.dark` is present. Add an inline script in `<head>` to prevent a flash of wrong theme:
|
|
208
|
+
|
|
209
|
+
```html
|
|
210
|
+
<script is:inline>
|
|
211
|
+
(function () {
|
|
212
|
+
var t = localStorage.getItem("theme");
|
|
213
|
+
if (t === "dark" || (!t && matchMedia("(prefers-color-scheme: dark)").matches))
|
|
214
|
+
document.documentElement.classList.add("dark");
|
|
215
|
+
})();
|
|
216
|
+
</script>
|
|
217
|
+
```
|
|
157
218
|
|
|
158
219
|
### Skipping the defaults
|
|
159
220
|
|
|
160
|
-
If you supply your own full variable set
|
|
221
|
+
If you supply your own full variable set, set `noDefault: true`:
|
|
161
222
|
|
|
162
223
|
```ts
|
|
163
224
|
jaamd({ noDefault: true })
|
package/index.ts
CHANGED
|
@@ -12,10 +12,16 @@ export interface JaamdOptions {
|
|
|
12
12
|
selector?: string;
|
|
13
13
|
|
|
14
14
|
/**
|
|
15
|
-
* Shiki syntax-highlighting theme
|
|
15
|
+
* Shiki syntax-highlighting theme.
|
|
16
|
+
*
|
|
17
|
+
* - **string** — single theme name (e.g. `"github-light"`).
|
|
18
|
+
* - **{ light, dark }** — enables dual-theme mode. Shiki outputs CSS
|
|
19
|
+
* variables for both themes and JAAMD injects the switching CSS.
|
|
20
|
+
* Use together with a `.dark` class on `<html>` for dark-mode toggling.
|
|
21
|
+
*
|
|
16
22
|
* @default "github-light"
|
|
17
23
|
*/
|
|
18
|
-
theme?: string;
|
|
24
|
+
theme?: string | { light: string; dark: string };
|
|
19
25
|
|
|
20
26
|
/**
|
|
21
27
|
* Skip injecting the default CSS variable fallbacks (`jaamd/default`).
|
|
@@ -73,7 +79,16 @@ export default function jaamd(options: JaamdOptions = {}): AstroIntegration {
|
|
|
73
79
|
|
|
74
80
|
// `wrap` and other keys are only filled in when absent.
|
|
75
81
|
const mergedShikiConfig: any = { ...existingShikiConfig };
|
|
76
|
-
|
|
82
|
+
|
|
83
|
+
// Dual-theme mode: { light, dark } → Shiki "themes" with CSS variables
|
|
84
|
+
if (typeof theme === "object" && theme.light && theme.dark) {
|
|
85
|
+
delete mergedShikiConfig.theme;
|
|
86
|
+
mergedShikiConfig.themes = { light: theme.light, dark: theme.dark };
|
|
87
|
+
mergedShikiConfig.defaultColor = false;
|
|
88
|
+
} else {
|
|
89
|
+
mergedShikiConfig.theme = typeof theme === "string" ? theme : "github-light";
|
|
90
|
+
}
|
|
91
|
+
|
|
77
92
|
if (mergedShikiConfig.wrap === undefined) mergedShikiConfig.wrap = true;
|
|
78
93
|
|
|
79
94
|
updateConfig({
|
|
@@ -92,9 +107,12 @@ export default function jaamd(options: JaamdOptions = {}): AstroIntegration {
|
|
|
92
107
|
});
|
|
93
108
|
|
|
94
109
|
// "page" stage: bundled by Vite, tree-shaken, no duplicate injection
|
|
110
|
+
const isDualTheme = typeof theme === "object" && theme.light && theme.dark;
|
|
95
111
|
injectScript(
|
|
96
112
|
"page",
|
|
97
113
|
(!noDefault ? `import "jaamd/default";
|
|
114
|
+
` : "") +
|
|
115
|
+
(isDualTheme ? `import "jaamd/shiki-dual";
|
|
98
116
|
` : "") +
|
|
99
117
|
`import "jaamd/styles";
|
|
100
118
|
` +
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "jaamd",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.2.0",
|
|
4
4
|
"description": "Just Another Astro Markdown",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"license": "MIT",
|
|
@@ -24,7 +24,21 @@
|
|
|
24
24
|
"./default": "./src/styles/variables.css",
|
|
25
25
|
"./default.css": "./src/styles/variables.css",
|
|
26
26
|
"./styles": "./src/styles/markdown.css",
|
|
27
|
-
"./styles.css": "./src/styles/markdown.css"
|
|
27
|
+
"./styles.css": "./src/styles/markdown.css",
|
|
28
|
+
"./shiki-dual": "./src/styles/shiki-dual.css",
|
|
29
|
+
"./shiki-dual.css": "./src/styles/shiki-dual.css",
|
|
30
|
+
"./themes/dracula": "./src/themes/dracula/index.css",
|
|
31
|
+
"./themes/dracula.css": "./src/themes/dracula/index.css",
|
|
32
|
+
"./themes/dracula/dark": "./src/themes/dracula/dark.css",
|
|
33
|
+
"./themes/dracula/dark.css": "./src/themes/dracula/dark.css",
|
|
34
|
+
"./themes/nord": "./src/themes/nord/index.css",
|
|
35
|
+
"./themes/nord.css": "./src/themes/nord/index.css",
|
|
36
|
+
"./themes/nord/dark": "./src/themes/nord/dark.css",
|
|
37
|
+
"./themes/nord/dark.css": "./src/themes/nord/dark.css",
|
|
38
|
+
"./themes/one-dark": "./src/themes/one-dark/index.css",
|
|
39
|
+
"./themes/one-dark.css": "./src/themes/one-dark/index.css",
|
|
40
|
+
"./themes/one-dark/dark": "./src/themes/one-dark/dark.css",
|
|
41
|
+
"./themes/one-dark/dark.css": "./src/themes/one-dark/dark.css"
|
|
28
42
|
},
|
|
29
43
|
"files": [
|
|
30
44
|
"index.ts",
|
|
@@ -40,8 +54,8 @@
|
|
|
40
54
|
},
|
|
41
55
|
"devDependencies": {
|
|
42
56
|
"@types/mdast": "^4.0.4",
|
|
43
|
-
"astro": "^
|
|
44
|
-
"typescript": "^
|
|
57
|
+
"astro": "^6.0.0",
|
|
58
|
+
"typescript": "^6.0.0",
|
|
45
59
|
"unified": "^11.0.0"
|
|
46
60
|
}
|
|
47
61
|
}
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
/* ============================================================
|
|
2
|
+
* JAAMD — Shiki Dual-Theme Switching
|
|
3
|
+
* ============================================================
|
|
4
|
+
*
|
|
5
|
+
* Injected automatically when theme is { light, dark }.
|
|
6
|
+
* Applies the correct Shiki CSS-variable set based on html.dark.
|
|
7
|
+
*
|
|
8
|
+
* Importable as: import "jaamd/shiki-dual";
|
|
9
|
+
* @import "jaamd/shiki-dual.css";
|
|
10
|
+
* ============================================================ */
|
|
11
|
+
|
|
12
|
+
/* Light mode (default) — use --shiki-light-* variables */
|
|
13
|
+
.jaamd-content .astro-code span,
|
|
14
|
+
.jaamd-content .shiki span {
|
|
15
|
+
color: var(--shiki-light) !important;
|
|
16
|
+
font-style: var(--shiki-light-font-style) !important;
|
|
17
|
+
font-weight: var(--shiki-light-font-weight) !important;
|
|
18
|
+
text-decoration: var(--shiki-light-text-decoration) !important;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
/* Dark mode — switch to --shiki-dark-* variants */
|
|
22
|
+
html.dark .jaamd-content .astro-code span,
|
|
23
|
+
html.dark .jaamd-content .shiki span {
|
|
24
|
+
color: var(--shiki-dark) !important;
|
|
25
|
+
font-style: var(--shiki-dark-font-style) !important;
|
|
26
|
+
font-weight: var(--shiki-dark-font-weight) !important;
|
|
27
|
+
text-decoration: var(--shiki-dark-text-decoration) !important;
|
|
28
|
+
}
|
package/src/styles/variables.css
CHANGED
|
@@ -206,4 +206,64 @@
|
|
|
206
206
|
--jaamd-alert-caution-color: #cf222e;
|
|
207
207
|
--jaamd-alert-caution-bg: #ffebe9;
|
|
208
208
|
}
|
|
209
|
+
|
|
210
|
+
/* ── Dark mode overrides ─────────────────────────────────── */
|
|
211
|
+
|
|
212
|
+
html.dark {
|
|
213
|
+
--jaamd-color-fg: #c9d1d9;
|
|
214
|
+
--jaamd-color-fg-bright: #e6edf3;
|
|
215
|
+
--jaamd-color-primary: #c9d1d9;
|
|
216
|
+
--jaamd-color-primary-light: #8b949e;
|
|
217
|
+
|
|
218
|
+
--jaamd-heading-border-color: rgb(from var(--jaamd-color-primary) r g b / 0.3);
|
|
219
|
+
|
|
220
|
+
--jaamd-code-bg: #161b22;
|
|
221
|
+
--jaamd-code-border: #30363d;
|
|
222
|
+
--jaamd-code-fg: #e6edf3;
|
|
223
|
+
|
|
224
|
+
--jaamd-pre-bg: #161b22;
|
|
225
|
+
--jaamd-pre-border: #30363d;
|
|
226
|
+
--jaamd-pre-fg: #c9d1d9;
|
|
227
|
+
|
|
228
|
+
--jaamd-copy-btn-bg: #21262d;
|
|
229
|
+
--jaamd-copy-btn-border: #30363d;
|
|
230
|
+
--jaamd-copy-btn-fg: #c9d1d9;
|
|
231
|
+
--jaamd-copy-btn-hover-bg: #30363d;
|
|
232
|
+
--jaamd-copy-btn-hover-border: #484f58;
|
|
233
|
+
--jaamd-copy-btn-hover-fg: #e6edf3;
|
|
234
|
+
|
|
235
|
+
--jaamd-blockquote-bg: #161b22;
|
|
236
|
+
--jaamd-blockquote-border: #484f58;
|
|
237
|
+
--jaamd-blockquote-fg: #8b949e;
|
|
238
|
+
|
|
239
|
+
--jaamd-em-fg: #8b949e;
|
|
240
|
+
--jaamd-hr-color: rgb(from var(--jaamd-color-primary) r g b / 0.3);
|
|
241
|
+
|
|
242
|
+
--jaamd-table-border: #30363d;
|
|
243
|
+
--jaamd-table-header-bg: #161b22;
|
|
244
|
+
--jaamd-table-hover-bg: #1c2128;
|
|
245
|
+
|
|
246
|
+
--jaamd-tabs-border: #30363d;
|
|
247
|
+
--jaamd-tabs-header-bg: #1c2128;
|
|
248
|
+
--jaamd-tabs-btn-hover-bg: #21262d;
|
|
249
|
+
--jaamd-tabs-btn-active-bg: #161b22;
|
|
250
|
+
|
|
251
|
+
--jaamd-details-bg: #161b22;
|
|
252
|
+
--jaamd-details-border: #30363d;
|
|
253
|
+
|
|
254
|
+
--jaamd-spoiler-hidden-color: #e6edf3;
|
|
255
|
+
--jaamd-spoiler-revealed-bg: #161b22;
|
|
256
|
+
--jaamd-spoiler-revealed-fg: #c9d1d9;
|
|
257
|
+
|
|
258
|
+
--jaamd-alert-note-color: #58a6ff;
|
|
259
|
+
--jaamd-alert-note-bg: rgba(56, 139, 253, 0.1);
|
|
260
|
+
--jaamd-alert-tip-color: #3fb950;
|
|
261
|
+
--jaamd-alert-tip-bg: rgba(46, 160, 67, 0.1);
|
|
262
|
+
--jaamd-alert-important-color: #a371f7;
|
|
263
|
+
--jaamd-alert-important-bg: rgba(163, 113, 247, 0.1);
|
|
264
|
+
--jaamd-alert-warning-color: #d29922;
|
|
265
|
+
--jaamd-alert-warning-bg: rgba(187, 128, 9, 0.1);
|
|
266
|
+
--jaamd-alert-caution-color: #f85149;
|
|
267
|
+
--jaamd-alert-caution-bg: rgba(248, 81, 73, 0.1);
|
|
268
|
+
}
|
|
209
269
|
}
|
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
/* ============================================================
|
|
2
|
+
* JAAMD Theme — Dracula
|
|
3
|
+
* Pairs with Shiki theme: "dracula" or "dracula-soft"
|
|
4
|
+
* ============================================================
|
|
5
|
+
*
|
|
6
|
+
* Import: @import "jaamd/themes/dracula/dark";
|
|
7
|
+
* import "jaamd/themes/dracula/dark";
|
|
8
|
+
* ============================================================ */
|
|
9
|
+
|
|
10
|
+
html.dark {
|
|
11
|
+
--jaamd-color-fg: #f8f8f2;
|
|
12
|
+
--jaamd-color-fg-bright: #ffffff;
|
|
13
|
+
--jaamd-color-primary: #bd93f9;
|
|
14
|
+
--jaamd-color-primary-light: #ff79c6;
|
|
15
|
+
|
|
16
|
+
--jaamd-heading-border-color: rgba(189, 147, 249, 0.3);
|
|
17
|
+
|
|
18
|
+
--jaamd-code-bg: #44475a;
|
|
19
|
+
--jaamd-code-border: #6272a4;
|
|
20
|
+
--jaamd-code-fg: #f8f8f2;
|
|
21
|
+
|
|
22
|
+
--jaamd-pre-bg: #282a36;
|
|
23
|
+
--jaamd-pre-border: #44475a;
|
|
24
|
+
--jaamd-pre-fg: #f8f8f2;
|
|
25
|
+
|
|
26
|
+
--jaamd-copy-btn-bg: #44475a;
|
|
27
|
+
--jaamd-copy-btn-border: #6272a4;
|
|
28
|
+
--jaamd-copy-btn-fg: #f8f8f2;
|
|
29
|
+
--jaamd-copy-btn-hover-bg: #6272a4;
|
|
30
|
+
--jaamd-copy-btn-hover-border: #bd93f9;
|
|
31
|
+
--jaamd-copy-btn-hover-fg: #ffffff;
|
|
32
|
+
|
|
33
|
+
--jaamd-blockquote-bg: #282a36;
|
|
34
|
+
--jaamd-blockquote-border: #6272a4;
|
|
35
|
+
--jaamd-blockquote-fg: #6272a4;
|
|
36
|
+
|
|
37
|
+
--jaamd-em-fg: #8be9fd;
|
|
38
|
+
--jaamd-hr-color: rgba(189, 147, 249, 0.3);
|
|
39
|
+
|
|
40
|
+
--jaamd-table-border: #44475a;
|
|
41
|
+
--jaamd-table-header-bg: #282a36;
|
|
42
|
+
--jaamd-table-hover-bg: #44475a;
|
|
43
|
+
|
|
44
|
+
--jaamd-tabs-border: #44475a;
|
|
45
|
+
--jaamd-tabs-header-bg: #21222c;
|
|
46
|
+
--jaamd-tabs-btn-hover-bg: #44475a;
|
|
47
|
+
--jaamd-tabs-btn-active-bg: #282a36;
|
|
48
|
+
|
|
49
|
+
--jaamd-details-bg: #282a36;
|
|
50
|
+
--jaamd-details-border: #44475a;
|
|
51
|
+
|
|
52
|
+
--jaamd-spoiler-hidden-color: #f8f8f2;
|
|
53
|
+
--jaamd-spoiler-revealed-bg: #44475a;
|
|
54
|
+
--jaamd-spoiler-revealed-fg: #f8f8f2;
|
|
55
|
+
|
|
56
|
+
--jaamd-alert-note-color: #8be9fd;
|
|
57
|
+
--jaamd-alert-note-bg: rgba(139, 233, 253, 0.1);
|
|
58
|
+
--jaamd-alert-tip-color: #50fa7b;
|
|
59
|
+
--jaamd-alert-tip-bg: rgba(80, 250, 123, 0.1);
|
|
60
|
+
--jaamd-alert-important-color: #bd93f9;
|
|
61
|
+
--jaamd-alert-important-bg: rgba(189, 147, 249, 0.1);
|
|
62
|
+
--jaamd-alert-warning-color: #f1fa8c;
|
|
63
|
+
--jaamd-alert-warning-bg: rgba(241, 250, 140, 0.1);
|
|
64
|
+
--jaamd-alert-caution-color: #ff5555;
|
|
65
|
+
--jaamd-alert-caution-bg: rgba(255, 85, 85, 0.1);
|
|
66
|
+
}
|
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
/* ============================================================
|
|
2
|
+
* JAAMD Theme — Dracula
|
|
3
|
+
* Pairs with Shiki theme: "dracula" or "dracula-soft"
|
|
4
|
+
* ============================================================
|
|
5
|
+
*
|
|
6
|
+
* Import: @import "jaamd/themes/dracula";
|
|
7
|
+
* import "jaamd/themes/dracula";
|
|
8
|
+
* ============================================================ */
|
|
9
|
+
|
|
10
|
+
:root {
|
|
11
|
+
--jaamd-color-fg: #f8f8f2;
|
|
12
|
+
--jaamd-color-fg-bright: #ffffff;
|
|
13
|
+
--jaamd-color-primary: #bd93f9;
|
|
14
|
+
--jaamd-color-primary-light: #ff79c6;
|
|
15
|
+
|
|
16
|
+
--jaamd-heading-border-color: rgba(189, 147, 249, 0.3);
|
|
17
|
+
|
|
18
|
+
--jaamd-code-bg: #44475a;
|
|
19
|
+
--jaamd-code-border: #6272a4;
|
|
20
|
+
--jaamd-code-fg: #f8f8f2;
|
|
21
|
+
|
|
22
|
+
--jaamd-pre-bg: #282a36;
|
|
23
|
+
--jaamd-pre-border: #44475a;
|
|
24
|
+
--jaamd-pre-fg: #f8f8f2;
|
|
25
|
+
|
|
26
|
+
--jaamd-copy-btn-bg: #44475a;
|
|
27
|
+
--jaamd-copy-btn-border: #6272a4;
|
|
28
|
+
--jaamd-copy-btn-fg: #f8f8f2;
|
|
29
|
+
--jaamd-copy-btn-hover-bg: #6272a4;
|
|
30
|
+
--jaamd-copy-btn-hover-border: #bd93f9;
|
|
31
|
+
--jaamd-copy-btn-hover-fg: #ffffff;
|
|
32
|
+
|
|
33
|
+
--jaamd-blockquote-bg: #282a36;
|
|
34
|
+
--jaamd-blockquote-border: #6272a4;
|
|
35
|
+
--jaamd-blockquote-fg: #6272a4;
|
|
36
|
+
|
|
37
|
+
--jaamd-em-fg: #8be9fd;
|
|
38
|
+
--jaamd-hr-color: rgba(189, 147, 249, 0.3);
|
|
39
|
+
|
|
40
|
+
--jaamd-table-border: #44475a;
|
|
41
|
+
--jaamd-table-header-bg: #282a36;
|
|
42
|
+
--jaamd-table-hover-bg: #44475a;
|
|
43
|
+
|
|
44
|
+
--jaamd-tabs-border: #44475a;
|
|
45
|
+
--jaamd-tabs-header-bg: #21222c;
|
|
46
|
+
--jaamd-tabs-btn-hover-bg: #44475a;
|
|
47
|
+
--jaamd-tabs-btn-active-bg: #282a36;
|
|
48
|
+
|
|
49
|
+
--jaamd-details-bg: #282a36;
|
|
50
|
+
--jaamd-details-border: #44475a;
|
|
51
|
+
|
|
52
|
+
--jaamd-spoiler-hidden-color: #f8f8f2;
|
|
53
|
+
--jaamd-spoiler-revealed-bg: #44475a;
|
|
54
|
+
--jaamd-spoiler-revealed-fg: #f8f8f2;
|
|
55
|
+
|
|
56
|
+
--jaamd-alert-note-color: #8be9fd;
|
|
57
|
+
--jaamd-alert-note-bg: rgba(139, 233, 253, 0.1);
|
|
58
|
+
--jaamd-alert-tip-color: #50fa7b;
|
|
59
|
+
--jaamd-alert-tip-bg: rgba(80, 250, 123, 0.1);
|
|
60
|
+
--jaamd-alert-important-color: #bd93f9;
|
|
61
|
+
--jaamd-alert-important-bg: rgba(189, 147, 249, 0.1);
|
|
62
|
+
--jaamd-alert-warning-color: #f1fa8c;
|
|
63
|
+
--jaamd-alert-warning-bg: rgba(241, 250, 140, 0.1);
|
|
64
|
+
--jaamd-alert-caution-color: #ff5555;
|
|
65
|
+
--jaamd-alert-caution-bg: rgba(255, 85, 85, 0.1);
|
|
66
|
+
}
|
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
/* ============================================================
|
|
2
|
+
* JAAMD Theme — Nord
|
|
3
|
+
* Pairs with Shiki theme: "nord"
|
|
4
|
+
* ============================================================
|
|
5
|
+
*
|
|
6
|
+
* Import: @import "jaamd/themes/nord/dark";
|
|
7
|
+
* import "jaamd/themes/nord/dark";
|
|
8
|
+
* ============================================================ */
|
|
9
|
+
|
|
10
|
+
html.dark {
|
|
11
|
+
--jaamd-color-fg: #d8dee9;
|
|
12
|
+
--jaamd-color-fg-bright: #eceff4;
|
|
13
|
+
--jaamd-color-primary: #88c0d0;
|
|
14
|
+
--jaamd-color-primary-light: #81a1c1;
|
|
15
|
+
|
|
16
|
+
--jaamd-heading-border-color: rgba(136, 192, 208, 0.3);
|
|
17
|
+
|
|
18
|
+
--jaamd-code-bg: #3b4252;
|
|
19
|
+
--jaamd-code-border: #4c566a;
|
|
20
|
+
--jaamd-code-fg: #eceff4;
|
|
21
|
+
|
|
22
|
+
--jaamd-pre-bg: #2e3440;
|
|
23
|
+
--jaamd-pre-border: #3b4252;
|
|
24
|
+
--jaamd-pre-fg: #d8dee9;
|
|
25
|
+
|
|
26
|
+
--jaamd-copy-btn-bg: #3b4252;
|
|
27
|
+
--jaamd-copy-btn-border: #4c566a;
|
|
28
|
+
--jaamd-copy-btn-fg: #d8dee9;
|
|
29
|
+
--jaamd-copy-btn-hover-bg: #4c566a;
|
|
30
|
+
--jaamd-copy-btn-hover-border: #88c0d0;
|
|
31
|
+
--jaamd-copy-btn-hover-fg: #eceff4;
|
|
32
|
+
|
|
33
|
+
--jaamd-blockquote-bg: #2e3440;
|
|
34
|
+
--jaamd-blockquote-border: #4c566a;
|
|
35
|
+
--jaamd-blockquote-fg: #81a1c1;
|
|
36
|
+
|
|
37
|
+
--jaamd-em-fg: #88c0d0;
|
|
38
|
+
--jaamd-hr-color: rgba(136, 192, 208, 0.3);
|
|
39
|
+
|
|
40
|
+
--jaamd-table-border: #3b4252;
|
|
41
|
+
--jaamd-table-header-bg: #2e3440;
|
|
42
|
+
--jaamd-table-hover-bg: #3b4252;
|
|
43
|
+
|
|
44
|
+
--jaamd-tabs-border: #3b4252;
|
|
45
|
+
--jaamd-tabs-header-bg: #2e3440;
|
|
46
|
+
--jaamd-tabs-btn-hover-bg: #3b4252;
|
|
47
|
+
--jaamd-tabs-btn-active-bg: #2e3440;
|
|
48
|
+
|
|
49
|
+
--jaamd-details-bg: #2e3440;
|
|
50
|
+
--jaamd-details-border: #3b4252;
|
|
51
|
+
|
|
52
|
+
--jaamd-spoiler-hidden-color: #eceff4;
|
|
53
|
+
--jaamd-spoiler-revealed-bg: #3b4252;
|
|
54
|
+
--jaamd-spoiler-revealed-fg: #d8dee9;
|
|
55
|
+
|
|
56
|
+
--jaamd-alert-note-color: #81a1c1;
|
|
57
|
+
--jaamd-alert-note-bg: rgba(129, 161, 193, 0.1);
|
|
58
|
+
--jaamd-alert-tip-color: #a3be8c;
|
|
59
|
+
--jaamd-alert-tip-bg: rgba(163, 190, 140, 0.1);
|
|
60
|
+
--jaamd-alert-important-color: #b48ead;
|
|
61
|
+
--jaamd-alert-important-bg: rgba(180, 142, 173, 0.1);
|
|
62
|
+
--jaamd-alert-warning-color: #ebcb8b;
|
|
63
|
+
--jaamd-alert-warning-bg: rgba(235, 203, 139, 0.1);
|
|
64
|
+
--jaamd-alert-caution-color: #bf616a;
|
|
65
|
+
--jaamd-alert-caution-bg: rgba(191, 97, 106, 0.1);
|
|
66
|
+
}
|
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
/* ============================================================
|
|
2
|
+
* JAAMD Theme — Nord
|
|
3
|
+
* Pairs with Shiki theme: "nord"
|
|
4
|
+
* ============================================================
|
|
5
|
+
*
|
|
6
|
+
* Import: @import "jaamd/themes/nord";
|
|
7
|
+
* import "jaamd/themes/nord";
|
|
8
|
+
* ============================================================ */
|
|
9
|
+
|
|
10
|
+
:root {
|
|
11
|
+
--jaamd-color-fg: #d8dee9;
|
|
12
|
+
--jaamd-color-fg-bright: #eceff4;
|
|
13
|
+
--jaamd-color-primary: #88c0d0;
|
|
14
|
+
--jaamd-color-primary-light: #81a1c1;
|
|
15
|
+
|
|
16
|
+
--jaamd-heading-border-color: rgba(136, 192, 208, 0.3);
|
|
17
|
+
|
|
18
|
+
--jaamd-code-bg: #3b4252;
|
|
19
|
+
--jaamd-code-border: #4c566a;
|
|
20
|
+
--jaamd-code-fg: #eceff4;
|
|
21
|
+
|
|
22
|
+
--jaamd-pre-bg: #2e3440;
|
|
23
|
+
--jaamd-pre-border: #3b4252;
|
|
24
|
+
--jaamd-pre-fg: #d8dee9;
|
|
25
|
+
|
|
26
|
+
--jaamd-copy-btn-bg: #3b4252;
|
|
27
|
+
--jaamd-copy-btn-border: #4c566a;
|
|
28
|
+
--jaamd-copy-btn-fg: #d8dee9;
|
|
29
|
+
--jaamd-copy-btn-hover-bg: #4c566a;
|
|
30
|
+
--jaamd-copy-btn-hover-border: #88c0d0;
|
|
31
|
+
--jaamd-copy-btn-hover-fg: #eceff4;
|
|
32
|
+
|
|
33
|
+
--jaamd-blockquote-bg: #2e3440;
|
|
34
|
+
--jaamd-blockquote-border: #4c566a;
|
|
35
|
+
--jaamd-blockquote-fg: #81a1c1;
|
|
36
|
+
|
|
37
|
+
--jaamd-em-fg: #88c0d0;
|
|
38
|
+
--jaamd-hr-color: rgba(136, 192, 208, 0.3);
|
|
39
|
+
|
|
40
|
+
--jaamd-table-border: #3b4252;
|
|
41
|
+
--jaamd-table-header-bg: #2e3440;
|
|
42
|
+
--jaamd-table-hover-bg: #3b4252;
|
|
43
|
+
|
|
44
|
+
--jaamd-tabs-border: #3b4252;
|
|
45
|
+
--jaamd-tabs-header-bg: #2e3440;
|
|
46
|
+
--jaamd-tabs-btn-hover-bg: #3b4252;
|
|
47
|
+
--jaamd-tabs-btn-active-bg: #2e3440;
|
|
48
|
+
|
|
49
|
+
--jaamd-details-bg: #2e3440;
|
|
50
|
+
--jaamd-details-border: #3b4252;
|
|
51
|
+
|
|
52
|
+
--jaamd-spoiler-hidden-color: #eceff4;
|
|
53
|
+
--jaamd-spoiler-revealed-bg: #3b4252;
|
|
54
|
+
--jaamd-spoiler-revealed-fg: #d8dee9;
|
|
55
|
+
|
|
56
|
+
--jaamd-alert-note-color: #81a1c1;
|
|
57
|
+
--jaamd-alert-note-bg: rgba(129, 161, 193, 0.1);
|
|
58
|
+
--jaamd-alert-tip-color: #a3be8c;
|
|
59
|
+
--jaamd-alert-tip-bg: rgba(163, 190, 140, 0.1);
|
|
60
|
+
--jaamd-alert-important-color: #b48ead;
|
|
61
|
+
--jaamd-alert-important-bg: rgba(180, 142, 173, 0.1);
|
|
62
|
+
--jaamd-alert-warning-color: #ebcb8b;
|
|
63
|
+
--jaamd-alert-warning-bg: rgba(235, 203, 139, 0.1);
|
|
64
|
+
--jaamd-alert-caution-color: #bf616a;
|
|
65
|
+
--jaamd-alert-caution-bg: rgba(191, 97, 106, 0.1);
|
|
66
|
+
}
|
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
/* ============================================================
|
|
2
|
+
* JAAMD Theme — One Dark
|
|
3
|
+
* Pairs with Shiki theme: "one-dark-pro"
|
|
4
|
+
* ============================================================
|
|
5
|
+
*
|
|
6
|
+
* Import: @import "jaamd/themes/one-dark/dark";
|
|
7
|
+
* import "jaamd/themes/one-dark/dark";
|
|
8
|
+
* ============================================================ */
|
|
9
|
+
|
|
10
|
+
html.dark {
|
|
11
|
+
--jaamd-color-fg: #abb2bf;
|
|
12
|
+
--jaamd-color-fg-bright: #e6e6e6;
|
|
13
|
+
--jaamd-color-primary: #61afef;
|
|
14
|
+
--jaamd-color-primary-light: #56b6c2;
|
|
15
|
+
|
|
16
|
+
--jaamd-heading-border-color: rgba(97, 175, 239, 0.3);
|
|
17
|
+
|
|
18
|
+
--jaamd-code-bg: #2c313c;
|
|
19
|
+
--jaamd-code-border: #3e4451;
|
|
20
|
+
--jaamd-code-fg: #e6e6e6;
|
|
21
|
+
|
|
22
|
+
--jaamd-pre-bg: #282c34;
|
|
23
|
+
--jaamd-pre-border: #2c313c;
|
|
24
|
+
--jaamd-pre-fg: #abb2bf;
|
|
25
|
+
|
|
26
|
+
--jaamd-copy-btn-bg: #2c313c;
|
|
27
|
+
--jaamd-copy-btn-border: #3e4451;
|
|
28
|
+
--jaamd-copy-btn-fg: #abb2bf;
|
|
29
|
+
--jaamd-copy-btn-hover-bg: #3e4451;
|
|
30
|
+
--jaamd-copy-btn-hover-border: #61afef;
|
|
31
|
+
--jaamd-copy-btn-hover-fg: #e6e6e6;
|
|
32
|
+
|
|
33
|
+
--jaamd-blockquote-bg: #2c313c;
|
|
34
|
+
--jaamd-blockquote-border: #3e4451;
|
|
35
|
+
--jaamd-blockquote-fg: #5c6370;
|
|
36
|
+
|
|
37
|
+
--jaamd-em-fg: #c678dd;
|
|
38
|
+
--jaamd-hr-color: rgba(97, 175, 239, 0.3);
|
|
39
|
+
|
|
40
|
+
--jaamd-table-border: #2c313c;
|
|
41
|
+
--jaamd-table-header-bg: #21252b;
|
|
42
|
+
--jaamd-table-hover-bg: #2c313c;
|
|
43
|
+
|
|
44
|
+
--jaamd-tabs-border: #2c313c;
|
|
45
|
+
--jaamd-tabs-header-bg: #21252b;
|
|
46
|
+
--jaamd-tabs-btn-hover-bg: #2c313c;
|
|
47
|
+
--jaamd-tabs-btn-active-bg: #282c34;
|
|
48
|
+
|
|
49
|
+
--jaamd-details-bg: #2c313c;
|
|
50
|
+
--jaamd-details-border: #3e4451;
|
|
51
|
+
|
|
52
|
+
--jaamd-spoiler-hidden-color: #e6e6e6;
|
|
53
|
+
--jaamd-spoiler-revealed-bg: #2c313c;
|
|
54
|
+
--jaamd-spoiler-revealed-fg: #abb2bf;
|
|
55
|
+
|
|
56
|
+
--jaamd-alert-note-color: #61afef;
|
|
57
|
+
--jaamd-alert-note-bg: rgba(97, 175, 239, 0.1);
|
|
58
|
+
--jaamd-alert-tip-color: #98c379;
|
|
59
|
+
--jaamd-alert-tip-bg: rgba(152, 195, 121, 0.1);
|
|
60
|
+
--jaamd-alert-important-color: #c678dd;
|
|
61
|
+
--jaamd-alert-important-bg: rgba(198, 120, 221, 0.1);
|
|
62
|
+
--jaamd-alert-warning-color: #e5c07b;
|
|
63
|
+
--jaamd-alert-warning-bg: rgba(229, 192, 123, 0.1);
|
|
64
|
+
--jaamd-alert-caution-color: #e06c75;
|
|
65
|
+
--jaamd-alert-caution-bg: rgba(224, 108, 117, 0.1);
|
|
66
|
+
}
|
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
/* ============================================================
|
|
2
|
+
* JAAMD Theme — One Dark
|
|
3
|
+
* Pairs with Shiki theme: "one-dark-pro"
|
|
4
|
+
* ============================================================
|
|
5
|
+
*
|
|
6
|
+
* Import: @import "jaamd/themes/one-dark";
|
|
7
|
+
* import "jaamd/themes/one-dark";
|
|
8
|
+
* ============================================================ */
|
|
9
|
+
|
|
10
|
+
:root {
|
|
11
|
+
--jaamd-color-fg: #abb2bf;
|
|
12
|
+
--jaamd-color-fg-bright: #e6e6e6;
|
|
13
|
+
--jaamd-color-primary: #61afef;
|
|
14
|
+
--jaamd-color-primary-light: #56b6c2;
|
|
15
|
+
|
|
16
|
+
--jaamd-heading-border-color: rgba(97, 175, 239, 0.3);
|
|
17
|
+
|
|
18
|
+
--jaamd-code-bg: #2c313c;
|
|
19
|
+
--jaamd-code-border: #3e4451;
|
|
20
|
+
--jaamd-code-fg: #e6e6e6;
|
|
21
|
+
|
|
22
|
+
--jaamd-pre-bg: #282c34;
|
|
23
|
+
--jaamd-pre-border: #2c313c;
|
|
24
|
+
--jaamd-pre-fg: #abb2bf;
|
|
25
|
+
|
|
26
|
+
--jaamd-copy-btn-bg: #2c313c;
|
|
27
|
+
--jaamd-copy-btn-border: #3e4451;
|
|
28
|
+
--jaamd-copy-btn-fg: #abb2bf;
|
|
29
|
+
--jaamd-copy-btn-hover-bg: #3e4451;
|
|
30
|
+
--jaamd-copy-btn-hover-border: #61afef;
|
|
31
|
+
--jaamd-copy-btn-hover-fg: #e6e6e6;
|
|
32
|
+
|
|
33
|
+
--jaamd-blockquote-bg: #2c313c;
|
|
34
|
+
--jaamd-blockquote-border: #3e4451;
|
|
35
|
+
--jaamd-blockquote-fg: #5c6370;
|
|
36
|
+
|
|
37
|
+
--jaamd-em-fg: #c678dd;
|
|
38
|
+
--jaamd-hr-color: rgba(97, 175, 239, 0.3);
|
|
39
|
+
|
|
40
|
+
--jaamd-table-border: #2c313c;
|
|
41
|
+
--jaamd-table-header-bg: #21252b;
|
|
42
|
+
--jaamd-table-hover-bg: #2c313c;
|
|
43
|
+
|
|
44
|
+
--jaamd-tabs-border: #2c313c;
|
|
45
|
+
--jaamd-tabs-header-bg: #21252b;
|
|
46
|
+
--jaamd-tabs-btn-hover-bg: #2c313c;
|
|
47
|
+
--jaamd-tabs-btn-active-bg: #282c34;
|
|
48
|
+
|
|
49
|
+
--jaamd-details-bg: #2c313c;
|
|
50
|
+
--jaamd-details-border: #3e4451;
|
|
51
|
+
|
|
52
|
+
--jaamd-spoiler-hidden-color: #e6e6e6;
|
|
53
|
+
--jaamd-spoiler-revealed-bg: #2c313c;
|
|
54
|
+
--jaamd-spoiler-revealed-fg: #abb2bf;
|
|
55
|
+
|
|
56
|
+
--jaamd-alert-note-color: #61afef;
|
|
57
|
+
--jaamd-alert-note-bg: rgba(97, 175, 239, 0.1);
|
|
58
|
+
--jaamd-alert-tip-color: #98c379;
|
|
59
|
+
--jaamd-alert-tip-bg: rgba(152, 195, 121, 0.1);
|
|
60
|
+
--jaamd-alert-important-color: #c678dd;
|
|
61
|
+
--jaamd-alert-important-bg: rgba(198, 120, 221, 0.1);
|
|
62
|
+
--jaamd-alert-warning-color: #e5c07b;
|
|
63
|
+
--jaamd-alert-warning-bg: rgba(229, 192, 123, 0.1);
|
|
64
|
+
--jaamd-alert-caution-color: #e06c75;
|
|
65
|
+
--jaamd-alert-caution-bg: rgba(224, 108, 117, 0.1);
|
|
66
|
+
}
|