Skip to content

Commit aa7d216

Browse files
Ismail NGUYENIsmail NGUYEN
Ismail NGUYEN
authored and
Ismail NGUYEN
committed
Add docs page
1 parent fee2e60 commit aa7d216

File tree

4 files changed

+111
-4
lines changed

4 files changed

+111
-4
lines changed

Diff for: ‎README.md

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
# vue-dark-mode-switch
2+
VueJS Dark mode switch component
23

34
## Install
4-
```
5+
```shell
56
npm install --save vue-dark-mode-switch
67
```
78

8-
### Usage
9-
9+
## Usage
1010
Import the `DarkModeSwitch` component, and it will emit its state through `@switched` event method.
1111

1212
```html

Diff for: ‎docs/css/bootstrap.min.css

+11
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

Diff for: ‎docs/index.html

+96
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
6+
<title>vue-dark-mode-switch - VueJS Dark mode switch component</title>
7+
<meta name="description" content="vue-dark-mode-switch is a beautiful switch for dark mode theme switching."/>
8+
9+
<link href="https://fonts.googleapis.com/css?family=K2D:300,400,500,700,800" rel="stylesheet">
10+
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet">
11+
12+
<link rel="stylesheet" href="./css/bootstrap.min.css">
13+
</head>
14+
<body>
15+
16+
<section class="bg-gradient pt-5 pb-6">
17+
<div class="container">
18+
<div class="row">
19+
<div class="col-12 d-flex flex-row align-items-center justify-content-between">
20+
<div class="heading-brand">vue-dark-mode-switch</div>
21+
<a href="https://www.npmjs.com/package/throttler-js" class="btn btn-dark" target="_blank">
22+
<i class="fab fa-npm"></i>
23+
Download
24+
</a>
25+
</div>
26+
</div>
27+
<div class="row mt-6">
28+
<div class="col-md-8 mx-auto text-center">
29+
<h1>VueJS Dark mode switch component</h1>
30+
<p class="lead mb-5">
31+
vue-dark-mode-switch is a beautiful switch for dark mode theme switching.
32+
</p>
33+
<a href="https://github.com/ismailnguyen/vue-dark-mode-switch" class="btn btn-success">
34+
<i class="fab fa-github"></i>
35+
Contribute
36+
</a>
37+
</div>
38+
</div>
39+
<div class="row mt-5">
40+
<div class="col-md-9 mx-auto">
41+
<div class="code-window">
42+
<div class="dots">
43+
<div class="red"></div>
44+
<div class="orange"></div>
45+
<div class="green"></div>
46+
</div>
47+
<pre class="language-javascript line-numbers"><code class="language-html">&lt;template&gt;
48+
&lt;DarkModeSwitch @switched="onSwitched" /&gt;
49+
&lt;/template&gt;
50+
51+
&lt;script&gt;
52+
import DarkModeSwitch from './components/DarkModeSwitch.vue'
53+
54+
export default {
55+
components: {
56+
DarkModeSwitch
57+
},
58+
methods: {
59+
onSwitched: function (isSwitched) {
60+
console.log('dark mode is enabled :', isSwitched);
61+
}
62+
}
63+
}
64+
&lt;/script&gt;</code></pre>
65+
</div>
66+
</div>
67+
</div>
68+
</div>
69+
</section>
70+
71+
<footer class="py-5 bg-light">
72+
<div class="container">
73+
<div class="row">
74+
<div class="col-12 text-center">
75+
<ul class="list-inline">
76+
<li class="list-inline-item"><a href="http://www.wtfpl.net">Licence</a></li>
77+
<li class="list-inline-item"><a href="https://www.npmjs.com/package/vue-dark-mode-switch">Install package</a></li>
78+
<li class="list-inline-item"><a href="https://github.com/ismailnguyen/vue-dark-mode-switch">Fork on GitHub</a></li>
79+
</ul>
80+
</div>
81+
</div>
82+
<div class="row my-2">
83+
<div class="col-md-4 mx-auto text-muted text-center small-xl">
84+
&copy; 2020 vue-dark-mode-switch - All Rights Reserved
85+
</div>
86+
</div>
87+
</div>
88+
</footer>
89+
90+
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
91+
<script scr="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/all.min.js"></script>
92+
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.15.0/prism.min.js"></script>
93+
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.15.0/plugins/line-numbers/prism-line-numbers.min.js"></script>
94+
95+
</body>
96+
</html>

Diff for: ‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "vue-dark-mode-switch",
3-
"version": "1.0.1",
3+
"version": "1.0.2",
44
"author": "Ismaïl NGUYEN <nguyen.ismail@gmail.com>",
55
"repository": "https://github.com/ismailnguyen/vue-dark-mode-switch.git",
66
"license": "WTFPL (http://www.wtfpl.net)",

0 commit comments

Comments
 (0)