✨ feat(toggledarkmode.vue): add darkmode toggle

README.md

@@ -1,11 +1,11 @@
 # What Should I Design? 🎨
 
 You're fresh out of learning UI/UX Design, you want to get your hands dirty with _almost_ real-world example problems to harness your design skills and build up a portfolio. 
-Problem is, 
+Problem is, You don't know what to design?.
 
-You don't know what to design?.
 
+Well [Fake Clients](https://fakeclients.com/) isn't completely Free and is limited, and [WhatshouldIdesign.com](http://www.whatshouldidesign.com/) is all jokes. So here's an alternative completely free and crowd-sourced collection of real-world design problems to try.
 
-Well [Fake Clients](https://fakeclients.com/) isn't completely Free and is limited, and [WhatshouldIdesign.com](http://www.whatshouldidesign.com/) is all jokes. So here's an alternative completely free and crowd-sourced collection of design problems to try.
+![what-should-i-design-banner-image]()
 
 

package.json

@@ -2,7 +2,12 @@
   "name": "what-should-i-design",
   "version": "0.0.0",
   "license": "(MIT OR Apache-2.0)",
-  "keywords": ["ui/ux", "problem-statment", "what-should-i-design", "design"],
+  "keywords": [
+    "ui/ux",
+    "problem-statment",
+    "what-should-i-design",
+    "design"
+  ],
   "author": {
     "email": "martinsvictor.nd@gmail.com",
     "name": "MartinsOnuoha",
@@ -21,6 +26,7 @@
     "commit": "cz"
   },
   "dependencies": {
+    "@vueuse/core": "^10.5.0",
     "click-outside-vue3": "^4.0.1",
     "pinia": "^2.1.7",
     "vue": "^3.3.4",

src/assets/styles/color-scheme.scss

@@ -0,0 +1,5 @@
+body[color-scheme="dark"] {
+  @import "@/views/HomeView.dark";
+  @import '@/components/AppCategory/_AppCategory.dark';
+  @import '@/components/AppStatementCard/_AppStatementCard.dark';
+}

src/assets/styles/main.css → src/assets/styles/main.scss

@@ -1,17 +1,12 @@
 @import url('https://fonts.googleapis.com/css2?family=Ibarra+Real+Nova:wght@400;500;600;700&display=swap');
-@import './scrollbar.css';
+@import 'variables';
+@import 'scrollbar';
+@import 'color-scheme';
 
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
-:root {
-  --color-dark: #2E2E41;
-  --color-dark-light: #272C3A;
-  --color-dark-text: #242424;
-  --color-ghostwhite: ghostwhite;
-}
-
 body {
   font-family: 'Ibarra Real Nova', serif;
   color: var(--color-dark-text);

src/assets/styles/variables.scss

@@ -0,0 +1,6 @@
+:root {
+  --color-dark: #2E2E41;
+  --color-dark-light: #272C3A;
+  --color-dark-text: #242424;
+  --color-ghostwhite: ghostwhite;
+}

src/components/AppCategory/AppCategory.vue

@@ -30,8 +30,6 @@ const categoryColorGroups = [
 }
 
 @media (prefers-color-scheme: dark) {
-  .AppCategory {
-    @apply bg-transparent;
-  }
+  @import '_AppCategory.dark';
 }
 </style>

src/components/AppCategory/__AppCategory.dark.scss

@@ -0,0 +1,3 @@
+.AppCategory {
+  @apply bg-transparent;
+}

src/components/AppHeader/HeaderActions.vue

@@ -0,0 +1,25 @@
+<script setup>
+import MdiGithub from "@/components/Icons/MdiGithub.vue";
+import ToggleDarkMode from "@/components/AppHeader/ToggleDarkMode.vue";
+
+const GITHUB_URL = 'https://github.com/MartinsOnuoha/what-should-i-design'
+</script>
+
+<template>
+  <div class="HeaderActions">
+    <ToggleDarkMode />
+    <a :href="GITHUB_URL" target="_blank" aria-label="github" title="Contribute on Github" class="HeaderActions__github">
+      <MdiGithub />
+    </a>
+  </div>
+</template>
+
+<style lang="scss">
+.HeaderActions {
+  @apply flex text-2xl text-gray-600;
+
+  &__github {
+    @apply ml-3 border-l-gray-300 border-l pl-3;
+  }
+}
+</style>

src/components/AppHeader/ToggleDarkMode.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { useDark, useToggle } from '@vueuse/core'
+import MdiWhiteBalanceSunny from "@/components/Icons/MdiWhiteBalanceSunny.vue";
+import MdiMoonWaningCrescent from "@/components/Icons/MdiMoonWaningCrescent.vue";
+
+const isDark = useDark({
+  selector: 'body',
+  attribute: 'color-scheme',
+  valueDark: 'dark',
+  valueLight: 'light',
+})
+
+const toggleDark = useToggle(isDark)
+</script>
+
+<template>
+  <button @click="toggleDark()" aria-label="toggle dark-mode" title="toggle dark-mode"  class="ToggleDarkMode">
+    <MdiWhiteBalanceSunny v-show="isDark" />
+    <MdiMoonWaningCrescent v-show="!isDark" />
+  </button>
+</template>
+
+<style scoped lang="scss">
+.ToggleDarkMode {
+  @apply rounded-full;
+}
+</style>

src/components/AppStatementCard/AppStatementCard.vue

@@ -25,31 +25,8 @@ const getCategories = useDBStore().categories.filter(category => props.statement
 </template>
 
 <style lang="scss">
-.AppStatementCardContainer {
-  &:focus {
-    @apply outline-amber-500;
-  }
-}
-.AppStatementCard {
-  @apply bg-white h-52 w-full cursor-pointer p-5 rounded-lg border relative;
-
-  &__content {
-    @apply text-lg;
-  }
-
-  &__categories {
-    @apply absolute bottom-2 left-0 w-full p-5;
-  }
-}
-
+@import "AppStatementCard";
 @media (prefers-color-scheme: dark) {
-  .AppStatementCardContainer {
-    @apply rounded-lg bg-gradient-to-r from-pink-500 via-red-500 to-yellow-500 p-1;
-  }
-  .AppStatementCard {
-    @apply shadow-2xl border-none;
-    background-color: var(--color-dark);
-    color: var(--color-ghostwhite);
-  }
+  @import 'AppStatementCard.dark';
 }
 </style>

src/components/AppStatementCard/_AppStatementCard.dark.scss

@@ -0,0 +1,8 @@
+.AppStatementCardContainer {
+  @apply rounded-lg bg-gradient-to-r from-pink-500 via-red-500 to-yellow-500 p-1;
+}
+.AppStatementCard {
+  @apply shadow-2xl border-none;
+  background-color: var(--color-dark);
+  color: var(--color-ghostwhite);
+}

src/components/AppStatementCard/_AppStatementCard.scss

@@ -0,0 +1,17 @@
+.AppStatementCardContainer {
+  @apply rounded-lg p-1;
+  &:focus {
+    @apply outline-amber-500;
+  }
+  .AppStatementCard {
+    @apply bg-white h-52 w-full cursor-pointer p-5 rounded-lg border relative hover:bg-amber-50 transition-all;
+
+    &__content {
+      @apply text-lg;
+    }
+
+    &__categories {
+      @apply absolute bottom-2 left-0 w-full p-5;
+    }
+  }
+}

src/components/Icons/MdiGithub.vue

@@ -0,0 +1,10 @@
+
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M12 2A10 10 0 0 0 2 12c0 4.42 2.87 8.17 6.84 9.5c.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34c-.46-1.16-1.11-1.47-1.11-1.47c-.91-.62.07-.6.07-.6c1 .07 1.53 1.03 1.53 1.03c.87 1.52 2.34 1.07 2.91.83c.09-.65.35-1.09.63-1.34c-2.22-.25-4.55-1.11-4.55-4.92c0-1.11.38-2 1.03-2.71c-.1-.25-.45-1.29.1-2.64c0 0 .84-.27 2.75 1.02c.79-.22 1.65-.33 2.5-.33c.85 0 1.71.11 2.5.33c1.91-1.29 2.75-1.02 2.75-1.02c.55 1.35.2 2.39.1 2.64c.65.71 1.03 1.6 1.03 2.71c0 3.82-2.34 4.66-4.57 4.91c.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12A10 10 0 0 0 12 2Z"></path></svg>
+</template>
+
+<script>
+export default {
+  name: 'MdiGithub'
+}
+</script>

src/components/Icons/MdiMoonWaningCrescent.vue

@@ -0,0 +1,10 @@
+
+<template>
+  <svg class="-rotate-12" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M2 12a10 10 0 0 0 13 9.54a10 10 0 0 1 0-19.08A10 10 0 0 0 2 12Z"></path></svg>
+</template>
+
+<script>
+export default {
+  name: 'MdiMoonWaningCrescent'
+}
+</script>

src/components/Icons/MdiWhiteBalanceSunny.vue

@@ -0,0 +1,10 @@
+
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="m3.55 19.09l1.41 1.41l1.8-1.79l-1.42-1.42M12 6c-3.31 0-6 2.69-6 6s2.69 6 6 6s6-2.69 6-6c0-3.32-2.69-6-6-6m8 7h3v-2h-3m-2.76 7.71l1.8 1.79l1.41-1.41l-1.79-1.8M20.45 5l-1.41-1.4l-1.8 1.79l1.42 1.42M13 1h-2v3h2M6.76 5.39L4.96 3.6L3.55 5l1.79 1.81l1.42-1.42M1 13h3v-2H1m12 9h-2v3h2"></path></svg>
+</template>
+
+<script>
+export default {
+  name: 'MdiWhiteBalanceSunny'
+}
+</script>

src/main.ts

@@ -4,7 +4,7 @@ import { createPinia } from 'pinia'
 import vClickOutside from "click-outside-vue3"
 import App from './App.vue'
 import router from './router'
-import './assets/styles/main.css'
+import './assets/styles/main.scss'
 
 const app = createApp(App)
 

src/stores/db.ts

@@ -13,7 +13,7 @@ export type Category = {
   name: string;
   emoji: string;
 }
-export const useDBStore = defineStore('counter', {
+export const useDBStore = defineStore('db', {
   state: () => {
     return {
       categories: categories.data,

src/views/HomeView.vue

@@ -3,6 +3,7 @@ import AppSidePanel from '@/components/AppSideBanner/AppSideBanner.vue'
 import AppStatementCard from "@/components/AppStatementCard/AppStatementCard.vue";
 import AppFilter from '@/components/AppFilter/AppFilter.vue'
 import { useDBStore } from "@/stores/db";
+import HeaderActions from "@/components/AppHeader/HeaderActions.vue";
 
 const { statements } = useDBStore()
 </script>
@@ -13,6 +14,7 @@ const { statements } = useDBStore()
     <main>
       <header class="HomeView__header">
         <AppFilter />
+        <HeaderActions />
       </header>
       <section class="HomeView__content">
         <AppStatementCard v-for="(statement, index) in statements" :key="index" :statement="statement" />
@@ -31,7 +33,7 @@ const { statements } = useDBStore()
   }
 
   &__header {
-    @apply pt-4 pb-4
+    @apply pt-4 pb-4 flex items-center justify-between;
   }
 
   &__content {
@@ -41,8 +43,6 @@ const { statements } = useDBStore()
 }
 
 @media (prefers-color-scheme: dark) {
-  .HomeView {
-    background-color: var(--color-dark);
-  }
+  @import "HomeView.dark";
 }
 </style>