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
2025-07-06 17:30:53 +06:00 · 2025-07-06 17:30:53 +06:00 · ecba63a9fa
commit ecba63a9fa
parent 3f3c77e989
8 changed files with 85 additions and 208 deletions
--- a/README.md
+++ b/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: {
-    title: 'Portfolio of Ariful Alam',
-    description: '',
-    imageURL: '',
-  },
+  seo: { 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: {
-    id: '',
-    snippetVersion: 6,
-  },
+  hotjar: { 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
-// gitprofile.config.ts
-const CONFIG = {
-  /**
-   * Defines the custom theme colors and styles for the application.
-   * The theme includes the following properties:
-   * - `primary`: The primary color used throughout the application.
-   * - `secondary`: The secondary color used for accents and highlights.
-   * - `accent`: The accent color used for special elements.
-   * - `neutral`: The neutral color used for backgrounds and text.
-   * - `base-100`: The base background color.
-   * - `--rounded-box`: The border radius for boxes and containers.
-   * - `--rounded-btn`: The border radius for buttons.
-   */
-  themeConfig: {
-    customTheme: {
-      primary: '#fc055b',
-      secondary: '#219aaf',
-      accent: '#e8d03a',
-      neutral: '#2A2730',
-      'base-100': '#E3E3ED',
-      '--rounded-box': '3rem',
-      '--rounded-btn': '3rem',
-    },
-  },
-};
+```css
+/* src/assets/index.css */
+@plugin "daisyui/theme" {
+  name: "procyon";
+  color-scheme: light;
+
+  --color-base-100: #E3E3ED;
+  --color-base-200: #d1d1db;
+  --color-base-300: #bfbfc9;
+  --color-base-content: #2A2730;
+  --color-primary: #fc055b;
+  --color-primary-content: #ffffff;
+  --color-secondary: #219aaf;
+  --color-secondary-content: #ffffff;
+}
 ```

 ### Google Analytics
@ -456,9 +430,7 @@ const CONFIG = {
 // gitprofile.config.ts
 const CONFIG = {
  // ...
-  googleAnalytics: {
-    id: 'G-XXXXXXXXX',
-  },
+  googleAnalytics: { 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: {
-    id: '',
-    snippetVersion: 6,
-  },
+  hotjar: { id: '', snippetVersion: 6 },
 };
 ```

@ -487,11 +456,7 @@ You can customize the meta tags for SEO in `seo`.
 // gitprofile.config.ts
 const CONFIG = {
  // ...
-  seo: {
-    title: 'Portfolio of Ariful Alam',
-    description: '',
-    imageURL: '',
-  },
+  seo: { 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: {
-    source: 'dev',
-    username: 'arifszn',
-    limit: 5,
-  },
+  blog: { source: 'dev', username: 'arifszn', limit: 5 },
 };
 ```

--- a/gitprofile.config.ts
+++ b/gitprofile.config.ts
@ -51,11 +51,7 @@ const CONFIG = {
      ],
    },
  },
-  seo: {
-    title: 'Portfolio of Ariful Alam',
-    description: '',
-    imageURL: '',
-  },
+  seo: { 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: {
-    id: '',
-    snippetVersion: 6,
-  },
+  hotjar: { 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.
--- a/global.d.ts
+++ b/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 {
--- a/src/assets/index.css
+++ b/src/assets/index.css
@ -1,39 +1,54 @@
@import 'tailwindcss';
@plugin "daisyui" {
-  themes: 
-      light, 
-      dark,
-      'cupcake',
-      'bumblebee',
-      'emerald',
-      'corporate',
-      'synthwave',
-      'retro',
-      'cyberpunk',
-      'valentine',
-      'halloween',
-      'garden',
-      'forest',
-      'aqua',
-      'lofi',
-      'pastel',
-      'fantasy',
-      'wireframe',
-      'black',
-      'luxury',
-      'dracula',
-      'cmyk',
-      'autumn',
-      'business',
-      'acid',
-      'lemonade',
-      'night',
-      'coffee',
-      'winter',
-      'dim',
-      'nord',
-      'sunset',
-      'procyon';
+  themes:
+    'light', 'dark', 'cupcake', 'bumblebee', 'emerald', 'corporate',
+    'synthwave', 'retro', 'cyberpunk', 'valentine', 'halloween', 'garden',
+    'forest', 'aqua', 'lofi', 'pastel', 'fantasy', 'wireframe', 'black',
+    'luxury', 'dracula', 'cmyk', 'autumn', 'business', 'acid', 'lemonade',
+    'night', 'coffee', 'winter', 'dim', 'nord', 'sunset', 'caramellatte',
+    'abyss', 'silk', 'procyon';
+}
+
+@plugin "daisyui/theme" {
+  name: "procyon";
+  color-scheme: light;
+
+  --color-base-100: #E3E3ED;
+  --color-base-200: #d1d1db;
+  --color-base-300: #bfbfc9;
+  --color-base-content: #2A2730;
+  --color-primary: #fc055b;
+  --color-primary-content: #ffffff;
+  --color-secondary: #219aaf;
+  --color-secondary-content: #ffffff;
+  --color-accent: #e8d03a;
+  --color-accent-content: #2A2730;
+  --color-neutral: #2A2730;
+  --color-neutral-content: #ffffff;
+  --color-info: #219aaf;
+  --color-info-content: #ffffff;
+  --color-success: #16a34a;
+  --color-success-content: #ffffff;
+  --color-warning: #e8d03a;
+  --color-warning-content: #2A2730;
+  --color-error: #dc2626;
+  --color-error-content: #ffffff;
+
+  /* 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;
 }
--- a/src/constants/default-custom-theme.tsx
+++ b/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',
-};
--- a/src/constants/default-themes.tsx
+++ b/src/constants/default-themes.tsx
@ -31,5 +31,8 @@ export const DEFAULT_THEMES = [
  'dim',
  'nord',
  'sunset',
+  'caramellatte',
+  'abyss',
+  'silk',
  'procyon',
 ];
--- a/src/interfaces/sanitized-config.tsx
+++ b/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 {
--- a/src/utils/index.tsx
+++ b/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,