Created
July 29, 2017 23:41
-
-
Save corysimmons/1a737577ed7e47fe2b42f520fca896f2 to your computer and use it in GitHub Desktop.
Vue theme switcher
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <link rel="stylesheet" href="https://unpkg.com/reeeset"> | |
| <script src="https://unpkg.com/vue"></script> | |
| <style> | |
| body { | |
| padding: 3rem; | |
| font-family: avenir; | |
| -webkit-font-smoothing: antialiased; | |
| } | |
| button { background: dodgerblue; color: white; padding: .5rem 2rem; border: 0; cursor: pointer; } | |
| .light, .dark { margin-bottom: 1rem; padding: 1rem; } | |
| .light { | |
| background: #eee; | |
| color: red; | |
| } | |
| .dark { | |
| background: #333; | |
| color: white; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="app"> | |
| <div :class="theme"> | |
| <h1>Theme Switcher</h1> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum veritatis sapiente distinctio voluptatem voluptate hic atque magnam accusamus, sequi doloremque nihil autem eos vitae nulla architecto eius ut optio. Voluptates.</p> | |
| </div> | |
| <button @click="triggy">Toggle Themes</button> | |
| </div> | |
| <script> | |
| new Vue({ | |
| el: '#app', | |
| data: { | |
| theme: 'light' | |
| }, | |
| methods: { | |
| triggy() { | |
| switch (this.theme) { | |
| case 'light': | |
| this.theme = 'dark'; | |
| break; | |
| case 'dark': | |
| this.theme = 'light'; | |
| break; | |
| default: | |
| } | |
| } | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment