feat: add color switcher

app.config.ts

@@ -0,0 +1,6 @@
+export default defineAppConfig({
+ ui: {
+ primary: 'green',
+ gray: 'cool',
+ },
+});

components/colorModePicker.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+const colorMode = useColorMode();
+const isDark = computed({
+ get () {
+ return colorMode.value === 'dark';
+ },
+ set () {
+ colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark';
+ },
+});
+</script>
+
+<template>
+ <ClientOnly>
+ <UButton
+ :icon="isDark ? 'i-heroicons-moon-20-solid' : 'i-heroicons-sun-20-solid'"
+ color="gray"
+ variant="ghost"
+ aria-label="Theme"
+ @click="isDark = !isDark"
+ />
+ <template #fallback>
+ <div class="w-8 h-8" />
+ </template>
+ </ClientOnly>
+</template>

components/customRouterLink.vue

@@ -1,5 +1,11 @@
 <template>
- <a v-if="isUrl(props.to)" :href="props.to.toString()" class="[&>*]:cursor-pointer">
+ <a
+ v-if="isUrl(props.to)"
+ :href="props.to.toString()"
+ class="[&>*]:cursor-pointer
+ text-primary-base-light dark:text-primary-base-dark
+ hover:text-primary-highlight-light hover:dark:text-primary-highlight-dark"
+ >
  <!-- this style enforcement is necessary due to how our UI library generates styles during runtime,
  and apparently doesn't want pointers on tags -->
  <slot />

components/customTag.vue

@@ -1,5 +1,5 @@
 <template>
- <UBadge color="gray" variant="solid" class="m-1">
+ <UBadge :color="props.type" variant="solid" class="m-1">
  <slot />
  <template v-if="props.icon">
  <UIcon :name="props.icon" class="ml-1" />
@@ -9,8 +9,11 @@
 
 <script setup lang="ts">
 
-const props = defineProps<{
+const props = withDefaults(defineProps<{
  icon?: string;
- type?: string; // TODO remove, or rework
-}>();
+ type?: 'gray' | 'white';
+}>(), {
+ type: 'white',
+ icon: undefined,
+});
 </script>

components/header.vue

@@ -3,25 +3,25 @@
  class="p-2 pr-4 sticky top-0 flex justify-between items-center z-30 bg-background-light dark:bg-background-dark border-b-[1px] border-content-secondary-light dark:border-content-secondary-dark"
  >
  <UButton
- variant="solid"
+ variant="ghost"
  color="white"
- square
  icon="i-heroicons:bars-3-20-solid"
- size="lg"
  @click="toggleMenu"
  />
  <div class="self-center text-lg">
- <p>{{ profile.person.name.first }}</p>
+ <p>diluz.io</p>
+ </div>
+ <div class="flex gap-2">
+ <LanguagePicker />
+ <ColorModePicker />
  </div>
- <LanguagePicker />
  </div>
 </template>
 
 <script setup lang="ts">
 import { useMenu } from '~/composables/useMenu';
 
 const { isOpen } = useMenu();
-const { profile } = useProfileFromRoute();
 
 function toggleMenu () {
  isOpen.value = !isOpen.value;

components/socialTag.vue

@@ -1,6 +1,6 @@
 <template>
  <CustomRouterLink :to="link" rel="me">
- <CustomTag type="primary" :icon="getIconOfServiceType(props.social.type)">
+ <CustomTag type="gray" :icon="getIconOfServiceType(props.social.type)">
  {{ userName }}
  </CustomTag>
  </CustomRouterLink>