[github/bastienwirtz/homer.git] / src / components / DarkMode.vue

<template>
  <a
    v-on:click="toggleTheme()"
    aria-label="Toggle dark mode"
    class="navbar-item is-inline-block-mobile"
  >
    <i class="fas fa-fw fa-adjust"></i>
  </a>
</template>

<script>
export default {
  name: "Darkmode",
  data: function () {
    return {
      isDark: null,
    };
  },
  created: function () {
    this.isDark =
      "overrideDark" in localStorage
        ? JSON.parse(localStorage.overrideDark)
        : matchMedia("(prefers-color-scheme: dark)").matches;
    this.$emit("updated", this.isDark);
  },
  methods: {
    toggleTheme: function () {
      this.isDark = !this.isDark;
      localStorage.overrideDark = this.isDark;
      this.$emit("updated", this.isDark);
    },
  },
};
</script>
Commit	Line	Data
b9c5fcf0 BW	1	<template>
	2	<a
	3	v-on:click="toggleTheme()"
	4	aria-label="Toggle dark mode"
	5	class="navbar-item is-inline-block-mobile"
	6	>
da6e676d	7	<i class="fas fa-fw fa-adjust"></i>
b9c5fcf0 BW	8	</a>
	9	</template>
	10
	11	<script>
	12	export default {
	13	name: "Darkmode",
	14	data: function () {
	15	return {
	16	isDark: null,
	17	};
	18	},
	19	created: function () {
	20	this.isDark =
	21	"overrideDark" in localStorage
	22	? JSON.parse(localStorage.overrideDark)
	23	: matchMedia("(prefers-color-scheme: dark)").matches;
	24	this.$emit("updated", this.isDark);
	25	},
	26	methods: {
	27	toggleTheme: function () {
	28	this.isDark = !this.isDark;
	29	localStorage.overrideDark = this.isDark;
	30	this.$emit("updated", this.isDark);
	31	},
	32	},
	33	};
	34	</script>