refactor: update dark color

src/assets/css/vars.css

@@ -1,11 +1,13 @@
-/* COLORS */
 :root {
-	/* use with rgb() or rgba(). E.g: rgb(var(--dark)) -> rgb(20, 20, 26)  */
-	--dark: 20, 20, 26;
-	/* use with rgb() or rgba(). E.g: rgb(var(--light)) -> rgb(244, 247, 245)  */
+	/* COLORS */
+	/* To use with rgb() or rgba().*/
+
+	/* E.g: rgb(var(--dark)) -> rgb(29, 29, 29)  */
+	--dark: 29, 29, 29;
+	/* E.g: rgb(var(--light)) -> rgb(244, 247, 245)  */
 	--light: 244, 247, 245;
-	/* use with rgb() or rgba(). E.g: rgb((var(--primary)) -> rgb(95, 68, 145)  */
+	/* E.g: rgb((var(--primary)) -> rgb(95, 68, 145)  */
 	--primary: 95, 68, 145;
-	/* use with rgb() or rgba(). E.g: rgb((var(--secondary)) -> rgb(74, 156, 172)  */
+	/* E.g: rgb((var(--secondary)) -> rgb(74, 156, 172)  */
 	--secondary: 74, 156, 172;
 }

src/pages/index.vue

@@ -1,5 +1,5 @@
 <template>
-	<main class="flex flex-1 w-screen h-screen bg-red-600">
+	<main class="flex flex-1 w-screen h-screen bg-dark">
 		<!--	<HomeLandingLoader /> -->
 
 		<div id="css" class="absolute top-0 left-0 w-full h-full" />

tailwind.config.js

@@ -1,11 +1,11 @@
 const colors = require("tailwindcss/colors");
 const theme = require("tailwindcss/defaultTheme");
 
-delete colors['lightBlue'];
-delete colors['warmGray'];
-delete colors['trueGray'];
-delete colors['coolGray'];
-delete colors['blueGray'];
+colors.lightBlue = undefined;
+colors.warmGray = undefined;
+colors.trueGray = undefined;
+colors.coolGray = undefined;
+colors.blueGray = undefined;
 
 /** @type {import('tailwindcss').Config} */
 module.exports = {