diff --git a/README.md b/README.md index 6fee193..bdf2da3 100644 --- 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 = { Theme Dropdown

-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 }, }; ``` diff --git a/gitprofile.config.ts b/gitprofile.config.ts index dcb51b6..2be2be4 100644 --- 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. diff --git a/global.d.ts b/global.d.ts index a1dad41..eeb73e4 100644 --- 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; - - /** - * Custom theme - */ - customTheme?: CustomTheme; } interface Config { diff --git a/src/assets/index.css b/src/assets/index.css index 24fbd79..27107fb 100644 --- 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; } diff --git a/src/constants/default-custom-theme.tsx b/src/constants/default-custom-theme.tsx deleted file mode 100644 index aaec75e..0000000 --- a/src/constants/default-custom-theme.tsx +++ /dev/null @@ -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', -}; diff --git a/src/constants/default-themes.tsx b/src/constants/default-themes.tsx index b8c5ff2..f71ec21 100644 --- 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', ]; diff --git a/src/interfaces/sanitized-config.tsx b/src/interfaces/sanitized-config.tsx index b3aa22e..aff8fd3 100644 --- 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; - customTheme: SanitizedCustomTheme; } export interface SanitizedConfig { diff --git a/src/utils/index.tsx b/src/utils/index.tsx index 1aff602..85875c1 100644 --- 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,