Skip to content

Commit d0a247f

Browse files
ktquezktquez
committed
docs: Update examples
1 parent 30a43b5 commit d0a247f

File tree

4 files changed

+20
-71
lines changed

4 files changed

+20
-71
lines changed

‎docs/.vuepress/components/GlobalLayout.vue‎

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -35,12 +35,12 @@ export default {
3535
:root
3636
--bg: #fff
3737
--bg-secondary: #f2f2f2
38-
--bg-search: #fff
38+
--bg-search: #f2f2f2
3939
--bg-code: #f2f2f2
4040
--bg-warning: #fff7d0
4141
--color: #304455
4242
--code-color: #476582
43-
--link-color: #3eaf7c
43+
--link-color: #2E8465
4444
--border-color: #eaecef
4545
background-color: var(--bg) !important
4646
@@ -52,7 +52,7 @@ html.dark-mode
5252
--bg-warning: #575638
5353
--color: #ddd8ca
5454
--code-color: #ADCFF0
55-
--link-color: #68CA9E
55+
--link-color: #82D3AF
5656
--border-color: #AEB8BC
5757
background-color: var(--bg) !important
5858
@@ -82,8 +82,8 @@ div[class*="language-"] code
8282
color: inherit !important
8383
8484
.search-box input
85-
background-color: inherit !important
86-
color: inherit !important
85+
background-color: var(--bg) !important
86+
color: var(--color) !important
8787
8888
.custom-block.warning
8989
color: var(--color) !important
@@ -94,7 +94,7 @@ div[class*="language-"] code
9494
9595
.box-color-mode
9696
width: 100%
97-
padding: 10px 10px 50px 20rem
97+
padding: 10px 10px 100px 20rem
9898
display: flex
9999
justify-content: center
100100
box-sizing: border-box
@@ -107,4 +107,9 @@ div[class*="language-"] code
107107
font-weight: bold
108108
span
109109
text-transform: capitalize
110+
111+
@media only screen and (max-width: 728px)
112+
.box-color-mode
113+
padding-left: 10px
114+
110115
</style>

‎docs/README.md‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ Dark mode or any other color mode are excellent alternatives for the user of you
77

88
[@vue-a11y/dark-mode](https://github.com/vue-a11y/vue-dark-mode) is very flexible, in addition to dark-mode, you can pass through props any color mode you want, for example, sepia, dark-blue, reading, and as many more as you want.
99

10-
### Articles that served as inspiration:
10+
**Articles that served as inspiration:**
11+
1112
- [Building dark mode on Stack Overflow](https://stackoverflow.blog/2020/03/31/building-dark-mode-on-stack-overflow/)
1213
- [Your dark mode toggle is broken](https://kilianvalkhof.com/2020/design/your-dark-mode-toggle-is-broken/)

‎docs/guide/README.md‎

Lines changed: 0 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -47,18 +47,3 @@ body {
4747
}
4848
</style>
4949
```
50-
51-
## Class naming
52-
53-
The class for deciding the color mode is inserted in the HTML tag. `${color}-mode`
54-
55-
e.g.
56-
57-
```html
58-
<!DOCTYPE html>
59-
<html lang="en" class="light-mode">
60-
<head>
61-
<meta charset="UTF-8">
62-
...
63-
```
64-

‎docs/guide/examples.md‎

Lines changed: 7 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,10 @@
2222
</ClientOnly>
2323
</div>
2424

25+
<br />
26+
<br />
27+
<br />
28+
2529
## Icon Toggle button
2630

2731
```vue
@@ -48,52 +52,6 @@
4852
</ClientOnly>
4953
</div>
5054

51-
## Icon Toggle button (using vue-feather-icon)
52-
53-
A lib to help you use Feather icons.
54-
55-
### Install
56-
```shell
57-
yarn add vue-feather-icons
58-
```
59-
60-
### Usage
61-
```vue
62-
<script>
63-
// Only import what you need!
64-
import { SunIcon, MoonIcon, MonitorIcon } from 'vue-feather-icons'
65-
66-
export default {
67-
components: {
68-
SunIcon,
69-
MoonIcon,
70-
MonitorIcon
71-
}
72-
}
73-
</script>
74-
```
75-
76-
### Example
77-
```vue
78-
<vue-dark-mode>
79-
<template v-slot="{ mode }">
80-
<SunIcon v-show="mode === 'light'" />
81-
<MoonIcon v-show="mode === 'dark'" />
82-
<MonitorIcon v-show="mode === 'system'" />
83-
</template>
84-
</vue-dark-mode>
85-
```
86-
87-
**Output**
88-
89-
<div style="padding: 10px;background-color: var(--bg-secondary);">
90-
<ClientOnly>
91-
<vue-dark-mode style="padding: 10px 14px;">
92-
<template v-slot="{ mode }">
93-
<svg v-show="mode === 'dark'" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
94-
<svg v-show="mode === 'light'" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
95-
<svg v-show="mode === 'system'" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="20" height="14" rx="2" ry="2"></rect><line x1="8" y1="21" x2="16" y2="21"></line><line x1="12" y1="17" x2="12" y2="21"></line></svg>
96-
</template>
97-
</vue-dark-mode>
98-
</ClientOnly>
99-
</div>
55+
<br />
56+
<br />
57+
<br />

0 commit comments

Comments
 (0)