Remove CustomTheme interface and update for daisyUI v5

- Remove CustomTheme interface from global.d.ts
- Remove SanitizedCustomTheme interface from sanitized-config.tsx
- Remove customTheme property from ThemeConfig interfaces
- Remove customTheme object from utils/index.tsx
- Delete default-custom-theme.tsx file
- Update README.md to show custom themes are now defined in CSS
- Add procyon custom theme using @plugin 'daisyui/theme' syntax
- Update gitprofile.config.ts to remove customTheme configuration

README.md

@@ -43,7 +43,7 @@
 **Features:**
 
 ✓ [Easy to Setup](#-installation--setup)  
-✓ [33 Themes](#themes)  
+✓ [37 Themes](#themes)  
 ✓ [Google Analytics](#google-analytics)  
 ✓ [Hotjar](#hotjar)  
 ✓ [SEO](#seo)  
@@ -202,11 +202,7 @@ const CONFIG = {
       ],
     },
   },
-  seo: {
+  seo: { title: 'Portfolio of Ariful Alam', description: '', imageURL: '' },
-    title: 'Portfolio of Ariful Alam',
-    description: '',
-    imageURL: '',
-  },
   social: {
     linkedin: 'ariful-alam',
     x: 'arif_szn',
@@ -317,10 +313,7 @@ const CONFIG = {
     id: '', // GA3 tracking id/GA4 tag id UA-XXXXXXXXX-X | G-XXXXXXXXXX
   },
   // Track visitor interaction and behavior. https://www.hotjar.com
-  hotjar: {
+  hotjar: { id: '', snippetVersion: 6 },
-    id: '',
-    snippetVersion: 6,
-  },
   themeConfig: {
     defaultTheme: 'nord',
 
@@ -369,19 +362,11 @@ const CONFIG = {
       'dim',
       'nord',
       'sunset',
+      'caramellatte',
+      'abyss',
+      'silk',
       'procyon',
     ],
-
-    // Custom theme, applied to `procyon` theme
-    customTheme: {
-      primary: '#fc055b',
-      secondary: '#219aaf',
-      accent: '#e8d03a',
-      neutral: '#2A2730',
-      'base-100': '#E3E3ED',
-      '--rounded-box': '3rem',
-      '--rounded-btn': '3rem',
-    },
   },
 
   // Optional Footer. Supports plain text or HTML.
@@ -399,7 +384,7 @@ export default CONFIG;
 
 ### Themes
 
-There are 33 themes available that can be selected from the dropdown.
+There are 37 themes available that can be selected from the dropdown.
 
 The default theme can be specified.
 
@@ -418,34 +403,23 @@ const CONFIG = {
   <img src="https://github.com/arifszn/gitprofile/assets/45073703/91a2d9e6-67e5-47b4-9752-1881ac0f907f" alt="Theme Dropdown" width="50%">
 </p>
 
-You can create your own custom theme by modifying these values. Theme `procyon` will have the custom styles.
+You can create your own custom theme by modifying the CSS variables in `src/assets/index.css`. Theme `procyon` is defined as a custom theme.
 
-```ts
+```css
-// gitprofile.config.ts
+/* src/assets/index.css */
-const CONFIG = {
+@plugin "daisyui/theme" {
-  /**
+  name: "procyon";
-   * Defines the custom theme colors and styles for the application.
+  color-scheme: light;
-   * The theme includes the following properties:
+
-   * - `primary`: The primary color used throughout the application.
+  --color-base-100: #E3E3ED;
-   * - `secondary`: The secondary color used for accents and highlights.
+  --color-base-200: #d1d1db;
-   * - `accent`: The accent color used for special elements.
+  --color-base-300: #bfbfc9;
-   * - `neutral`: The neutral color used for backgrounds and text.
+  --color-base-content: #2A2730;
-   * - `base-100`: The base background color.
+  --color-primary: #fc055b;
-   * - `--rounded-box`: The border radius for boxes and containers.
+  --color-primary-content: #ffffff;
-   * - `--rounded-btn`: The border radius for buttons.
+  --color-secondary: #219aaf;
-   */
+  --color-secondary-content: #ffffff;
-  themeConfig: {
+}
-    customTheme: {
-      primary: '#fc055b',
-      secondary: '#219aaf',
-      accent: '#e8d03a',
-      neutral: '#2A2730',
-      'base-100': '#E3E3ED',
-      '--rounded-box': '3rem',
-      '--rounded-btn': '3rem',
-    },
-  },
-};
 ```
 
 ### Google Analytics
@@ -456,9 +430,7 @@ const CONFIG = {
 // gitprofile.config.ts
 const CONFIG = {
   // ...
-  googleAnalytics: {
+  googleAnalytics: { id: 'G-XXXXXXXXX' },
-    id: 'G-XXXXXXXXX',
-  },
 };
 ```
 
@@ -472,10 +444,7 @@ Besides tracking visitors, it will track `click events` on projects and blog pos
 // gitprofile.config.ts
 const CONFIG = {
   // ...
-  hotjar: {
+  hotjar: { id: '', snippetVersion: 6 },
-    id: '',
-    snippetVersion: 6,
-  },
 };
 ```
 
@@ -487,11 +456,7 @@ You can customize the meta tags for SEO in `seo`.
 // gitprofile.config.ts
 const CONFIG = {
   // ...
-  seo: {
+  seo: { title: 'Portfolio of Ariful Alam', description: '', imageURL: '' },
-    title: 'Portfolio of Ariful Alam',
-    description: '',
-    imageURL: '',
-  },
 };
 ```
 
@@ -730,11 +695,7 @@ If you have [medium](https://medium.com) or [dev](https://dev.to) account, you c
 // gitprofile.config.ts
 const CONFIG = {
   // ...
-  blog: {
+  blog: { source: 'dev', username: 'arifszn', limit: 5 },
-    source: 'dev',
-    username: 'arifszn',
-    limit: 5,
-  },
 };
 ```
 

gitprofile.config.ts

@@ -51,11 +51,7 @@ const CONFIG = {
       ],
     },
   },
-  seo: {
+  seo: { title: 'Portfolio of Ariful Alam', description: '', imageURL: '' },
-    title: 'Portfolio of Ariful Alam',
-    description: '',
-    imageURL: '',
-  },
   social: {
     linkedin: 'ariful-alam',
     x: 'arif_szn',
@@ -166,10 +162,7 @@ const CONFIG = {
     id: '', // GA3 tracking id/GA4 tag id UA-XXXXXXXXX-X | G-XXXXXXXXXX
   },
   // Track visitor interaction and behavior. https://www.hotjar.com
-  hotjar: {
+  hotjar: { id: '', snippetVersion: 6 },
-    id: '',
-    snippetVersion: 6,
-  },
   themeConfig: {
     defaultTheme: 'lofi',
 
@@ -218,19 +211,11 @@ const CONFIG = {
       'dim',
       'nord',
       'sunset',
+      'caramellatte',
+      'abyss',
+      'silk',
       'procyon',
     ],
-
-    // Custom theme, applied to `procyon` theme
-    customTheme: {
-      primary: '#fc055b',
-      secondary: '#219aaf',
-      accent: '#e8d03a',
-      neutral: '#2A2730',
-      'base-100': '#E3E3ED',
-      '--rounded-box': '3rem',
-      '--rounded-btn': '3rem',
-    },
   },
 
   // Optional Footer. Supports plain text or HTML.

global.d.ts

@@ -284,43 +284,6 @@ interface Blog {
   limit?: number;
 }
 
-interface CustomTheme {
-  /**
-   * Primary color
-   */
-  primary?: string;
-
-  /**
-   * Secondary color
-   */
-  secondary?: string;
-
-  /**
-   * Accent color
-   */
-  accent?: string;
-
-  /**
-   * Neutral color
-   */
-  neutral?: string;
-
-  /**
-   * Base color of page
-   */
-  'base-100'?: string;
-
-  /**
-   * Border radius of rounded-box
-   */
-  '--rounded-box'?: string;
-
-  /**
-   * Border radius of rounded-btn
-   */
-  '--rounded-btn'?: string;
-}
-
 interface ThemeConfig {
   /**
    * Default theme
@@ -346,11 +309,6 @@ interface ThemeConfig {
    * Available themes
    */
   themes?: Array<string>;
-
-  /**
-   * Custom theme
-   */
-  customTheme?: CustomTheme;
 }
 
 interface Config {

src/assets/index.css

@@ -1,39 +1,54 @@
 @import 'tailwindcss';
 @plugin "daisyui" {
-  themes: 
+  themes:
-      light, 
+    'light', 'dark', 'cupcake', 'bumblebee', 'emerald', 'corporate',
-      dark,
+    'synthwave', 'retro', 'cyberpunk', 'valentine', 'halloween', 'garden',
-      'cupcake',
+    'forest', 'aqua', 'lofi', 'pastel', 'fantasy', 'wireframe', 'black',
-      'bumblebee',
+    'luxury', 'dracula', 'cmyk', 'autumn', 'business', 'acid', 'lemonade',
-      'emerald',
+    'night', 'coffee', 'winter', 'dim', 'nord', 'sunset', 'caramellatte',
-      'corporate',
+    'abyss', 'silk', 'procyon';
-      'synthwave',
+}
-      'retro',
+
-      'cyberpunk',
+@plugin "daisyui/theme" {
-      'valentine',
+  name: "procyon";
-      'halloween',
+  color-scheme: light;
-      'garden',
+
-      'forest',
+  --color-base-100: #E3E3ED;
-      'aqua',
+  --color-base-200: #d1d1db;
-      'lofi',
+  --color-base-300: #bfbfc9;
-      'pastel',
+  --color-base-content: #2A2730;
-      'fantasy',
+  --color-primary: #fc055b;
-      'wireframe',
+  --color-primary-content: #ffffff;
-      'black',
+  --color-secondary: #219aaf;
-      'luxury',
+  --color-secondary-content: #ffffff;
-      'dracula',
+  --color-accent: #e8d03a;
-      'cmyk',
+  --color-accent-content: #2A2730;
-      'autumn',
+  --color-neutral: #2A2730;
-      'business',
+  --color-neutral-content: #ffffff;
-      'acid',
+  --color-info: #219aaf;
-      'lemonade',
+  --color-info-content: #ffffff;
-      'night',
+  --color-success: #16a34a;
-      'coffee',
+  --color-success-content: #ffffff;
-      'winter',
+  --color-warning: #e8d03a;
-      'dim',
+  --color-warning-content: #2A2730;
-      'nord',
+  --color-error: #dc2626;
-      'sunset',
+  --color-error-content: #ffffff;
-      'procyon';
+
+  /* border radius */
+  --radius-selector: 3rem;
+  --radius-field: 3rem;
+  --radius-box: 3rem;
+
+  /* base sizes */
+  --size-selector: 0.25rem;
+  --size-field: 0.25rem;
+
+  /* border size */
+  --border: 1px;
+
+  /* effects */
+  --depth: 1;
+  --noise: 0;
 }
 
 * {
@@ -74,8 +89,6 @@ code {
     source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
 }
 
-
-
 svg {
   vertical-align: unset;
 }

src/constants/default-custom-theme.tsx

@@ -1,9 +0,0 @@
-export const DEFAULT_CUSTOM_THEME = {
-  primary: '#fc055b',
-  secondary: '#219aaf',
-  accent: '#e8d03a',
-  neutral: '#2A2730',
-  'base-100': '#E3E3ED',
-  '--rounded-box': '3rem',
-  '--rounded-btn': '3rem',
-};

src/constants/default-themes.tsx

@@ -31,5 +31,8 @@ export const DEFAULT_THEMES = [
   'dim',
   'nord',
   'sunset',
+  'caramellatte',
+  'abyss',
+  'silk',
   'procyon',
 ];

src/interfaces/sanitized-config.tsx

@@ -116,23 +116,12 @@ export interface SanitizedBlog {
   limit: number;
 }
 
-export interface SanitizedCustomTheme {
-  primary: string;
-  secondary: string;
-  accent: string;
-  neutral: string;
-  'base-100': string;
-  '--rounded-box': string;
-  '--rounded-btn': string;
-}
-
 export interface SanitizedThemeConfig {
   defaultTheme: string;
   disableSwitch: boolean;
   respectPrefersColorScheme: boolean;
   displayAvatarRing: boolean;
   themes: Array<string>;
-  customTheme: SanitizedCustomTheme;
 }
 
 export interface SanitizedConfig {

src/utils/index.tsx

@@ -1,6 +1,6 @@
 import { hotjar } from 'react-hotjar';
 import { LOCAL_STORAGE_KEY_NAME } from '../constants';
-import { DEFAULT_CUSTOM_THEME } from '../constants/default-custom-theme';
+
 import { DEFAULT_THEMES } from '../constants/default-themes';
 import colors from '../data/colors.json';
 import {
@@ -124,29 +124,6 @@ export const getSanitizedConfig = (
           config?.themeConfig?.respectPrefersColorScheme || false,
         displayAvatarRing: config?.themeConfig?.displayAvatarRing ?? true,
         themes: config?.themeConfig?.themes || DEFAULT_THEMES,
-        customTheme: {
-          primary:
-            config?.themeConfig?.customTheme?.primary ||
-            DEFAULT_CUSTOM_THEME.primary,
-          secondary:
-            config?.themeConfig?.customTheme?.secondary ||
-            DEFAULT_CUSTOM_THEME.secondary,
-          accent:
-            config?.themeConfig?.customTheme?.accent ||
-            DEFAULT_CUSTOM_THEME.accent,
-          neutral:
-            config?.themeConfig?.customTheme?.neutral ||
-            DEFAULT_CUSTOM_THEME.neutral,
-          'base-100':
-            config?.themeConfig?.customTheme?.['base-100'] ||
-            DEFAULT_CUSTOM_THEME['base-100'],
-          '--rounded-box':
-            config?.themeConfig?.customTheme?.['--rounded-box'] ||
-            DEFAULT_CUSTOM_THEME['--rounded-box'],
-          '--rounded-btn':
-            config?.themeConfig?.customTheme?.['--rounded-btn'] ||
-            DEFAULT_CUSTOM_THEME['--rounded-btn'],
-        },
       },
       footer: config?.footer,
       enablePWA: config?.enablePWA ?? true,