feat(global): add dark theme (#3)

* fix(global): stylelint errors

* feat(blog): add dark theme

* feat(projects): add dark theme

* fix(projects): background card

assets/css/global.css

@@ -22,15 +22,32 @@ body::-webkit-scrollbar {
 }
 
 .title {
-  font-family: 'Quicksand', 'Source Sans Pro', -apple-system, BlinkMacSystemFont,
-    'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
   display: block;
   font-weight: 300;
   font-size: 40px;
-  color: #35495e;
+  color: var(--title-color);
   letter-spacing: 1px;
 }
 
+.secondary-title {
+  color: var(--title-color);
+
+  @apply text-3xl text-center;
+}
+
+.third-title,
+h2 {
+  color: var(--title-color);
+
+  @apply text-2xl font-semibold;
+}
+
 .container {
   margin: 0 auto;
 }
+
+body {
+  background-color: var(--bg);
+  color: var(--color);
+  transition: background-color 0.3s linear;
+}

assets/css/main.css

@@ -1,4 +1,5 @@
+@import url('./variables.css');
 @import url('./global.css');
+@import url('./theme.css');
 @import url('./animations.css');
-@import url('./variables.css');
 @import url('./posts.css');

assets/css/posts.css

@@ -5,9 +5,6 @@ article > .nuxt-content {
 .nuxt-content h2 {
   margin-top: 30px;
   margin-bottom: 10px;
-  font-size: 1.5rem;
-  font-weight: bold;
-  color: theme('colors.blue-main.700');
 }
 
 .nuxt-content .vue {
@@ -22,6 +19,10 @@ article > .nuxt-content {
   padding: 0 3px;
 }
 
+.dark-mode .nuxt-content .code {
+  background-color: theme('colors.blue-main.400');
+}
+
 .nuxt-content .nuxt-content-highlight pre {
   border-radius: 5px;
   font-size: 0.875rem;

assets/css/theme.css

@@ -0,0 +1,15 @@
+.dark-mode {
+  --color: theme('colors.gray-main.400');
+
+  /* --color: theme('colors.gray-main.50'); */
+  --bg: theme('colors.dark');
+
+  /* --bg: theme('colors.blue-main.950'); */
+  --icons-color: theme('colors.white');
+  --title-color: theme('colors.gray-main.400');
+  --nav-links-color: var(--color);
+  --nav-link-active-color: var(--color);
+  --tag-bg: var(--bg);
+  --tag-bg-hover: var(--bg);
+  --blog-card-shadow: var(--bg);
+}

assets/css/variables.css

@@ -3,4 +3,13 @@
   --tablet: 768px;
   --desktop: 992px;
   --large-desktop: 1200px;
+  --color: theme('colors.blue-main.900');
+  --bg: theme('colors.white');
+  --icons-color: theme('colors.blue-main.800');
+  --title-color: theme('colors.blue-main.700');
+  --nav-links-color: theme('colors.blue-main.800');
+  --nav-link-active-color: theme('colors.gray-main.600');
+  --tag-bg: theme('colors.white');
+  --tag-bg-hover: theme('colors.gray-main.100');
+  --blog-card-shadow: #dadada80;
 }

components/blog/BlogCard.vue

@@ -1,13 +1,12 @@
 <template>
   <div class="post" @click="selectPost">
-    <h1 class="font-semibold text-2xl text-blue-main-700">
+    <h1 class="third-title">
       {{ title }}
     </h1>
     <div class="bottom-post">
       <span class="date">🗓 {{ getDate(date) }}</span>
       <span class="clock-icon flex items-center">
-        <fa icon="clock" class="icon mr-1" />
-        {{ getTimeToReadText(timeToRead) }}
+        ⏱ {{ getTimeToReadText(timeToRead) }}
       </span>
     </div>
     <p class="pt-2">{{ description }}</p>
@@ -83,14 +82,14 @@ $mobile: var(--mobile);
 }
 
 .post:hover {
-  box-shadow: 4px 10px 20px #dadada80;
+  box-shadow: 4px 10px 20px var(--blog-card-shadow);
   transform: translate3d(0, -3px, 0);
 }
 
 .bottom-post {
   padding-top: 5px;
 
-  @apply flex items-center opacity-50;
+  @apply flex items-center;
 
   & span:first-child {
     @apply pr-4;

components/projects/ProjectCard.vue

@@ -1,12 +1,8 @@
 <template>
-  <div class="project-card">
+  <div class="project-card" :class="cardClasses">
     <div>
       <div class="wrapper-title">
-        <img
-          src="@/assets/icons/repo.svg"
-          :alt="$t(project.description)"
-          loading="lazy"
-        />
+        <RepoIcon class="icon" />
         <h1 class="title">
           <a :href="project.url" class="title-link">
             {{ project.name }}
@@ -21,35 +17,37 @@
         <span class="language-text">{{ project.language }}</span>
       </span>
       <a class="link" :href="`${project.url}/stargazers`">
-        <img
-          src="@/assets/icons/star.svg"
-          :alt="$t(project.description)"
-          loading="lazy"
-        />
-        {{ project.stars }}
+        <StarIcon class="icon mr-1" /> {{ project.stars }}
       </a>
       <a class="link" :href="`${project.url}/network/members`">
-        <img
-          src="@/assets/icons/repo-forked.svg"
-          :alt="$t(project.description)"
-          loading="lazy"
-        />
-        {{ project.forks }}
+        <ForkedIcon class="icon mr-1" /> {{ project.forks }}
       </a>
     </p>
   </div>
 </template>
 
 <script>
+import RepoIcon from '@/assets/icons/repo.svg?inline'
+import StarIcon from '@/assets/icons/star.svg?inline'
+import ForkedIcon from '@/assets/icons/repo-forked.svg?inline'
+
 export default {
   name: 'ProjectCard',
+  components: {
+    RepoIcon,
+    StarIcon,
+    ForkedIcon,
+  },
   props: {
     project: {
       type: Object,
       default: undefined,
     },
   },
   computed: {
+    cardClasses() {
+      return this.$colorMode.preference
+    },
     dotLanguageClasses() {
       return {
         'dot-language-vue': this.project.language === 'Vue',
@@ -65,10 +63,10 @@ export default {
   @apply flex flex-col justify-between text-sm border border-gray-main-200 p-4 mb-4 rounded-sm;
 
   .wrapper-title {
-    @apply flex;
+    @apply flex items-center;
 
     .title {
-      @apply text-sm ml-2;
+      @apply text-sm ml-2 font-semibold;
 
       &-link {
         text-decoration: none;
@@ -92,9 +90,8 @@ export default {
     .dot-language {
       top: 1px;
       border-radius: 50%;
-      margin-right: 3px;
 
-      @apply relative inline-block w-3 h-3;
+      @apply relative inline-block w-3 h-3 mr-1;
 
       &-vue {
         @apply bg-blue-main-800;
@@ -109,7 +106,7 @@ export default {
       text-decoration: none;
       margin-right: 24px;
 
-      @apply text-gray-main-600 flex items-start;
+      @apply text-gray-main-600 flex items-center;
 
       &:hover {
         text-decoration: underline;
@@ -122,5 +119,21 @@ export default {
       }
     }
   }
+
+  &.dark {
+    background-color: #a0aec02b;
+
+    .icon {
+      fill: var(--color);
+    }
+
+    .title-link {
+      color: var(--color);
+    }
+
+    .info .link {
+      color: var(--color);
+    }
+  }
 }
 </style>

components/ui/CoffeeWidget.vue

@@ -33,7 +33,7 @@ export default {
   text-decoration: none;
   display: inline-flex;
   color: #fff;
-  background-color: #4fc08d;
+  background-color: theme('colors.primary');
   border-radius: 5px;
   border: 1px solid transparent;
   padding: 7px 10px 7px 10px;

components/ui/ColorModePicker.vue

@@ -0,0 +1,58 @@
+<template>
+  <div>
+    <ul class="flex items-center">
+      <li v-if="$colorMode.preference !== 'light'">
+        <IconLight
+          :class="getClasses('light')"
+          class="cursor-pointer"
+          @click="$colorMode.preference = 'light'"
+        />
+      </li>
+      <li v-else>
+        <IconDark
+          :class="getClasses('dark')"
+          class="cursor-pointer"
+          @click="$colorMode.preference = 'dark'"
+        />
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ColorModePicker',
+  components: {
+    IconLight: () => import('@/assets/icons/light.svg?inline'),
+    IconDark: () => import('@/assets/icons/dark.svg?inline'),
+  },
+  methods: {
+    getClasses(color) {
+      if (this.$colorMode && this.$colorMode.unknown) {
+        return {}
+      }
+      return {
+        [this.$colorMode.value]: true,
+        selected: color === this.$colorMode.value,
+      }
+    },
+    selectColor(color) {
+      this.$colorMode.preference = color
+    },
+  },
+}
+</script>
+
+<style scoped lang="scss">
+ul {
+  @apply m-0 p-0 list-none;
+
+  li {
+    @apply inline-block px-1;
+
+    .dark {
+      fill: theme('colors.white');
+    }
+  }
+}
+</style>