slidev-theme-the-unnamed 0.0.1

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 ADDED
@@ -0,0 +1,3 @@
1
+ # Slidev Theme - The unnamed
2
+
3
+ TBA
@@ -0,0 +1,45 @@
1
+ <!--
2
+ Usage:
3
+
4
+ <box left="430px" top="350px" width="330px" height="45px" borderColor="#44FFD2" borderWidth="5px" borderStyle="solid" />
5
+ -->
6
+
7
+ <script setup lang="ts">
8
+ import { computed } from 'vue';
9
+
10
+ const props = defineProps<{
11
+ x: number | string
12
+ y: number | string
13
+ backgroundColor?: string
14
+ borderColor?: string
15
+ borderStyle?: string
16
+ borderWidth?: string
17
+ width?: string
18
+ height?: string
19
+ title?: string
20
+ description?: string
21
+ textColor?: string
22
+ }>()
23
+
24
+ const style = computed(() => ({
25
+ 'width': props.width || `100px`,
26
+ 'height': props.height || `100px`,
27
+ 'top': props.y,
28
+ 'left': props.x,
29
+ 'background-color': props.backgroundColor || undefined,
30
+ 'border-color': props.borderColor || `#fff`,
31
+ 'border-width': props.borderWidth || `2px`,
32
+ 'border-style': props.borderStyle || `solid`,
33
+ 'color': props.textColor || undefined,
34
+ 'content': `' '`
35
+ }))
36
+ </script>
37
+
38
+ <template>
39
+ <div
40
+ class="absolute flex flex-col justify-center items-center text-base text-center p-4 space-y-2"
41
+ :style="style">
42
+ <h2 v-if="title">{{ title }}</h2>
43
+ <p v-if="description">{{ description }}</p>
44
+ </div>
45
+ </template>
@@ -0,0 +1,45 @@
1
+ <!--
2
+ Usage:
3
+
4
+ <circle left="430px" top="350px" width="330px" height="45px" borderColor="#44FFD2" borderWidth="5px" borderStyle="solid" />
5
+ -->
6
+
7
+ <script setup lang="ts">
8
+ import { computed } from 'vue';
9
+
10
+ const props = defineProps<{
11
+ x: number | string
12
+ y: number | string
13
+ backgroundColor?: string
14
+ borderColor?: string
15
+ borderStyle?: string
16
+ borderWidth?: string
17
+ width?: string
18
+ height?: string
19
+ title?: string
20
+ description?: string
21
+ textColor?: string
22
+ }>()
23
+
24
+ const style = computed(() => ({
25
+ 'width': props.width || `100px`,
26
+ 'height': props.height || `100px`,
27
+ 'top': props.y,
28
+ 'left': props.x,
29
+ 'background-color': props.backgroundColor || undefined,
30
+ 'border-color': props.borderColor || `#fff`,
31
+ 'border-width': props.borderWidth || `2px`,
32
+ 'border-style': props.borderStyle || `solid`,
33
+ 'color': props.textColor || undefined,
34
+ 'content': `' '`
35
+ }))
36
+ </script>
37
+
38
+ <template>
39
+ <div
40
+ class="absolute flex flex-col justify-center items-center rounded-full text-base text-center p-4 space-y-2"
41
+ :style="style">
42
+ <h2 v-if="title">{{ title }}</h2>
43
+ <p v-if="description">{{ description }}</p>
44
+ </div>
45
+ </template>
@@ -0,0 +1,48 @@
1
+ <!--
2
+ Example:
3
+
4
+ ---
5
+ clicks: 4
6
+ ---
7
+
8
+ # Common capabilities of extensions
9
+
10
+ - Registering commands, configurations, keybindings, or menus
11
+ - Storing workspace or global state
12
+ - Displaying notifications
13
+ - Collect user input
14
+ - Open files, folders, or URLs
15
+ - Theming
16
+ - Language features
17
+
18
+ <ShowHide show="1" hide="2">
19
+ Show on click 1, hide on 2, {{ $slidev.nav.clicks }}
20
+ </ShowHide>
21
+ <ShowHide show="2" hide="3">
22
+ Show on click 1, hide on 2, {{ $slidev.nav.clicks }}
23
+ </ShowHide>
24
+
25
+ -->
26
+
27
+
28
+ <script setup lang="ts">
29
+ import { ref, resolveDirective } from 'vue'
30
+
31
+ const props = defineProps({
32
+ show: {
33
+ type: Number,
34
+ default: null
35
+ },
36
+ hide: {
37
+ type: Number,
38
+ default: null
39
+ },
40
+ })
41
+
42
+ const show = ref(props.show)
43
+ const hide = ref(props.hide)
44
+ </script>
45
+
46
+ <template>
47
+ <slot v-if="$slidev.nav.clicks >= parseInt(show) && $slidev.nav.clicks < parseInt(hide)" />
48
+ </template>
package/example.md ADDED
@@ -0,0 +1,85 @@
1
+ ---
2
+ theme: ./
3
+ ---
4
+
5
+ # Slidev - The Unnamed
6
+
7
+ Created by [Elio Struyf](https://elio.dev)
8
+
9
+ ---
10
+
11
+ # What is Slidev?
12
+
13
+ Slidev is a slides maker and presenter designed for developers, consist of the following features
14
+
15
+ - 📝 **Text-based** - focus on the content with Markdown, and then style them later
16
+ - 🎨 **Themable** - theme can be shared and used with npm packages
17
+ - 🧑‍💻 **Developer Friendly** - code highlighting, live coding with autocompletion
18
+ - 🤹 **Interactive** - embedding Vue components to enhance your expressions
19
+ - 🎥 **Recording** - built-in recording and camera view
20
+ - 📤 **Portable** - export into PDF, PNGs, or even a hostable SPA
21
+ - 🛠 **Hackable** - anything possible on a webpage
22
+
23
+ <br>
24
+ <br>
25
+
26
+ Read more about [Why Slidev?](https://sli.dev/guide/why)
27
+
28
+
29
+ ---
30
+
31
+ # Navigation
32
+
33
+ Hover on the bottom-left corner to see the navigation's controls panel
34
+
35
+ ### Keyboard Shortcuts
36
+
37
+ | | |
38
+ | --- | --- |
39
+ | <kbd>space</kbd> / <kbd>tab</kbd> / <kbd>right</kbd> | next animation or slide |
40
+ | <kbd>left</kbd> / <kbd>shift</kbd><kbd>space</kbd> | previous animation or slide |
41
+ | <kbd>up</kbd> | previous slide |
42
+ | <kbd>down</kbd> | next slide |
43
+
44
+ ---
45
+ layout: image-right
46
+ image: 'https://source.unsplash.com/collection/94734566/1920x1080'
47
+ ---
48
+
49
+ # Code
50
+
51
+ Use code snippets and get the highlighting directly!
52
+
53
+ ```ts
54
+ interface User {
55
+ id: number
56
+ firstName: string
57
+ lastName: string
58
+ role: string
59
+ }
60
+
61
+ function updateUser(id: number, update: Partial<User>) {
62
+ const user = getUser(id)
63
+ const newUser = { ...user, ...update }
64
+ saveUser(id, newUser)
65
+ }
66
+ ```
67
+
68
+ ---
69
+ layout: center
70
+ class: "text-center"
71
+ ---
72
+
73
+ # Learn More
74
+
75
+ [Documentations](https://sli.dev) / [GitHub Repo](https://github.com/slidevjs/slidev)
76
+
77
+ ---
78
+ layout: flex
79
+ ---
80
+
81
+ # `flex` layout
82
+
83
+ The `flex` layout is similar to cover, but with a bit more space for the content. Opacity is set to `1`.
84
+
85
+ > **Info**: This is a note
@@ -0,0 +1,7 @@
1
+ <template>
2
+ <div class="slidev-layout cover">
3
+ <div class="my-auto w-full">
4
+ <slot />
5
+ </div>
6
+ </div>
7
+ </template>
@@ -0,0 +1,83 @@
1
+ <template>
2
+ <div class="flexBox">
3
+ <slot />
4
+ </div>
5
+ </template>
6
+
7
+ <style lang="postcss">
8
+ .flexBox {
9
+ display: flex;
10
+ flex-direction: column;
11
+ justify-content: center;
12
+
13
+ height: 100%;
14
+ font-size: 1.1rem;
15
+ line-height: 1;
16
+ padding-left: 3.5rem;
17
+ padding-right: 3.5rem;
18
+ padding-top: 2.5rem;
19
+ padding-bottom: 2.5rem;
20
+
21
+ h1 {
22
+ /* background: #15C2CB; */
23
+ display: inline-block;
24
+ padding: 0.25em;
25
+ color: #0F131E;
26
+ margin-bottom: 1em;
27
+ width: fit-content;
28
+ position: relative;
29
+
30
+ font-size: 2.25rem;
31
+ line-height: 2.5rem;
32
+ margin-left: -0.05em;
33
+
34
+ &::before {
35
+ content: " ";
36
+ display: block;
37
+ position: absolute;
38
+ width: calc(100%);
39
+ height: calc(100%);
40
+ margin-left: -0.25em;
41
+ margin-top: -0.25em;
42
+ background: #15C2CB;
43
+ z-index: -1;
44
+ transform: rotate(-1deg);
45
+ }
46
+
47
+ code {
48
+ background: transparent !important;
49
+ font-size: 2.25rem;
50
+ }
51
+ }
52
+
53
+ p {
54
+ font-size: 1.25rem;
55
+ margin-bottom: 1em;
56
+ line-height: 1.25em;
57
+ }
58
+
59
+ code {
60
+ font-size: 1.10rem;
61
+ }
62
+
63
+ blockquote {
64
+ display: flex;
65
+ align-items: center;
66
+ background: #0F131E;
67
+ color: #F3EFF5;
68
+ border-color: #F141A8;
69
+ border-left-width: 3px;
70
+ border-radius: 0.25rem;
71
+ font-size: 1.1em;
72
+ line-height: 1.25rem;
73
+ padding-left: 0.5rem;
74
+ padding-right: 0.5rem;
75
+ padding-top: 0.25rem;
76
+ padding-bottom: 0.25rem;
77
+
78
+ p {
79
+ margin-bottom: 0;
80
+ }
81
+ }
82
+ }
83
+ </style>
@@ -0,0 +1,7 @@
1
+ <template>
2
+ <div class="slidev-layout intro">
3
+ <div class="my-auto">
4
+ <slot />
5
+ </div>
6
+ </div>
7
+ </template>
package/package.json ADDED
@@ -0,0 +1,32 @@
1
+ {
2
+ "name": "slidev-theme-the-unnamed",
3
+ "version": "0.0.1",
4
+ "keywords": [
5
+ "slidev-theme",
6
+ "slidev"
7
+ ],
8
+ "engines": {
9
+ "node": ">=14.0.0",
10
+ "slidev": ">=0.19.3"
11
+ },
12
+ "scripts": {
13
+ "build": "slidev build example.md",
14
+ "dev": "slidev example.md",
15
+ "export": "slidev export example.md",
16
+ "screenshot": "slidev export example.md --format png"
17
+ },
18
+ "dependencies": {
19
+ "@slidev/types": "^0.39.0",
20
+ "codemirror-theme-vars": "^0.1.1",
21
+ "prism-theme-vars": "^0.2.4",
22
+ "theme-vitesse": "^0.6.2"
23
+ },
24
+ "devDependencies": {
25
+ "@slidev/cli": "^0.39.0"
26
+ },
27
+ "//": "Learn more: https://sli.dev/themes/write-a-theme.html",
28
+ "slidev": {
29
+ "colorSchema": "dark",
30
+ "highlighter": "shiki"
31
+ }
32
+ }
@@ -0,0 +1,803 @@
1
+ {
2
+ "$schema": "vscode://schemas/color-theme",
3
+ "name": "The unnamed",
4
+ "type": "dark",
5
+ "colors": {
6
+ "foreground": "#F3EFF5",
7
+ "focusBorder": "#263354",
8
+ "progressBar.background": "#ed1292",
9
+ "selection.background": "#F3EFF550",
10
+ "scrollbar.shadow": "#0E131F",
11
+ "activityBar.foreground": "#F3EFF5",
12
+ "activityBar.activeBorder": "#ed1292",
13
+ "activityBar.activeFocusBorder": "#d61084",
14
+ "activityBar.background": "#0E131F",
15
+ "activityBar.inactiveForeground": "#F3EFF566",
16
+ "activityBar.activeBackground": "#ffffff00",
17
+ "activityBar.border": "#242d34",
18
+ "activityBarBadge.background": "#ed1292",
19
+ "activityBarBadge.foreground": "#F3EFF5",
20
+ "sideBar.background": "#141c2d",
21
+ "sideBar.foreground": "#f3eff5cc",
22
+ "sideBar.border": "#242d34",
23
+ "sideBarSectionHeader.background": "#0d1217",
24
+ "sideBarSectionHeader.border": "#212c36",
25
+ "sideBarSectionHeader.foreground": "#f3eff5cc",
26
+ "list.activeSelectionBackground": "#f3eff533",
27
+ "list.activeSelectionForeground": "#F3EFF5",
28
+ "list.inactiveSelectionBackground": "#f3eff522",
29
+ "list.inactiveSelectionForeground": "#f3eff5cc",
30
+ "list.inactiveFocusOutline": "#f3eff522",
31
+ "list.focusOutline": "#f3eff533",
32
+ "list.hoverBackground": "#f3eff522",
33
+ "tree.indentGuidesStroke": "#f3eff566",
34
+ "list.highlightForeground": "#15C2CB",
35
+ "listFilterWidget.background": "#760949",
36
+ "listFilterWidget.noMatchesOutline": "#FE4A49",
37
+ "statusBar.foreground": "#f3eff5cc",
38
+ "statusBar.background": "#0E131F",
39
+ "statusBar.border": "#212c36",
40
+ "statusBar.debuggingBackground": "#FE4A49",
41
+ "statusBar.debuggingForeground": "#0E131F",
42
+ "statusBar.noFolderBackground": "#760949",
43
+ "statusBarItem.remoteBackground": "#ed1292",
44
+ "titleBar.activeBackground": "#0E131F",
45
+ "titleBar.activeForeground": "#F3EFF5",
46
+ "titleBar.border": "#212c36",
47
+ "titleBar.inactiveBackground": "#0c111b",
48
+ "titleBar.inactiveForeground": "#f3eff580",
49
+ "button.background": "#15C2CB",
50
+ "button.foreground": "#0E131F",
51
+ "button.hoverBackground": "#59E6EE",
52
+ "textLink.foreground": "#46a1f0",
53
+ "button.secondaryBackground": "#f3eff533",
54
+ "button.secondaryForeground": "#F3EFF5",
55
+ "button.secondaryHoverBackground": "#f3eff520",
56
+ "input.background": "#0d1217",
57
+ "input.foreground": "#F3EFF5",
58
+ "inputOption.activeBackground": "#ed12924d",
59
+ "inputOption.activeBorder": "#ed129200",
60
+ "tab.activeBackground": "#0E131F",
61
+ "tab.activeForeground": "#ffffff",
62
+ "tab.border": "#212c36",
63
+ "tab.inactiveBackground": "#141c2d",
64
+ "tab.inactiveForeground": "#f3eff5cc",
65
+ "editorStickyScroll.background": "#242d34",
66
+ "menu.border": "#212c36",
67
+ "notifications.background": "#141c2d",
68
+ "notifications.foreground": "#F3EFF5",
69
+ "notifications.border": "#212c36",
70
+ "notificationToast.border": "#212c36",
71
+ "notificationCenter.border": "#212c36",
72
+ "notificationsErrorIcon.foreground": "#FE4A49",
73
+ "notificationsWarningIcon.foreground": "#FFE45E",
74
+ "notificationsInfoIcon.foreground": "#5EADF2",
75
+ "notificationCenterHeader.foreground": "#F3EFF5",
76
+ "notificationCenterHeader.background": "#0e131f",
77
+ "gitDecoration.addedResourceForeground": "#44FFD2cc",
78
+ "gitDecoration.untrackedResourceForeground": "#44FFD2cc",
79
+ "gitDecoration.deletedResourceForeground": "#FE4A49cc",
80
+ "gitDecoration.stageDeletedResourceForeground": "#FE4A49cc",
81
+ "gitDecoration.modifiedResourceForeground": "#ffe45ecc",
82
+ "gitDecoration.stageModifiedResourceForeground": "#ffe45ecc",
83
+ "gitDecoration.submoduleResourceForeground": "#5EADF2cc",
84
+ "badge.background": "#ed1292",
85
+ "badge.foreground": "#F3EFF5",
86
+ "breadcrumb.foreground": "#aaaaaa",
87
+ "editorGroupHeader.tabsBackground": "#141c2d",
88
+ "editorGroupHeader.tabsBorder": "#212c36",
89
+ "quickInput.background": "#141c2d",
90
+ "editor.background": "#0E131F",
91
+ "editor.foreground": "#F3EFF5",
92
+ "editorCursor.foreground": "#44FFD2",
93
+ "editorLineNumber.activeForeground": "#F3EFF5",
94
+ "editorLineNumber.foreground": "#f3eff5b3",
95
+ "editor.lineHighlightBackground": "#242d34",
96
+ "editor.lineHighlightBorder": "#242d34",
97
+ "editor.selectionBackground": "#F3EFF533",
98
+ "editor.selectionForeground": "#F3EFF5",
99
+ "editor.findMatchHighlightBackground": "#ed129266",
100
+ "editor.findMatchBorder": "#ed129299",
101
+ "editor.findMatchBackground": "#ed129280",
102
+ "editorError.foreground": "#FE4A49",
103
+ "editorWarning.foreground": "#FFE45E",
104
+ "editorInfo.foreground": "#5EADF2",
105
+ "editorOverviewRuler.findMatchForeground": "#ed1292",
106
+ "editorMarkerNavigation.background": "#141c2d",
107
+ "editorMarkerNavigationError.background": "#FE4A49",
108
+ "editorMarkerNavigationWarning.background": "#FFE45E",
109
+ "editorMarkerNavigationInfo.background": "#5EADF2",
110
+ "merge.currentHeaderBackground": "#005C65",
111
+ "merge.currentContentBackground": "#00434C",
112
+ "merge.incomingHeaderBackground": "#474F60",
113
+ "merge.incomingContentBackground": "#2E3647",
114
+ "merge.commonContentBackground": "#414652",
115
+ "merge.commonHeaderBackground": "#282D39",
116
+ "editorSuggestWidget.background": "#141c2d",
117
+ "editorSuggestWidget.border": "#212c36",
118
+ "editorSuggestWidget.foreground": "#F3EFF5",
119
+ "editorSuggestWidget.highlightForeground": "#15C2CB",
120
+ "editorHoverWidget.background": "#141c2d",
121
+ "editorHoverWidget.foreground": "#F3EFF5",
122
+ "editorHoverWidget.border": "#212c36",
123
+ "peekView.border": "#5EADF2",
124
+ "peekViewEditor.background": "#141c2d",
125
+ "peekViewEditorGutter.background": "#141c2d",
126
+ "peekViewResult.background": "#0E131F",
127
+ "peekViewResult.fileForeground": "#F3EFF5",
128
+ "peekViewResult.lineForeground": "#F3EFF5",
129
+ "peekViewEditor.matchHighlightBackground": "#ed129299",
130
+ "peekViewResult.selectionBackground": "#F3EFF550",
131
+ "peekViewTitle.background": "#0E131F",
132
+ "debugToolBar.background": "#1e2942",
133
+ "debugToolBar.border": "#3E474E",
134
+ "dropdown.background": "#141c2d",
135
+ "dropdown.border": "#242d34",
136
+ "debugIcon.breakpointForeground": "#FE4A49",
137
+ "editorWidget.background": "#141c2d",
138
+ "editorWidget.border": "#212c36",
139
+ "terminal.border": "#212c36",
140
+ "terminal.background": "#0E131F",
141
+ "terminal.foreground": "#F3EFF5",
142
+ "terminal.ansiBlack": "#141c2d",
143
+ "terminal.ansiRed": "#fe4a49",
144
+ "terminal.ansiGreen": "#11ffc6",
145
+ "terminal.ansiYellow": "#f5cc00",
146
+ "terminal.ansiBlue": "#46a1f0",
147
+ "terminal.ansiMagenta": "#ed1292",
148
+ "terminal.ansiCyan": "#0accd6",
149
+ "terminal.ansiWhite": "#dad6dc",
150
+ "terminal.ansiBrightBlack": "#676965",
151
+ "terminal.ansiBrightRed": "#fe6362",
152
+ "terminal.ansiBrightGreen": "#44ffd2",
153
+ "terminal.ansiBrightYellow": "#ffe45e",
154
+ "terminal.ansiBrightBlue": "#5eadf2",
155
+ "terminal.ansiBrightMagenta": "#f141a8",
156
+ "terminal.ansiBrightCyan": "#15c2cb",
157
+ "terminal.ansiBrightWhite": "#f3eff5"
158
+ },
159
+ "tokenColors": [
160
+ {
161
+ "scope": [
162
+ "meta.paragraph.markdown",
163
+ "string.other.link.description.title.markdown"
164
+ ],
165
+ "settings": {
166
+ "foreground": "#EEFFFF"
167
+ }
168
+ },
169
+ {
170
+ "scope": [
171
+ "entity.name.section.markdown",
172
+ "punctuation.definition.heading.markdown"
173
+ ],
174
+ "settings": {
175
+ "foreground": "#F141A8"
176
+ }
177
+ },
178
+ {
179
+ "scope": [
180
+ "punctuation.definition.string.begin.markdown",
181
+ "punctuation.definition.string.end.markdown",
182
+ "markup.quote.markdown"
183
+ ],
184
+ "settings": {
185
+ "foreground": "#11ffc6"
186
+ }
187
+ },
188
+ {
189
+ "scope": [
190
+ "markup.quote.markdown"
191
+ ],
192
+ "settings": {
193
+ "fontStyle": "italic",
194
+ "foreground": "#11ffc6"
195
+ }
196
+ },
197
+ {
198
+ "scope": [
199
+ "markup.bold.markdown",
200
+ "punctuation.definition.bold.markdown"
201
+ ],
202
+ "settings": {
203
+ "fontStyle": "bold",
204
+ "foreground": "#5EADF2"
205
+ }
206
+ },
207
+ {
208
+ "scope": [
209
+ "markup.italic.markdown",
210
+ "punctuation.definition.italic.markdown"
211
+ ],
212
+ "settings": {
213
+ "fontStyle": "italic",
214
+ "foreground": "#fe6362"
215
+ }
216
+ },
217
+ {
218
+ "scope": [
219
+ "markup.inline.raw.string.markdown",
220
+ "markup.fenced_code.block.markdown"
221
+ ],
222
+ "settings": {
223
+ "fontStyle": "italic",
224
+ "foreground": "#F5CC00"
225
+ }
226
+ },
227
+ {
228
+ "scope": [
229
+ "punctuation.definition.metadata.markdown"
230
+ ],
231
+ "settings": {
232
+ "foreground": "#f3b8c2"
233
+ }
234
+ },
235
+ {
236
+ "scope": [
237
+ "markup.underline.link.image.markdown",
238
+ "markup.underline.link.markdown"
239
+ ],
240
+ "settings": {
241
+ "foreground": "#46a1f0"
242
+ }
243
+ },
244
+ {
245
+ "name": "Comment",
246
+ "scope": "comment",
247
+ "settings": {
248
+ "fontStyle": "italic",
249
+ "foreground": "#f3eff5b8"
250
+ }
251
+ },
252
+ {
253
+ "name": "Quotes",
254
+ "scope": "punctuation.definition.string",
255
+ "settings": {
256
+ "foreground": "#2affcc"
257
+ }
258
+ },
259
+ {
260
+ "name": "String",
261
+ "scope": "string",
262
+ "settings": {
263
+ "foreground": "#44FFD2"
264
+ }
265
+ },
266
+ {
267
+ "name": "String Quoted",
268
+ "scope": [
269
+ "string.quoted",
270
+ "variable.other.readwrite.js"
271
+ ],
272
+ "settings": {
273
+ "fontStyle": "",
274
+ "foreground": "#44FFD2"
275
+ }
276
+ },
277
+ {
278
+ "name": "Number",
279
+ "scope": "constant.numeric",
280
+ "settings": {
281
+ "foreground": "#0accd6"
282
+ }
283
+ },
284
+ {
285
+ "name": "Boolean",
286
+ "scope": "constant.language.boolean",
287
+ "settings": {
288
+ "foreground": "#0accd6"
289
+ }
290
+ },
291
+ {
292
+ "name": "Constant",
293
+ "scope": "constant",
294
+ "settings": {
295
+ "foreground": "#A170C6"
296
+ }
297
+ },
298
+ {
299
+ "name": "Built-in constant",
300
+ "scope": [
301
+ "constant.language",
302
+ "punctuation.definition.constant",
303
+ "variable.other.constant"
304
+ ],
305
+ "settings": {
306
+ "foreground": "#92b6f4"
307
+ }
308
+ },
309
+ {
310
+ "name": "User-defined constant",
311
+ "scope": [
312
+ "constant.character",
313
+ "constant.other"
314
+ ],
315
+ "settings": {
316
+ "foreground": "#11ffc6"
317
+ }
318
+ },
319
+ {
320
+ "name": "Variable",
321
+ "scope": "variable",
322
+ "settings": {
323
+ "fontStyle": "italic",
324
+ "foreground": "#a4ceee"
325
+ }
326
+ },
327
+ {
328
+ "name": "JavaScript Other Variable",
329
+ "scope": "variable.other.object.js",
330
+ "settings": {
331
+ "foreground": "#F3EFF5",
332
+ "fontStyle": "italic"
333
+ }
334
+ },
335
+ {
336
+ "name": "TypeScript[React] Variables and Object Properties",
337
+ "scope": [
338
+ "variable.other.readwrite.alias.ts",
339
+ "variable.other.readwrite.alias.tsx",
340
+ "variable.other.readwrite.ts",
341
+ "variable.other.readwrite.tsx",
342
+ "variable.other.object.ts",
343
+ "variable.other.object.tsx",
344
+ "variable.object.property.ts",
345
+ "variable.object.property.tsx",
346
+ "variable.other.ts",
347
+ "variable.other.tsx",
348
+ "variable.tsx",
349
+ "variable.ts"
350
+ ],
351
+ "settings": {
352
+ "foreground": "#F3EFF5"
353
+ }
354
+ },
355
+ {
356
+ "scope": [
357
+ "variable.other.object.property.tsx",
358
+ "variable.other.object.property.ts",
359
+ "variable.other.object.property"
360
+ ],
361
+ "settings": {
362
+ "foreground": "#15C2CB"
363
+ }
364
+ },
365
+ {
366
+ "name": "TypeScript Classes",
367
+ "scope": "meta.class entity.name.type.class.tsx",
368
+ "settings": {
369
+ "foreground": "#15C2CB"
370
+ }
371
+ },
372
+ {
373
+ "name": "TypeScript Entity Name Type",
374
+ "scope": [
375
+ "entity.name.type.tsx",
376
+ "entity.name.type.module.tsx"
377
+ ],
378
+ "settings": {
379
+ "foreground": "#15C2CB"
380
+ }
381
+ },
382
+ {
383
+ "name": "TypeScript Method Declaration e.g. `constructor`",
384
+ "scope": [
385
+ "meta.method.declaration storage.type.ts",
386
+ "meta.method.declaration storage.type.tsx"
387
+ ],
388
+ "settings": {
389
+ "foreground": "#F141A8"
390
+ }
391
+ },
392
+ {
393
+ "name": "Variable Property Other object property",
394
+ "scope": [
395
+ "variable.other.object.property"
396
+ ],
397
+ "settings": {
398
+ "foreground": "#F5CC00",
399
+ "fontStyle": "italic"
400
+ }
401
+ },
402
+ {
403
+ "name": "Variable Instances",
404
+ "scope": [
405
+ "variable.instance",
406
+ "variable.other.instance",
407
+ "variable.readwrite.instance",
408
+ "variable.other.readwrite.instance",
409
+ "variable.other.property"
410
+ ],
411
+ "settings": {
412
+ "foreground": "#15C2CB"
413
+ }
414
+ },
415
+ {
416
+ "scope": [
417
+ "variable.other.property.ts",
418
+ "variable.other.property.tsx",
419
+ "variable.other.property"
420
+ ],
421
+ "settings": {
422
+ "foreground": "#B5BFF8",
423
+ "fontStyle": ""
424
+ }
425
+ },
426
+ {
427
+ "name": "JavaScript Variable Other ReadWrite",
428
+ "scope": [
429
+ "variable.other.readwrite.js",
430
+ "variable.parameter"
431
+ ],
432
+ "settings": {
433
+ "foreground": "#F3EFF5"
434
+ }
435
+ },
436
+ {
437
+ "name": "Template Strings",
438
+ "scope": "string.template meta.template.expression",
439
+ "settings": {
440
+ "foreground": "#F141A8"
441
+ }
442
+ },
443
+ {
444
+ "name": "Backtics(``) in Template Strings",
445
+ "scope": "string.template punctuation.definition.string",
446
+ "settings": {
447
+ "foreground": "#ffffff"
448
+ }
449
+ },
450
+ {
451
+ "name": "Storage",
452
+ "scope": "storage",
453
+ "settings": {
454
+ "fontStyle": "",
455
+ "foreground": "#46a1f0"
456
+ }
457
+ },
458
+ {
459
+ "name": "Keywords and Storage types",
460
+ "scope": [
461
+ "keyword",
462
+ "storage.type",
463
+ "storage.modifier"
464
+ ],
465
+ "settings": {
466
+ "foreground": "#F141A8",
467
+ "fontStyle": "italic"
468
+ }
469
+ },
470
+ {
471
+ "name": "Keywords operators",
472
+ "scope": [
473
+ "keyword.operator"
474
+ ],
475
+ "settings": {
476
+ "foreground": "#F141A8",
477
+ "fontStyle": "italic"
478
+ }
479
+ },
480
+ {
481
+ "name": "Storage",
482
+ "scope": [
483
+ "storage",
484
+ "meta.class meta.method.declaration meta.var.expr storage.type.js",
485
+ "storage.type.property.js",
486
+ "storage.type.property.ts"
487
+ ],
488
+ "settings": {
489
+ "foreground": "#FE4A49",
490
+ "fontStyle": "italic"
491
+ }
492
+ },
493
+ {
494
+ "name": "JavaScript module imports and exports",
495
+ "scope": [
496
+ "variable.other.meta.import.js",
497
+ "meta.import.js variable.other",
498
+ "variable.other.meta.export.js",
499
+ "meta.export.js variable.other"
500
+ ],
501
+ "settings": {
502
+ "foreground": "#F3EFF5"
503
+ }
504
+ },
505
+ {
506
+ "name": "HTML and React content",
507
+ "scope": [
508
+ "meta.var.expr",
509
+ "meta.jsx.children.tsx",
510
+ "meta.tag.tsx",
511
+ "meta.jsx.children.tsx",
512
+ "meta.tag.tsx",
513
+ "meta.block.tsx",
514
+ "meta.arrow.tsx",
515
+ "meta.var.expr.tsx",
516
+ "source.tsx"
517
+ ],
518
+ "settings": {
519
+ "foreground": "#F3EFF5",
520
+ "fontStyle": ""
521
+ }
522
+ },
523
+ {
524
+ "name": "Class name",
525
+ "scope": "entity.name.class",
526
+ "settings": {
527
+ "foreground": "#F5CC00"
528
+ }
529
+ },
530
+ {
531
+ "name": "Inherited class",
532
+ "scope": "entity.other.inherited-class",
533
+ "settings": {
534
+ "fontStyle": "",
535
+ "foreground": "#5EADF2"
536
+ }
537
+ },
538
+ {
539
+ "name": "Variables, Let and Const",
540
+ "scope": [
541
+ "variable.other.readwrites",
542
+ "meta.definition.variable"
543
+ ],
544
+ "settings": {
545
+ "fontStyle": "",
546
+ "foreground": "#F5CC00"
547
+ }
548
+ },
549
+ {
550
+ "name": "Support Variable Property",
551
+ "scope": "support.variable.property",
552
+ "settings": {
553
+ "foreground": "#15C2CB"
554
+ }
555
+ },
556
+ {
557
+ "name": "Function name",
558
+ "scope": "entity.name.function",
559
+ "settings": {
560
+ "fontStyle": "italic",
561
+ "foreground": "#15C2CB"
562
+ }
563
+ },
564
+ {
565
+ "scope": [
566
+ "meta.definition.method entity.name.function",
567
+ "meta.function-call entity.name.function"
568
+ ],
569
+ "settings": {
570
+ "foreground": "#5EADF2"
571
+ }
572
+ },
573
+ {
574
+ "name": "Function argument",
575
+ "scope": "variable.parameter",
576
+ "settings": {
577
+ "foreground": "#F3EFF5",
578
+ "fontStyle": ""
579
+ }
580
+ },
581
+ {
582
+ "name": "Tag name",
583
+ "scope": "entity.name.tag",
584
+ "settings": {
585
+ "fontStyle": "",
586
+ "foreground": "#46a1f0"
587
+ }
588
+ },
589
+ {
590
+ "name": "Entity Name Type",
591
+ "scope": "entity.name.type",
592
+ "settings": {
593
+ "foreground": "#15C2CB"
594
+ }
595
+ },
596
+ {
597
+ "name": "Tag attribute",
598
+ "scope": "entity.other.attribute-name",
599
+ "settings": {
600
+ "fontStyle": "italic",
601
+ "foreground": "#F5CC00"
602
+ }
603
+ },
604
+ {
605
+ "name": "Meta - Decorator",
606
+ "scope": [
607
+ "punctuation.decorator"
608
+ ],
609
+ "settings": {
610
+ "fontStyle": "italic",
611
+ "foreground": "#F5CC00"
612
+ }
613
+ },
614
+ {
615
+ "scope": [
616
+ "constant.language",
617
+ "variable.language"
618
+ ],
619
+ "settings": {
620
+ "foreground": "#FFE45E"
621
+ }
622
+ },
623
+ {
624
+ "name": "Punctuation/Brackets/Tags",
625
+ "scope": [
626
+ "punctuation.definition.block",
627
+ "punctuation.definition.tag"
628
+ ],
629
+ "settings": {
630
+ "foreground": "#F3EFF5"
631
+ }
632
+ },
633
+ {
634
+ "name": "Library function",
635
+ "scope": "support.function",
636
+ "settings": {
637
+ "fontStyle": "",
638
+ "foreground": "#F5CC00"
639
+ }
640
+ },
641
+ {
642
+ "name": "Library constant",
643
+ "scope": "support.constant",
644
+ "settings": {
645
+ "fontStyle": "",
646
+ "foreground": "#F141A8"
647
+ }
648
+ },
649
+ {
650
+ "name": "!important keyword",
651
+ "scope": "keyword.other.important.css",
652
+ "settings": {
653
+ "fontStyle": "bold",
654
+ "foreground": "#FE4A49"
655
+ }
656
+ },
657
+ {
658
+ "name": "Library class/type",
659
+ "scope": [
660
+ "support.type",
661
+ "support.class"
662
+ ],
663
+ "settings": {
664
+ "foreground": "#15C2CB"
665
+ }
666
+ },
667
+ {
668
+ "name": "Library variable",
669
+ "scope": "support.other.variable",
670
+ "settings": {
671
+ "foreground": "#CBCDD2"
672
+ }
673
+ },
674
+ {
675
+ "name": "Invalid",
676
+ "scope": "invalid",
677
+ "settings": {
678
+ "fontStyle": " italic bold underline",
679
+ "foreground": "#46a1f0"
680
+ }
681
+ },
682
+ {
683
+ "name": "Invalid deprecated",
684
+ "scope": "invalid.deprecated",
685
+ "settings": {
686
+ "foreground": "#46a1f0",
687
+ "fontStyle": " bold italic underline"
688
+ }
689
+ },
690
+ {
691
+ "name": "JSON Property Names",
692
+ "scope": "support.type.property-name.json",
693
+ "settings": {
694
+ "foreground": "#5EADF2"
695
+ }
696
+ },
697
+ {
698
+ "name": "JSON Support Constants",
699
+ "scope": "support.constant.json",
700
+ "settings": {
701
+ "foreground": "#00f6bb"
702
+ }
703
+ },
704
+ {
705
+ "name": "JSON Property values (string)",
706
+ "scope": "meta.structure.dictionary.value.json string.quoted.double",
707
+ "settings": {
708
+ "foreground": "#44FFD2"
709
+ }
710
+ },
711
+ {
712
+ "name": "Strings in JSON values",
713
+ "scope": "string.quoted.double.json punctuation.definition.string.json",
714
+ "settings": {
715
+ "foreground": "#80CBC4"
716
+ }
717
+ },
718
+ {
719
+ "name": "Specific JSON Property values like null",
720
+ "scope": "meta.structure.dictionary.json meta.structure.dictionary.value constant.language",
721
+ "settings": {
722
+ "foreground": "#0accd6"
723
+ }
724
+ },
725
+ {
726
+ "name": "[JSON] - Support",
727
+ "scope": "source.json support",
728
+ "settings": {
729
+ "foreground": "#46a1f0"
730
+ }
731
+ },
732
+ {
733
+ "name": "[JSON] - String",
734
+ "scope": [
735
+ "source.json string",
736
+ "source.json punctuation.definition.string"
737
+ ],
738
+ "settings": {
739
+ "foreground": "#44FFD2"
740
+ }
741
+ },
742
+ {
743
+ "name": "Lists",
744
+ "scope": "markup.list",
745
+ "settings": {
746
+ "foreground": "#46a1f0"
747
+ }
748
+ },
749
+ {
750
+ "name": "Headings",
751
+ "scope": [
752
+ "markup.heading punctuation.definition.heading",
753
+ "entity.name.section"
754
+ ],
755
+ "settings": {
756
+ "fontStyle": "",
757
+ "foreground": "#5EADF2"
758
+ }
759
+ },
760
+ {
761
+ "name": "Support",
762
+ "scope": [
763
+ "text.html.markdown meta.paragraph meta.link.inline",
764
+ "text.html.markdown meta.paragraph meta.link.inline punctuation.definition.string.begin.markdown",
765
+ "text.html.markdown meta.paragraph meta.link.inline punctuation.definition.string.end.markdown"
766
+ ],
767
+ "settings": {
768
+ "foreground": "#50E3C2"
769
+ }
770
+ },
771
+ {
772
+ "name": "[Markdown] text ",
773
+ "scope": [
774
+ "meta.paragraph.markdown"
775
+ ],
776
+ "settings": {
777
+ "foreground": "#F3EFF5"
778
+ }
779
+ },
780
+ {
781
+ "name": "Quotes",
782
+ "scope": "markup.quote",
783
+ "settings": {
784
+ "foreground": "#50E3C2",
785
+ "fontStyle": "italic"
786
+ }
787
+ },
788
+ {
789
+ "name": "Link Url",
790
+ "scope": "meta.link",
791
+ "settings": {
792
+ "foreground": "#50E3C2"
793
+ }
794
+ },
795
+ {
796
+ "name": "Dockerfile",
797
+ "scope": "source.dockerfile",
798
+ "settings": {
799
+ "foreground": "#99d0f7"
800
+ }
801
+ }
802
+ ]
803
+ }
package/setup/shiki.ts ADDED
@@ -0,0 +1,11 @@
1
+ /* ./setup/shiki.ts */
2
+ import { defineShikiSetup } from '@slidev/types'
3
+
4
+ export default defineShikiSetup(async ({ loadTheme }) => {
5
+ return {
6
+ theme: {
7
+ dark: await loadTheme(`../../public/theme/theunnamed-dark-theme.json`),
8
+ light: await loadTheme(`../../public/theme/theunnamed-dark-theme.json`)
9
+ },
10
+ }
11
+ })
@@ -0,0 +1,25 @@
1
+ .shiki-dark {
2
+ background: var(--slidev-code-background) !important;
3
+ }
4
+
5
+ :not(pre) > code {
6
+ background: var(--slidev-code-background) !important;
7
+ }
8
+
9
+ .shiki-container {
10
+ @apply mb-4;
11
+
12
+ code, pre {
13
+ font-size: 1em;
14
+ }
15
+ }
16
+
17
+ :not(pre) > code:before,
18
+ :not(pre) > code:after {
19
+ content: '`';
20
+ opacity: 0.50;
21
+ }
22
+
23
+ :not(pre) > code:before {
24
+ margin-right: -0.08em;
25
+ }
@@ -0,0 +1,4 @@
1
+ // inherit from base layouts, remove it to get full customizations
2
+ import '@slidev/client/styles/layouts-base.css'
3
+ import './layout.css'
4
+ import './code.css'
@@ -0,0 +1,187 @@
1
+ :root {
2
+ // default theme color
3
+ // can be overrided by uses `themeConfig` option
4
+ --slidev-theme-primary: #161C2C;
5
+ --slidev-slide-container-background: #161C2C;
6
+
7
+ // Custom colors
8
+ --slidev-slide-color: #F3EFF5;
9
+ --slidev-code-background: #0F131E;
10
+
11
+ --slidev-accents-teal: #44FFD2;
12
+ --slidev-accents-yellow: #FFE45E;
13
+ --slidev-accents-red: #FE4A49;
14
+ --slidev-accents-blue: #5EADF2;
15
+ }
16
+
17
+
18
+ .dark #slide-content,
19
+ .dark .bg-main {
20
+ background: var(--slidev-slide-container-background);
21
+ color: var(--slidev-slide-color);
22
+ }
23
+
24
+ .slidev-layout h1 + p {
25
+ opacity: 1;
26
+ }
27
+
28
+ .slidev-layout.cover,
29
+ .slidev-layout.intro {
30
+ @apply h-full grid;
31
+
32
+ h1 {
33
+ @apply text-6xl leading-20;
34
+ }
35
+
36
+ h1 + p {
37
+ @apply -mt-2 opacity-50 mb-4;
38
+ }
39
+
40
+ p + h2, ul + h2, table + h2 {
41
+ @apply mt-10;
42
+ }
43
+ }
44
+
45
+ .slidev-layout.cover,
46
+ .slidev-layout.default,
47
+ .slidev-layout.center {
48
+ h1 {
49
+ display: inline-block;
50
+ padding: 0.25em;
51
+ position: relative;
52
+ margin-bottom: 1em;
53
+ z-index: 1;
54
+
55
+ &::before {
56
+ content: " ";
57
+ display: block;
58
+ position: absolute;
59
+ width: calc(100%);
60
+ height: calc(100%);
61
+ margin-left: -0.25em;
62
+ margin-top: -0.25em;
63
+ z-index: -1;
64
+ transform: rotate(-1deg);
65
+ }
66
+ }
67
+ }
68
+
69
+ .slidev-layout.cover {
70
+
71
+ &::before {
72
+ background: rgba(15, 19, 30, 0.40);
73
+ content: " ";
74
+ position: absolute;
75
+ top: 0;
76
+ right: 0;
77
+ bottom: 0;
78
+ left: 0;
79
+ }
80
+
81
+ &.slidev-page-1 {
82
+ p {
83
+ font-weight: bold;
84
+ padding-left: 1.25em;
85
+ }
86
+ }
87
+
88
+ h1 + p {
89
+ opacity: 0.7;
90
+ }
91
+
92
+ > div {
93
+ z-index: 1;
94
+
95
+ h1 {
96
+ color: #0E131F;
97
+ padding: .25em .5em;
98
+ margin: 0;
99
+ font-size: 3em;
100
+
101
+ &::before {
102
+ width: calc(100% - 0.5em);
103
+ height: calc(100% - 0.25em);
104
+ margin-left: -0.25em;
105
+ margin-top: -0.12em;
106
+ background: var(--slidev-accents-teal);
107
+ }
108
+ }
109
+
110
+ p {
111
+ margin: 1em 0 0;
112
+ font-size: 1.5em;
113
+ line-height: 1.5;
114
+ }
115
+
116
+ h2 {
117
+ margin: .5em 0 0;
118
+ }
119
+
120
+ code {
121
+ color: var(--slidev-slide-color);
122
+ border-radius: 0 !important;
123
+ }
124
+ }
125
+ }
126
+
127
+ .slidev-layout.center {
128
+ h1 {
129
+ color: var(--slidev-code-background);
130
+ margin-bottom: 0;
131
+
132
+ &::before {
133
+ background: var(--slidev-accents-blue);
134
+ }
135
+
136
+ code {
137
+ background: transparent !important;
138
+ }
139
+ }
140
+ }
141
+
142
+ .slidev-layout.default {
143
+ h1 {
144
+ color: var(--slidev-code-background);
145
+
146
+ &::before {
147
+ background: var(--slidev-accents-yellow);
148
+ }
149
+
150
+ code {
151
+ background: transparent !important;
152
+ }
153
+ }
154
+ }
155
+
156
+ .slidev-layout blockquote {
157
+ display: flex;
158
+ align-items: center;
159
+ background: var(--slidev-code-background);
160
+ color: var(--slidev-slide-color);
161
+ border-color: #F141A8;
162
+ border-left-width: 3px;
163
+ font-size: 1.1em;
164
+ }
165
+
166
+ .about-me {
167
+ background: var(--slidev-slide-color) !important;
168
+ color: var(--slidev-code-background) !important;
169
+
170
+ h1 {
171
+ background: var(--slidev-accents-yellow);
172
+ display: inline-block;
173
+ padding: 0.25em;
174
+ font-weight: bold;
175
+ font-size: 3em;
176
+ }
177
+
178
+ h2 {
179
+ color: var(--slidev-accents-red);
180
+ font-size: 2.5em;
181
+ }
182
+
183
+ p {
184
+ margin-bottom: 0;
185
+ color: #3F3F3F;
186
+ }
187
+ }