Add custom theme option

README.md

@@ -22,7 +22,7 @@
 
 It's all possible using [GitHub API](https://developer.github.com/v3/) (for automatically populating your website with content) and [Article-api](https://github.com/arifszn/article-api) (for fetching recent blog posts).
 
-✓ [21 Themes](#themes)\
+✓ [30 Themes](#themes)\
 ✓ [Google Analytics](#google-analytics)\
 ✓ [Hotjar](#hotjar)\
 ✓ [Meta Tags](#meta-tags)\
@@ -180,7 +180,28 @@ const config = {
       'black',
       'luxury',
       'dracula',
+      'cmyk',
+      'autumn',
+      'business',
+      'acid',
+      'lemonade',
+      'night',
+      'coffee',
+      'winter',
+      'procyon',
     ],
+
+    // Custom theme
+    customTheme: {
+      procyon: {
+        primary: '#fc055b',
+        secondary: '#219aaf',
+        accent: '#e8d03a',
+        neutral: '#2A2730',
+        'base-100': '#E3E3ED',
+        '--rounded-box': '3rem',
+      },
+    },
   },
 };
 ```
@@ -189,7 +210,7 @@ const config = {
 
 ### Themes
 
-There are 21 themes available that can be selected from the dropdown.
+There are 30 themes available that can be selected from the dropdown.
 
 The default theme can be specified.
 
@@ -204,6 +225,28 @@ module.exports = {
 };
 ```
 
+You can create your own custom theme by modifying these values:
+
+```js
+// gitprofile.config.js
+module.exports = {
+  // ...
+  themeConfig: {
+    customTheme: {
+      procyon: {
+        primary: '#fc055b',
+        secondary: '#219aaf',
+        accent: '#e8d03a',
+        neutral: '#2A2730',
+        'base-100': '#E3E3ED',
+        '--rounded-box': '3rem',
+      },
+    },
+    // ...
+  },
+};
+```
+
 ![Theme Dropdown](https://arifszn.github.io/assets/img/hosted/gitprofile/themes-1.png)
 
 Here are some screenshots of different themes.\

gitprofile.config.js

@@ -132,7 +132,20 @@ const config = {
       'night',
       'coffee',
       'winter',
+      'procyon',
     ],
+
+    // Custom theme
+    customTheme: {
+      procyon: {
+        primary: '#fc055b',
+        secondary: '#219aaf',
+        accent: '#e8d03a',
+        neutral: '#2A2730',
+        'base-100': '#E3E3ED',
+        '--rounded-box': '3rem',
+      },
+    },
   },
 };
 

postcss.config.js

@@ -1,6 +1,7 @@
-module.exports = {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
+import tailwind from 'tailwindcss';
+import autoprefixer from 'autoprefixer';
+import tailwindConfig from './tailwind.config.js';
+
+export default {
+  plugins: [tailwind(tailwindConfig), autoprefixer],
 };

tailwind.config.js

@@ -1,4 +1,6 @@
-module.exports = {
+import config from './gitprofile.config';
+
+export default {
   content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
   theme: {
     extend: {},
@@ -6,5 +8,6 @@ module.exports = {
   plugins: [require('daisyui')],
   daisyui: {
     logs: false,
+    themes: [...config.themeConfig.themes, config.themeConfig.customTheme],
   },
 };

vite.config.js

@@ -1,5 +1,6 @@
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
+import postcss from './postcss.config.js';
 
 // https://vitejs.dev/config/
 export default defineConfig({
@@ -7,4 +8,7 @@ export default defineConfig({
   // If you are deploying to https://<USERNAME>.github.io/<REPO>/, for example your repository is at https://github.com/<USERNAME>/<REPO>, then set base to '/<REPO>/'.
   base: '/gitprofile/',
   plugins: [react()],
+  css: {
+    postcss,
+  },
 });