feat: update versions and improve dark mode

assets/css/theme.css

@@ -1,4 +1,5 @@
-.dark-mode {
+/* TODO: refactorizar estas variables y usar el dark de tailwindcss */
+.dark {
   --color: theme('colors.gray-main.400');
 
   /* --color: theme('colors.gray-main.50'); */

components/home/YoutubeVideos.vue

@@ -21,9 +21,7 @@
     <div v-if="shouldShowVideo" class="lightbox" @click="hideVideo()">
       <div class="lightbox-container">
         <div class="lightbox-content">
-          <button class="lightbox-close" @click="hideVideo()">
-            Close | ✕
-          </button>
+          <button class="lightbox-close" @click="hideVideo()">Close | ✕</button>
           <div class="video-container">
             <iframe
               id="youtube"

components/icons/IconSun.vue

@@ -1,18 +1,18 @@
 <template>
   <IconBase view-box="0 0 512 512" icon-name="sun" v-bind="$props">
     <path
-      style="fill: #ffa600;"
+      style="fill: #ffa600"
       d="M507.834,301.608l-54.769-48.312l52.832-50.399c1.941-1.852,2.74-4.591,2.099-7.189 c-0.642-2.597-2.629-4.655-5.211-5.401l-70.316-20.292l25.988-68.056c0.955-2.5,0.495-5.316-1.204-7.389 c-1.7-2.072-4.383-3.085-7.038-2.657l-72.274,11.652l-5.878-72.561c-0.216-2.666-1.846-5.015-4.275-6.161 c-2.429-1.146-5.291-0.917-7.504,0.601l-60.266,41.342L263.409,3.742C262.064,1.426,259.579,0,256.889,0 c-2.69,0-5.174,1.426-6.519,3.742L208.347,76.11l-72.69-41.953c-2.327-1.343-5.197-1.349-7.528-0.018 c-2.333,1.331-3.773,3.799-3.78,6.473l-0.176,72.795l-72.965-6.014c-2.675-0.22-5.275,0.997-6.807,3.194 c-1.533,2.197-1.771,5.041-0.622,7.459l31.242,65.835L6.508,209.562c-2.516,0.943-4.335,3.15-4.773,5.789 c-0.438,2.638,0.575,5.308,2.656,7.003l56.619,46.152l-50.813,52.41c-1.866,1.925-2.559,4.694-1.816,7.264 c0.744,2.57,2.81,4.55,5.419,5.194l71.055,17.551L61.56,419.936c-0.856,2.535-0.286,5.331,1.494,7.336 c1.781,2.005,4.502,2.913,7.137,2.382l71.76-14.443l8.721,72.278c0.319,2.655,2.041,4.938,4.513,5.99 c2.474,1.052,5.323,0.712,7.475-0.891l58.596-43.647l39.055,59.566c1.382,2.179,3.789,3.492,6.367,3.492 c0.098,0,0.196-0.002,0.295-0.006c2.687-0.104,5.115-1.626,6.368-3.992l34.107-62.405l61.839,38.974 c2.273,1.432,5.137,1.55,7.522,0.31c2.382-1.24,3.919-3.65,4.03-6.322l3.031-72.734l72.674,8.84c2.664,0.324,5.31-0.791,6.928-2.927 c1.618-2.137,1.966-4.969,0.914-7.43l-28.636-66.997l69.465-23.003c2.552-0.845,4.456-2.979,4.997-5.599 C510.752,306.09,509.845,303.383,507.834,301.608z"
     />
     <ellipse
-      style="fill: #ffdb2d;"
+      style="fill: #ffdb2d"
       cx="254.35"
       cy="254.691"
       rx="155.069"
       ry="154.949"
     />
     <path
-      style="fill: #ffca00;"
+      style="fill: #ffca00"
       d="M254.354,99.743c-3.884,0-7.732,0.147-11.543,0.428c80.25,5.901,143.525,72.825,143.525,154.521 c0,81.695-63.275,148.619-143.525,154.521c3.811,0.28,7.66,0.428,11.543,0.428c85.641,0,155.068-69.373,155.068-154.948 C409.422,169.116,339.995,99.743,254.354,99.743z"
     />
   </IconBase>

components/ui/TheHeader.vue

@@ -3,9 +3,7 @@
     <div class="container flex justify-between items-center">
       <nuxt-link to="/" class="flex items-center">
         <Logo />
-        <h1 class="secondary-title ml-4">
-          Pablo Sirera
-        </h1>
+        <h1 class="secondary-title ml-4">Pablo Sirera</h1>
       </nuxt-link>
       <div class="flex items-center">
         <ul class="text-center hidden sm:flex sm:items-center">

nuxt.config.js

@@ -169,6 +169,8 @@ export default {
    */
   colorMode: {
     preference: 'light',
+    fallback: 'dark',
+    classSuffix: '',
   },
   /*
    ** nuxt-i18n config

package.json

@@ -29,29 +29,29 @@
     "@nuxtjs/pwa": "^3.0.0-beta.20",
     "@nuxtjs/robots": "^2.4.2",
     "@nuxtjs/sitemap": "^2.4.0",
-    "nuxt": "^2.13.0",
+    "nuxt": "^2.14.12",
     "nuxt-fontawesome": "^0.4.0",
     "nuxt-i18n": "^6.12.2",
     "timeline-vuejs": "^1.1.6",
     "v-click-outside": "^3.0.1"
   },
   "devDependencies": {
-    "@nuxtjs/color-mode": "^1.0.0",
-    "@nuxtjs/eslint-config": "^3.0.0",
+    "@nuxtjs/color-mode": "^1.1.1",
+    "@nuxtjs/eslint-config": "^3.1.0",
     "@nuxtjs/eslint-module": "^2.0.0",
     "@nuxtjs/google-analytics": "^2.4.0",
     "@nuxtjs/stylelint-module": "^4.0.0",
     "@nuxtjs/svg": "^0.1.11",
-    "@nuxtjs/tailwindcss": "^2.0.0",
+    "@nuxtjs/tailwindcss": "^3.3.4",
     "babel-eslint": "^10.1.0",
-    "eslint": "^7.2.0",
+    "eslint": "^7.15.0",
     "eslint-config-prettier": "^6.11.0",
     "eslint-plugin-nuxt": "^1.0.0",
     "eslint-plugin-prettier": "^3.1.4",
     "husky": "^4.2.5",
     "lint-staged": "^10.2.11",
     "node-sass": "^4.14.1",
-    "prettier": "^2.0.5",
+    "prettier": "^2.2.1",
     "sass-loader": "^8.0.2",
     "stylelint": "^13.6.1",
     "stylelint-config-prettier": "^8.0.1",

tailwind.config.js

@@ -13,7 +13,7 @@ module.exports = {
           600: '#9bd681',
           700: '#81a78f',
           '700-40': '#81a78f47',
-          '800': '#435d4c',
+          800: '#435d4c',
         },
         'gray-main': {
           50: '#ebf4f1',
@@ -58,4 +58,8 @@ module.exports = {
       'nuxt.config.js',
     ],
   },
+  experimental: {
+    darkModeVariant: true,
+  },
+  dark: 'class',
 }