corysimmons/theme-switcher.html

## theme-switcher.html
<!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>
	<!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>