feat: rework color scheme

tailwind.config.js

@@ -1,5 +1,4 @@
 const defaultTheme = require('tailwindcss/defaultTheme')
-const dracula = require('tailwind-dracula/colors')
 
 module.exports = {
   darkMode: 'class',
@@ -17,22 +16,6 @@ module.exports = {
       fontFamily: {
         sans: ['InterVariable', ...defaultTheme.fontFamily.sans],
       },
-      colors: {
-        ...dracula,
-        primary: dracula.purple,
-        gray: dracula.darker,
-        blue: dracula.blue,
-        cyan: dracula.cyan,
-        green: dracula.green,
-        orange: dracula.orange,
-        pink: dracula.pink,
-        purple: dracula.purple,
-        red: dracula.red,
-        yellow: dracula.yellow,
-        dark: dracula.dark,
-        darker: dracula.darker,
-        light: dracula.light,
-      },
       backgroundImage: {
         'cover-gradient':
           'linear-gradient(180deg,transparent 0,rgba(0,0,0,.15) 70%,rgba(0,0,0,.5))',
@@ -41,11 +24,11 @@ module.exports = {
         DEFAULT: {
           css: {
             a: {
-              color: theme('colors.primary.500'),
+              color: theme('colors.purple.500'),
               '&:hover': {
-                color: `${theme('colors.primary.400')} !important`,
+                color: `${theme('colors.purple.400')} !important`,
               },
-              code: { color: theme('colors.primary.400') },
+              code: { color: theme('colors.purple.400') },
             },
             pre: {
               backgroundColor: theme('colors.gray.900'),
@@ -67,7 +50,9 @@ module.exports = {
   },
   plugins: [
     require('@tailwindcss/typography'),
-    require('tailwind-dracula')('dracula'),
+    require('@catppuccin/tailwindcss', {
+      defaultFlavour: 'mocha',
+    }),
     require('@tailwindcss/aspect-ratio'),
   ],
   content: ['./src/**/*.md', './src/**/*.html', './src/_includes/**/*.liquid'],