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/vue-dark-mode-switch " 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 "> <template>
48- <DarkModeSwitch @switched="onSwitched" :initialState="isDarkModeEnabled" />
49- </template>
50-
51- <script>
52- import DarkModeSwitch from 'vue-dark-mode-switch'
53- import 'vue-dark-mode-switch/dist/vue-dark-mode-switch.css'
54-
55- export default {
56- data () {
57- return {
58- isDarkModeEnabled: true
59- }
60- },
61- components: {
62- DarkModeSwitch
63- },
64- methods: {
65- onSwitched: function (isSwitched) {
66- console.log('dark mode is enabled :', isSwitched);
67- }
68- }
69- }
70- </script></ code > </ pre >
71- </ div >
72- </ div >
73- </ div >
74- </ div >
75- </ section >
76-
77- < footer class ="py-5 bg-light ">
78- < div class ="container ">
79- < div class ="row ">
80- < div class ="col-12 text-center ">
81- < ul class ="list-inline ">
82- < li class ="list-inline-item "> < a href ="http://www.wtfpl.net "> Licence</ a > </ li >
83- < li class ="list-inline-item "> < a href ="https://www.npmjs.com/package/vue-dark-mode-switch "> Install package</ a > </ li >
84- < li class ="list-inline-item "> < a href ="https://github.com/ismailnguyen/vue-dark-mode-switch "> Fork on GitHub</ a > </ li >
85- </ ul >
86- </ div >
87- </ div >
88- < div class ="row my-2 ">
89- < div class ="col-md-4 mx-auto text-muted text-center small-xl ">
90- © 2020 vue-dark-mode-switch - All Rights Reserved
91- </ div >
92- </ div >
93- </ div >
94- </ footer >
95-
96- < script src ="https://code.jquery.com/jquery-3.2.1.min.js "> </ script >
97- < script scr ="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/all.min.js "> </ script >
98- < script src ="https://cdnjs.cloudflare.com/ajax/libs/prism/1.15.0/prism.min.js "> </ script >
99- < script src ="https://cdnjs.cloudflare.com/ajax/libs/prism/1.15.0/plugins/line-numbers/prism-line-numbers.min.js "> </ script >
100-
101- </ body >
102- </ html >
1+ < meta http-equiv ="refresh " content ="0;URL='https://www.ismailnguyen.com/npm-package/?name=vue-dark-mode-switch' " />
0 commit comments