slidev-theme-the-unnamed 0.0.3 → 0.0.5

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.
Files changed (9) hide show
  1. package/README.md +32 -10
  2. package/changelog.md +15 -0
  3. package/example.md +31 -3
  4. package/layouts/center.vue +7 -0
  5. package/package.json +1 -1
  6. package/setup/mermaid.ts +35 -0
  7. package/styles/index.ts +1 -0
  8. package/styles/layout.css +50 -15
  9. package/styles/mermaid.css +9 -0
package/README.md CHANGED
@@ -4,6 +4,8 @@
4
4
 
5
5
  A [Slidev](https://sli.dev/) theme based on the [The unnamed - VS Code theme](https://marketplace.visualstudio.com/items?itemName=eliostruyf.vscode-unnamed-theme) by [Elio Struyf](https://elio.dev).
6
6
 
7
+ The unnamed theme allows you to fully customize its colors to fit your brand.
8
+
7
9
  ## Usage
8
10
 
9
11
  Add the following frontmatter to your `slides.md`. Start Slidev then it will prompt you to install the theme automatically.
@@ -26,7 +28,7 @@ The theme currently has the following layouts:
26
28
 
27
29
  ### Cover
28
30
 
29
- ![](./assets/001.png)
31
+ ![](/assets/cover.png)
30
32
 
31
33
  **Usage**
32
34
 
@@ -39,7 +41,7 @@ background: <image url> (optional)
39
41
 
40
42
  ### About me
41
43
 
42
- ![](./assets/002.png)
44
+ ![](/assets/about-me.png)
43
45
 
44
46
  **Usage**
45
47
 
@@ -59,9 +61,13 @@ social3:
59
61
  ---
60
62
  ```
61
63
 
64
+ ### Center
65
+
66
+ ![](/assets/center.png)
67
+
62
68
  ### Default
63
69
 
64
- ![](./assets/005.png)
70
+ ![](/assets/default.png)
65
71
 
66
72
 
67
73
  ## Cusomizations
@@ -70,9 +76,12 @@ You can customize the theme by adding the following frontmatter to your `slides.
70
76
 
71
77
  ```yaml
72
78
  themeConfig:
73
- background: "#161C2C"
74
79
  color: "#F3EFF5"
75
-
80
+ background: "#161C2C"
81
+
82
+ code-background: "#0F131E"
83
+ code-border: "#242d34"
84
+
76
85
  accents-teal: "#44FFD2"
77
86
  accents-yellow: "#FFE45E"
78
87
  accents-red: "#FE4A49"
@@ -80,13 +89,26 @@ themeConfig:
80
89
  accents-blue: "#5EADF2"
81
90
  accents-vulcan: "#0E131F"
82
91
 
83
- code-background: "#0F131E"
84
- code-border: "#242d34"
85
- ```
92
+ default-headingBg: var(--slidev-theme-accents-yellow)
93
+ default-headingColor: var(--slidev-theme-accents-vulcan)
86
94
 
87
- ## Components
95
+ center-headingBg: var(--slidev-theme-accents-blue)
96
+ center-headingColor: var(--slidev-theme-accents-vulcan)
97
+
98
+ cover-headingBg: var(--slidev-theme-accents-teal)
99
+ cover-headingColor: var(--slidev-theme-accents-vulcan)
100
+
101
+ section-headingBg: var(--slidev-theme-accents-lightblue)
102
+ section-headingColor: var(--slidev-theme-accents-vulcan)
103
+
104
+ aboutme-bg: var(--slidev-theme-color)
105
+ aboutme-color: var(--slidev-theme-background)
106
+ aboutme-helloBg: var(--slidev-theme-accents-yellow)
107
+ aboutme-helloColor: var(--slidev-theme-background)
108
+ aboutme-nameColor: var(--slidev-theme-accents-red)
109
+ ```
88
110
 
89
- *Coming later*
111
+ > **Info**: we made it possible to change all the accent colors, or define your own colors per type of slide.
90
112
 
91
113
  <br />
92
114
  <br />
package/changelog.md CHANGED
@@ -1,5 +1,20 @@
1
1
  # Changelog
2
2
 
3
+ ## [0.0.5] - 2023-02-02
4
+
5
+ - Better css variable names for theming
6
+ - Added center layout
7
+
8
+ ## [0.0.4] - 2023-02-01
9
+
10
+ - Added mermaid styles for `sequenceDiagram`
11
+ - Small fixes
12
+
13
+ ## [0.0.3] - 2023-02-01
14
+
15
+ - Updated styles for all layouts
16
+ - Added screenshots and documentation
17
+
3
18
  ## [0.0.2] - 2023-01-31
4
19
 
5
20
  - New layouts
package/example.md CHANGED
@@ -3,16 +3,36 @@ theme: ./
3
3
  background: https://source.unsplash.com/collection/94734566/1920x1080
4
4
 
5
5
  themeConfig:
6
- background: "#161C2C"
7
6
  color: "#F3EFF5"
7
+ background: "#161C2C"
8
+
9
+ code-background: "#0F131E"
10
+ code-border: "#242d34"
11
+
8
12
  accents-teal: "#44FFD2"
9
13
  accents-yellow: "#FFE45E"
10
14
  accents-red: "#FE4A49"
11
15
  accents-lightblue: "#15C2CB"
12
16
  accents-blue: "#5EADF2"
13
17
  accents-vulcan: "#0E131F"
14
- code-background: "#0F131E"
15
- code-border: "#242d34"
18
+
19
+ default-headingBg: var(--slidev-theme-accents-yellow)
20
+ default-headingColor: var(--slidev-theme-accents-vulcan)
21
+
22
+ center-headingBg: var(--slidev-theme-accents-blue)
23
+ center-headingColor: var(--slidev-theme-accents-vulcan)
24
+
25
+ cover-headingBg: var(--slidev-theme-accents-teal)
26
+ cover-headingColor: var(--slidev-theme-accents-vulcan)
27
+
28
+ section-headingBg: var(--slidev-theme-accents-lightblue)
29
+ section-headingColor: var(--slidev-theme-accents-vulcan)
30
+
31
+ aboutme-bg: var(--slidev-theme-color)
32
+ aboutme-color: var(--slidev-theme-background)
33
+ aboutme-helloBg: var(--slidev-theme-accents-yellow)
34
+ aboutme-helloColor: var(--slidev-theme-background)
35
+ aboutme-nameColor: var(--slidev-theme-accents-red)
16
36
  ---
17
37
 
18
38
  # Slidev - The Unnamed
@@ -49,6 +69,14 @@ layout: section
49
69
 
50
70
  Subtitle for the section
51
71
 
72
+ ---
73
+ layout: center
74
+ ---
75
+
76
+ # Center title
77
+
78
+ Subtitle for the center layout
79
+
52
80
  ---
53
81
 
54
82
  # Code with Shiki and The unnamed theme
package/layouts/center.vue ADDED
@@ -0,0 +1,7 @@
1
+ <template>
2
+ <div class="slidev-layout center h-full grid place-content-center">
3
+ <div class="my-auto flex flex-col justify-center items-center">
4
+ <slot />
5
+ </div>
6
+ </div>
7
+ </template>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "slidev-theme-the-unnamed",
3
- "version": "0.0.3",
3
+ "version": "0.0.5",
4
4
  "keywords": [
5
5
  "slidev-theme",
6
6
  "slidev"
package/setup/mermaid.ts ADDED
@@ -0,0 +1,35 @@
1
+ import type { MermaidOptions } from '@slidev/types'
2
+ import { defineMermaidSetup } from '@slidev/types'
3
+
4
+ export default defineMermaidSetup(() => {
5
+ // eslint-disable-next-line prefer-const
6
+ let injection_return: MermaidOptions = {
7
+ theme: 'forest',
8
+ themeVariables: {
9
+ // General theme variables
10
+ noteBkgColor: "#181d29",
11
+ noteTextColor: "#F3EFF5cc",
12
+ noteBorderColor: "#404551",
13
+
14
+ // Sequence diagram variables
15
+ actorBkg: "#0E131F",
16
+ actorBorder: "#44FFD2",
17
+ actorTextColor: "#F3EFF5",
18
+ actorLineColor: "#F3EFF5",
19
+ signalColor: "#F3EFF5",
20
+ signalTextColor: "#F3EFF5",
21
+ sequenceNumberColor: "#F3EFF5",
22
+ labelBoxBorderColor: "#5EADF2",
23
+ activationBkgColor: "#181d29",
24
+ activationBorderColor: "#5EADF2",
25
+ },
26
+ themeCSS: `
27
+ polygon.labelBox,
28
+ polygon.labelBox + text {
29
+ display: none;
30
+ }
31
+ `
32
+ }
33
+
34
+ return injection_return
35
+ })
package/styles/index.ts CHANGED
@@ -2,3 +2,4 @@
2
2
  import '@slidev/client/styles/layouts-base.css'
3
3
  import './layout.css'
4
4
  import './code.css'
5
+ import './mermaid.css'
package/styles/layout.css CHANGED
@@ -12,12 +12,36 @@
12
12
  --slidev-theme-code-border: #242d34;
13
13
 
14
14
  // Accent colors
15
+ --slidev-theme-accents-rose: #f141a8;
15
16
  --slidev-theme-accents-teal: #44FFD2;
16
17
  --slidev-theme-accents-yellow: #FFE45E;
17
18
  --slidev-theme-accents-red: #FE4A49;
18
19
  --slidev-theme-accents-lightblue: #15C2CB;
19
20
  --slidev-theme-accents-blue: #5EADF2;
20
21
  --slidev-theme-accents-vulcan: #0E131F;
22
+
23
+ // Default
24
+ --slidev-theme-default-headingBg: var(--slidev-theme-accents-yellow);
25
+ --slidev-theme-default-headingColor: var(--slidev-theme-accents-vulcan);
26
+
27
+ // Center
28
+ --slidev-theme-center-headingBg: var(--slidev-theme-accents-blue);
29
+ --slidev-theme-center-headingColor: var(--slidev-theme-accents-vulcan);
30
+
31
+ // Cover
32
+ --slidev-theme-cover-headingBg: var(--slidev-theme-accents-teal);
33
+ --slidev-theme-cover-headingColor: var(--slidev-theme-accents-vulcan);
34
+
35
+ // Section
36
+ --slidev-theme-section-headingBg: var(--slidev-theme-accents-lightblue);
37
+ --slidev-theme-section-headingColor: var(--slidev-theme-accents-vulcan);
38
+
39
+ // About me
40
+ --slidev-theme-aboutme-bg: var(--slidev-theme-color);
41
+ --slidev-theme-aboutme-color: var(--slidev-theme-background);
42
+ --slidev-theme-aboutme-helloBg: var(--slidev-theme-accents-yellow);
43
+ --slidev-theme-aboutme-helloColor: var(--slidev-theme-background);
44
+ --slidev-theme-aboutme-nameColor: var(--slidev-theme-accents-red);
21
45
  }
22
46
 
23
47
  /* The unnamed styles */
@@ -71,6 +95,11 @@
71
95
  }
72
96
  }
73
97
 
98
+ h2 + p,
99
+ h2 + ul {
100
+ @apply mt-4;
101
+ }
102
+
74
103
  p + h2,
75
104
  ul + h2,
76
105
  table + h2,
@@ -101,7 +130,8 @@
101
130
  .slidev-layout.intro,
102
131
  .slidev-layout.default,
103
132
  .slidev-layout.center,
104
- .slidev-layout[layout="default"] {
133
+ .slidev-layout[layout="default"],
134
+ .about-me {
105
135
  h1 {
106
136
  display: inline-block;
107
137
  padding: 0.25em;
@@ -134,10 +164,10 @@
134
164
  .slidev-layout.default,
135
165
  .slidev-layout[layout="default"] {
136
166
  h1 {
137
- color: var(--slidev-theme-code-background);
167
+ color: var(--slidev-theme-default-headingColor);
138
168
 
139
169
  &::before {
140
- background: var(--slidev-theme-accents-yellow);
170
+ background: var(--slidev-theme-default-headingBg);
141
171
  }
142
172
  }
143
173
  }
@@ -170,7 +200,7 @@
170
200
  z-index: 1;
171
201
 
172
202
  h1 {
173
- color: var(--slidev-theme-accents-vulcan);
203
+ color: var(--slidev-theme-cover-headingColor);
174
204
  padding: .25em .5em;
175
205
  margin: 0;
176
206
 
@@ -179,7 +209,7 @@
179
209
  height: calc(100% - 0.25em);
180
210
  margin-left: -0.25em;
181
211
  margin-top: -0.12em;
182
- background: var(--slidev-theme-accents-teal);
212
+ background: var(--slidev-theme-cover-headingBg);
183
213
  }
184
214
  }
185
215
 
@@ -215,7 +245,7 @@
215
245
  padding-bottom: 2.5rem;
216
246
 
217
247
  h1 {
218
- color: var(--slidev-theme-code-background);
248
+ color: var(--slidev-theme-section-headingColor);
219
249
  font-size: 2.25rem;
220
250
  line-height: 2.5rem;
221
251
  margin-left: -0.05em;
@@ -223,7 +253,7 @@
223
253
  position: relative;
224
254
 
225
255
  &::before {
226
- background: var(--slidev-theme-accents-lightblue);
256
+ background: var(--slidev-theme-section-headingBg);
227
257
  }
228
258
  }
229
259
 
@@ -237,39 +267,44 @@
237
267
  // Center
238
268
  .slidev-layout.center {
239
269
  h1 {
240
- color: var(--slidev-theme-code-background);
270
+ width: fit-content;
271
+ color: var(--slidev-theme-center-headingColor);
241
272
  margin-bottom: 0;
242
273
 
243
274
  &::before {
244
- background: var(--slidev-theme-accents-blue);
275
+ background: var(--slidev-theme-center-headingBg);
245
276
  }
246
277
 
247
278
  code {
248
279
  background: transparent !important;
249
280
  }
250
281
  }
282
+
283
+
251
284
  }
252
285
 
253
286
  /* About me slide */
254
287
  .about-me {
255
- background: var(--slidev-theme-color) !important;
256
- color: var(--slidev-theme-code-background) !important;
288
+ background: var(--slidev-theme-aboutme-bg);
289
+ color: var(--slidev-theme-aboutme-color) !important;
257
290
 
258
291
  h1 {
259
- background: var(--slidev-theme-accents-yellow);
260
- display: inline-block;
292
+ color: var(--slidev-theme-aboutme-helloColor);
261
293
  padding: 0.25em;
262
294
  font-weight: bold;
263
295
  font-size: 3em;
296
+
297
+ &::before {
298
+ background: var(--slidev-theme-aboutme-helloBg);
299
+ }
264
300
  }
265
301
 
266
302
  h2 {
267
- color: var(--slidev-theme-accents-red);
303
+ color: var(--slidev-theme-aboutme-nameColor);
268
304
  font-size: 2.5em;
269
305
  }
270
306
 
271
307
  p {
272
308
  margin-bottom: 0;
273
- color: #3F3F3F;
274
309
  }
275
310
  }
package/styles/mermaid.css ADDED
@@ -0,0 +1,9 @@
1
+ .mermaid {
2
+ display: flex;
3
+ justify-content: center;
4
+ align-items: center;
5
+
6
+ svg {
7
+ margin: 0 auto;
8
+ }
9
+ }