Skip to content

Commit 94cdc85

Browse files
mst101mst101
committed
docs(style): Add a dark mode to docs
1 parent 2769dec commit 94cdc85

File tree

11 files changed

+137
-337
lines changed

11 files changed

+137
-337
lines changed

‎docs/.vuepress/components/DateCleave.vue‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,3 @@ export default {
2323
},
2424
}
2525
</script>
26-
<style>
27-
@import 'style.css';
28-
</style>

‎docs/.vuepress/components/DateDisabled.vue‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -121,7 +121,3 @@ export default {
121121
},
122122
}
123123
</script>
124-
125-
<style>
126-
@import 'style.css';
127-
</style>

‎docs/.vuepress/components/DateFormats.vue‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,3 @@ export default {
6464
},
6565
}
6666
</script>
67-
68-
<style>
69-
@import 'style.css';
70-
</style>

‎docs/.vuepress/components/DateFormatting.vue‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,3 @@ export default {
7373
},
7474
}
7575
</script>
76-
77-
<style>
78-
@import 'style.css';
79-
</style>

‎docs/.vuepress/components/DateHighlighted.vue‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -98,7 +98,3 @@ export default {
9898
},
9999
}
100100
</script>
101-
102-
<style>
103-
@import 'style.css';
104-
</style>

‎docs/.vuepress/components/DateLanguage.vue‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,3 @@ export default {
3737
},
3838
}
3939
</script>
40-
41-
<style>
42-
@import 'style.css';
43-
</style>

‎docs/.vuepress/components/DateTypeable.vue‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,3 @@ export default {
3636
},
3737
}
3838
</script>
39-
40-
<style>
41-
@import 'style.css';
42-
</style>

‎docs/.vuepress/components/DateVeeValidate.vue‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,3 @@ function validateDate() {
2424
value.value = date
2525
}
2626
</script>
27-
<style>
28-
@import 'style.css';
29-
</style>

‎docs/.vuepress/components/style.css‎

Lines changed: 0 additions & 86 deletions
This file was deleted.

‎docs/.vuepress/styles/index.scss‎

Lines changed: 132 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,132 @@
1+
@import '../../../src/styles/style.scss';
2+
3+
:root {
4+
--c-brand-dark: #194632; //#aee2cb;
5+
--c-warning-text-disabled: #d3bb4e; //#aee2cb;
6+
7+
--vdp-bg: var(--c-bg);
8+
--vdp-text: var(--c-text);
9+
--vdp-text-disabled: #ccc;
10+
--vdp-border: var(--c-border);
11+
--vdp-today-bg: var(--c-bg-lighter);
12+
--vdp-button-hover-bg: var(--c-bg-light);
13+
--vdp-cell-selected-bg: var(--c-brand);
14+
--vdp-cell-selected-text: var(--c-brand-dark); //#104756;
15+
--vdp-cell-hover-border: var(--c-brand);
16+
--vdp-cell-focus-outline: #000;
17+
--vdp-cell-highlighted-bg: var(--c-warning-bg-light);
18+
--vdp-cell-highlighted-text: var(--c-warning-text);
19+
--vdp-cell-highlighted-disabled-text: var(--c-warning-text-disabled);
20+
--vdp-cell-edge-dates-text: var(--c-text-lighter);
21+
--vdp-cell-edge-dates-selected-text: var(--c-brand-dark);
22+
--vdp-cell-edge-dates-highlighted-text: var(--c-warning-text);
23+
}
24+
25+
html.dark {
26+
--c-brand-dark: #17422f;
27+
--c-warning-text-disabled: #67671b;
28+
29+
--vdp-bg: var(--c-bg);
30+
--vdp-text: var(--c-text);
31+
--vdp-text-disabled: #4b5d6f;
32+
--vdp-border: var(--c-border);
33+
--vdp-today-bg: var(--c-bg-lighter);
34+
--vdp-button-hover-bg: var(--c-bg-light);
35+
--vdp-cell-selected-bg: var(--c-brand);
36+
--vdp-cell-selected-text: var(--c-brand-dark); //#092831;
37+
--vdp-cell-hover-border: var(--c-brand);
38+
--vdp-cell-focus-outline: #fff;
39+
--vdp-cell-highlighted-bg: var(--c-warning-bg-light);
40+
--vdp-cell-highlighted-text: var(--c-warning-text);
41+
--vdp-cell-highlighted-disabled-text: var(--c-warning-text-disabled);
42+
--vdp-cell-edge-dates-text: var(--c-text-lighter);
43+
--vdp-cell-edge-dates-selected-text: var(--c-brand-dark);
44+
--vdp-cell-edge-dates-highlighted-text: var(--c-warning-text-light);
45+
}
46+
47+
.example {
48+
background: transparent;
49+
margin-bottom: 3em;
50+
51+
h3 {
52+
padding: 0;
53+
margin: 1em 0 0.5em;
54+
}
55+
56+
input,
57+
select {
58+
padding: 0.75em 0.5em;
59+
font-size: 100%;
60+
border: 1px solid var(--c-border-dark);
61+
width: 100%;
62+
box-sizing: border-box;
63+
}
64+
65+
select {
66+
line-height: 2.5em;
67+
}
68+
69+
code {
70+
border: 1px solid var(--c-border-dark);
71+
border-radius: 0.5em;
72+
display: block;
73+
margin-top: 1em;
74+
padding: 1em;
75+
}
76+
77+
pre {
78+
color: var(--c-text);
79+
margin: 0;
80+
}
81+
}
82+
83+
.settings {
84+
background: var(--c-bg-lighter);
85+
border: 1px solid var(--c-border-dark);
86+
border-radius: 0.5em;
87+
color: var(--vdp-text);
88+
padding: 1em;
89+
margin: 1em 0;
90+
91+
h5 {
92+
font-size: 100%;
93+
margin: 0 0 1em;
94+
padding: 0;
95+
}
96+
97+
pre {
98+
margin: 0;
99+
padding: 0;
100+
}
101+
102+
label {
103+
padding-bottom: 0.3em;
104+
}
105+
}
106+
107+
input,
108+
select {
109+
background-color: var(--c-bg);
110+
border: 1px solid var(--c-border-dark);
111+
border-radius: 0.3em;
112+
box-sizing: border-box;
113+
font-size: 100%;
114+
padding: 0.75em 0.5em;
115+
width: 100%;
116+
}
117+
118+
.form-group {
119+
margin-bottom: 1em;
120+
}
121+
122+
.form-group label {
123+
font-size: 80%;
124+
display: block;
125+
margin-bottom: 0.5em;
126+
}
127+
128+
.error {
129+
color: var(--c-danger);
130+
font-style: italic;
131+
margin-top: 0.5em;
132+
}

0 commit comments

Comments
 (0)