<template>
  <ClientOnly>
    <DarkMode :modes="modes" default-mode="light">
      <template #default="{ mode }">
        <Icon v-if="mode === 'light'" name="sun" />
        <Icon v-else name="moon" />
      </template>
    </DarkMode>
  </ClientOnly>
</template>

<script>
import { DarkMode } from '@vue-a11y/dark-mode';
export default {
  name: 'Theme',
  components: {
    DarkMode,
  },
  setup() {
    return {
      modes: ['light', 'dark'],
    };
  },
};
</script>

<style lang="stylus">

:root {
  --font: $fontFamily;
  --font-mono: $mono;
  --base-space: $baseSpace;
  --base-radius: $baseRadius;
  --app-width: $appWidth;
}

html.light-mode {
  $fg = #394046;

  --accent-color: #0d80f2;
  --fg-color-1: $fg;
  --fg-color-2: alpha($fg, 0.85);
  --fg-color-3: alpha($fg, 0.65);
  --fg-color-4: alpha($fg, 0.3);
  --bg-color-1: #ffffff;
  --bg-color-2: rgba(#f1f2f4, 0.75);
  --bg-color-overlay: rgba(#435970, 0.6);
  --bg-hover: hsla(350, 5%, 85%, 0.2);
  --separator-color: rgba(#d5d9dd, 0.5);
}

html.dark-mode {
  $fg = #f1f2f4;

  --accent-color: #6eb3f7;

  --fg-color-1: $fg;
  --fg-color-2: alpha($fg, 0.95);
  --fg-color-3: alpha($fg, 0.65);
  --fg-color-4: alpha($fg, 0.3);
  --bg-color-1: #17191c;
  --bg-color-2: rgba(#22262a, 0.85);
  --bg-color-overlay: rgba(#394046, 0.6);
  --bg-hover: hsla(350, 5%, 85%, 0.2);
  --separator-color: rgba(#394046, 0.75);
}
</style>
