@sofidevo/astro-dynamic-header 1.1.34 → 2.0.1

package/README.md

@@ -2,6 +2,9 @@
 
 A dynamic, responsive header component for Astro projects that can switch between floating and fullscreen styles with multi-level dropdown navigation support.
 
+> [!WARNING]
+> **Breaking Changes**: Version 2.0+ introduces a restructured configuration object. If you are upgrading from an older version, please review the [Component Props](#component-props) and the [Comprehensive Example](#comprehensive-example) to migrate your configuration.
+
 ## Features
 
 - **Dynamic Styles**: Switch between floating and fullscreen header layouts
@@ -12,9 +15,9 @@ A dynamic, responsive header component for Astro projects that can switch betwee
 - **Customizable**: Extensive customization options for colors, sizes, and behavior
 - **Astro Optimized**: Built specifically for Astro framework
 
-
 ### Live demo
-  [https://base-astro-psi.vercel.app/fullscreen-demo](https://base-astro-psi.vercel.app/fullscreen-demo)
+
+[https://base-astro-psi.vercel.app/fullscreen-demo](https://base-astro-psi.vercel.app/fullscreen-demo)
 
 ## Installation
 
@@ -34,86 +37,54 @@ Add this to your main layout or in the `<head>` section of your Astro pages.
 
 ## Quick Start
 
-### Basic Usage
+### Basic Usage (Automatic Theme)
+
+By default, the header uses `preset="auto"`, which automatically detects the theme based on a `.dark` class on your root element (`html` or `body`).
 
 ```astro
 ---
-// Option 1: Import from direct subpath (recommended)
 import Header from '@sofidevo/astro-dynamic-header/Header';
 
-// Option 2: Import from main entry point with types
-import { HeaderProps, type MenuItemType } from '@sofidevo/astro-dynamic-header';
 
-const menuItems = [
-  { link: '/about', text: 'About' },
-  { link: '/contact', text: 'Contact' },
-];
+const =  menuItems: [
+    { link: '/about', text: 'About' },
+  ]
+
 ---
 
-<Header
-  headerType="floating"
-  logoSrc="/logo.png"
-  menuItems={menuItems}
-/>
+<!-- Detects .dark class on root automatically -->
+<Header navigation={{ menuItems }} />
 ```
 
-### TypeScript Configuration
-
-To ensure imports work correctly in your Astro project, make sure your `tsconfig.json` has the appropriate configuration:
+### Advanced Usage (Dual-Theme Customization)
 
-```json
-{
-  "compilerOptions": {
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "strict": true,
-    "noEmit": true,
-    "jsx": "preserve"
-  },
-  "extends": "astro/tsconfigs/strict"
-}
-```
-
-### Advanced Usage
+You can provide custom colors for both light and dark modes simultaneously.
 
 ```astro
+
 ---
 import Header from '@sofidevo/astro-dynamic-header/Header';
-import type { MenuItemType } from '@sofidevo/astro-dynamic-header';
-
-const menuItems = [
-  {
-    link: '#',
-    text: 'Services',
-    submenu: [
-      {
-        link: '#',
-        text: 'Web Development',
-        submenu: [
-          { link: '/web/frontend', text: 'Frontend' },
-          { link: '/web/backend', text: 'Backend' },
-          { link: '/web/fullstack', text: 'Full Stack' },
-        ],
-      },
-      { link: '/design', text: 'Design' },
-      { link: '/consulting', text: 'Consulting' },
-    ],
+const navigation = {
+  menuItems: [
+    { link: '/about', text: 'About' },
+  ]
+};
+const theme = {
+  light: {
+    accentColor: "#3e1c71",
+    backgroundColor: "rgba(255, 255, 255, 0.8)"
   },
-  { link: '/about', text: 'About' },
-  { link: '/contact', text: 'Contact' },
-];
+  dark: {
+    accentColor: "#00ffff",
+    backgroundColor: "rgba(20, 20, 20, 0.9)"
+  }
+};
 ---
 
 <Header
-  headerType="fullscreen"
-  logoSrc="/logo.png"
-  logoAlt="My Company"
-  logoWidth="150px"
-  homeUrl="/"
-  menuItems={menuItems}
-  backgroundColor="#000000dd"
-  backdropBlur="blur(15px)"
-  zIndex={100}
+  preset="auto"
+  theme={theme}
+  navigation={navigation}
 />
 ```
 
@@ -121,165 +92,189 @@ const menuItems = [
 
 ### Header Component
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `headerType` | `"floating" \| "fullscreen"` | `"floating"` | Header layout style |
-| `logoSrc` | `string` | `"/logo.png"` | Logo image source |
-| `logoAlt` | `string` | `"Logo"` | Logo alt text |
-| `logoWidth` | `string` | `"55px"` | Logo width |
-| `logoText` | `string` | `"Your logo text"` | Text displayed next to the logo |
-| `logoTextSize` | `string` | `"1em"` | Font size for logo text |
-| `logoTextColor` | `string` | `"#ffffff"` | Color for logo text |
-| `homeUrl` | `string` | `"/"` | Home page URL |
-| `menuItems` | `MenuItemType[]` | `[]` | Navigation menu items |
-| `backgroundColor` | `string` | `"#0d0d0dcc"` | Header background color |
-| `backdropBlur` | `string` | `"blur(20px)"` | Backdrop filter blur |
-| `zIndex` | `number` | `10` | CSS z-index value |
-
-### Menu Item Structure
-
-```typescript
-interface MenuItemType {
-  link: string;
-  text: string;
-  submenu?: MenuItemType[];
-}
+| Prop         | Type                          | Default      | Description                                |
+| ------------ | ----------------------------- | ------------ | ------------------------------------------ |
+| `headerType` | `"floating" \| "fullscreen"`  | `"floating"` | Header layout style                        |
+| `preset`     | `"light" \| "dark" \| "auto"` | `"auto"`     | Theme behavior. `auto` follows root class. |
+| `logo`       | `LogoConfig`                  | `{}`         | Logo configuration object                  |
+| `navigation` | `NavConfig`                   | `{}`         | Navigation configuration object            |
+| `theme`      | `DualThemeConfig`             | `{}`         | Custom theme overrides for light/dark      |
+| `classNames` | `CustomClassNames`            | `{}`         | Custom class names for CSS Modules         |
+
+### Config Objects
+
+#### DualThemeConfig
+
+| Propery | Type          | Description                  |
+| ------- | ------------- | ---------------------------- |
+| `light` | `ThemeConfig` | Styles applied in light mode |
+| `dark`  | `ThemeConfig` | Styles applied in dark mode  |
+
+#### ThemeConfig
+
+| Propery                 | Type     | Default          |
+| ----------------------- | -------- | ---------------- |
+| `backgroundColor`       | `string` | _Preset default_ |
+| `backgroundColorOpaque` | `string` | _Preset default_ |
+| `backdropBlur`          | `string` | `"blur(20px)"`   |
+| `zIndex`                | `number` | `10`             |
+| `textColor`             | `string` | _Preset default_ |
+| `accentColor`           | `string` | _Preset default_ |
+
+> [!IMPORTANT]
+> **Transparency vs Solid Submenus**: To ensure the best UI and avoid rendering bugs with `backdrop-filter` on nested elements, submenus and the mobile navigation panel are **solid/opaque**.
+>
+> If you use a transparent `backgroundColor` (e.g., `rgba`), remember to also provide its solid counterpart in `backgroundColorOpaque`.
+
+```astro
+<Header theme={{
+  light: {
+    backgroundColor: "rgba(255, 255, 255, 0.7)", // Transparent header body
+    backgroundColorOpaque: "#ffffff",            // Solid submenus
+  }
+}} />
 ```
 
-## Slots Support
+#### CustomClassNames
 
-The Header component provides a flexible slot system that allows you to add additional content:
+| Propery     | Type     | Description                      |
+| ----------- | -------- | -------------------------------- |
+| `container` | `string` | Main container class             |
+| `header`    | `string` | Header element class             |
+| `logo`      | `string` | Logo link container class        |
+| `logoText`  | `string` | Logo text class                  |
+| `nav`       | `string` | Desktop navigation wrapper class |
 
-### Available Slots
+#### LogoConfig
+
+| Property    | Type     | Description                                      |
+| ----------- | -------- | ------------------------------------------------ |
+| `src`       | `string` | URL of the logo image                            |
+| `alt`       | `string` | Alternative text for the logo image              |
+| `width`     | `string` | Width of the logo (e.g., "50px", "5rem")         |
+| `text`      | `string` | Text to display next to or instead of logo image |
+| `textSize`  | `string` | Font size for the logo text                      |
+| `textColor` | `string` | Color for the logo text                          |
 
-| Slot Name | Location | Visibility | Description |
-|-----------|----------|------------|-----------|
-| `actions` | Header & Mobile panel | Responsive visibility | Add action buttons (login, signup, etc.) that appear in both desktop and mobile |
+#### NavConfig
 
-### Actions Slot Behavior
+| Property    | Type         | Description                             |
+| ----------- | ------------ | --------------------------------------- |
+| `homeUrl`   | `string`     | URL for the home link (defaults to `/`) |
+| `menuItems` | `MenuItem[]` | Array of navigation menu items          |
 
-The `actions` slot is intelligent and automatically manages visibility:
-- **Desktop (≥768px)**: Shows actions in the main header after navigation
-- **Mobile (<768px)**: Shows same actions inside the mobile menu panel
-- **Automatic hiding**: Desktop version is hidden on mobile, mobile version is hidden on desktop
+#### MenuItem
+
+| Property  | Type                  | Description                         |
+| --------- | --------------------- | ----------------------------------- |
+| `link`    | `string`              | URL the menu item points to         |
+| `text`    | `string`              | Label text for the menu item        |
+| `submenu` | `SecondaryMenuItem[]` | Optional array of nested menu items |
+
+## Slots Support
+
+The Header component provides a flexible slot system that allows you to add additional content:
+
+### Available Slots
 
-### Slot Examples
+| Slot Name | Location              | Visibility            | Description                              |
+| --------- | --------------------- | --------------------- | ---------------------------------------- |
+| `actions` | Header & Mobile panel | Responsive visibility | Add action buttons (login, signup, etc.) |
 
-#### Using the Actions Slot
+### Example with Slots
 
 ```astro
 ---
 import Header from '@sofidevo/astro-dynamic-header/Header';
 
-const menuItems = [
-  { link: '/about', text: 'About' },
-  { link: '/contact', text: 'Contact' },
-];
+const navigation = {
+  menuItems: [{ link: '/about', text: 'About' }]
+};
 ---
 
-<Header
-  headerType="floating"
-  logoSrc="/logo.png"
-  logoText="My Company"
-  menuItems={menuItems}
->
+<Header navigation={navigation}>
   <div slot="actions">
     <button class="login-btn">Login</button>
-    <button class="signup-btn">Sign Up</button>
   </div>
 </Header>
 ```
 
-#### Complete Example with All Props
+## Comprehensive Example
+
+Below is a complete implementation example showcasing custom logo configuration, navigation with a home URL, and theme overrides.
 
 ```astro
 ---
 import Header from '@sofidevo/astro-dynamic-header/Header';
 
 const menuItems = [
-  { link: '/about', text: 'About' },
-  { link: '/services', text: 'Services' },
-  { link: '/contact', text: 'Contact' },
+  {
+    link: "#",
+    text: "Services",
+    submenu: [
+      { link: "/design", text: "Design" },
+      { link: "/consulting", text: "Consulting" },
+      {
+        link: "#",
+        text: "Web Development",
+        submenu: [
+          { link: "/web/frontend", text: "Frontend" },
+          { link: "/web/backend", text: "Backend" },
+          { link: "/web/fullstack", text: "Full Stack" },
+        ],
+      },
+    ],
+  },
+  { link: "/about", text: "About" },
+  { link: "/contact", text: "Contact" },
 ];
+
+const theme = {
+  light: {
+    accentColor: "#ff0000",
+    backgroundColor: "rgba(255, 255, 255, 0.8)",
+  },
+  dark: {
+    accentColor: "#00ffff",
+    backgroundColor: "rgba(20, 20, 20, 0.9)",
+  },
+};
 ---
 
 <Header
-  headerType="fullscreen"
-  logoSrc="/logo.png"
-  logoAlt="My Company"
-  logoWidth="60px"
-  logoText="My Company"
-  logoTextSize="1.2em"
-  logoTextColor="#ffffff"
-  homeUrl="/"
-  menuItems={menuItems}
-  backgroundColor="#000000dd"
-  backdropBlur="blur(15px)"
-  zIndex={100}
+  headerType="floating"
+  preset="dark"
+  logo={{
+    src: "https://itssofi.dev/img/icons/sofi-icon.webp",
+    alt: "My Site Logo",
+    width: "44px",
+  }}
+  navigation={{
+    homeUrl: "/",
+    menuItems: menuItems,
+  }}
+  theme={theme}
 >
-  <div slot="actions" class="header-actions">
-    <button class="btn btn-outline">Login</button>
-    <button class="btn btn-primary">Get Started</button>
-  </div>
+  <button slot="actions">Login</button>
 </Header>
 ```
 
-#### Styling Action Buttons
-
-```css
-.header-actions {
-  display: flex;
-  gap: 0.5em;
-  align-items: center;
-}
-
-.btn {
-  padding: 0.5em 1em;
-  border: none;
-  border-radius: 6px;
-  cursor: pointer;
-  font-weight: 500;
-  text-decoration: none;
-  display: inline-flex;
-  align-items: center;
-  transition: all 0.2s ease;
-}
-
-.btn-outline {
-  background: transparent;
-  color: #ffffff;
-  border: 1px solid #ffffff;
-}
-
-.btn-outline:hover {
-  background: #ffffff;
-  color: #000000;
-}
-
-.btn-primary {
-  background: #00ffff;
-  color: #000000;
-}
-
-.btn-primary:hover {
-  background: #00cccc;
-}
-```
 ## Header Types
 
 ### Floating Header
+
 - Centered with max-width constraint
 - Rounded corners
 - Padding around container
 - Perfect for modern, card-like designs
 
 ### Fullscreen Header
+
 - Full viewport width
 - No border radius
 - Edge-to-edge design
 - Ideal for traditional website layouts
 
-
 ## Styling and Customization
 
 The component uses CSS custom properties that you can override:
@@ -294,24 +289,71 @@ The component uses CSS custom properties that you can override:
 
 ## TypeScript Support
 
-Full TypeScript support with exported interfaces:
+The package provides full TypeScript support. You can import types to ensure your configuration is correct:
 
-```typescript
+```astro
+---
+import Header from '@sofidevo/astro-dynamic-header/Header';
 import type {
-  MenuItemType,
-  HeaderProps,
-  NavMenuProps,
-  MobileNavProps,
-  HamburgerButtonProps
+  NavConfig,
+  DualThemeConfig,
+  MenuItem,
+  SecondaryMenuItem
 } from '@sofidevo/astro-dynamic-header';
+
+const navigation: NavConfig = {
+  menuItems: [
+    {
+      link: '/products',
+      text: 'Products',
+      submenu: [
+        { link: '/software', text: 'Software' },
+        { link: '/hardware', text: 'Hardware' }
+      ]
+    }
+  ]
+};
+
+const theme: DualThemeConfig = {
+  light: {
+    accentColor: "#3e1c71",
+    backgroundColor: "rgba(255, 255, 255, 0.8)",
+    backgroundColorOpaque: "#ffffff"
+  },
+  dark: {
+    accentColor: "#00ffff",
+    backgroundColor: "rgba(10, 10, 10, 0.9)",
+    backgroundColorOpaque: "#0a0a0a"
+  }
+};
+---
+
+<Header
+  navigation={navigation}
+  theme={theme}
+  preset="auto"
+/>
 ```
 
+### Available Types
+
+| Type                | Description                                    |
+| ------------------- | ---------------------------------------------- |
+| `MenuItem`          | Top-level menu item with optional properties   |
+| `SecondaryMenuItem` | Second-level menu item                         |
+| `TertiaryMenuItem`  | Third-level menu item                          |
+| `NavConfig`         | Main navigation configuration object           |
+| `ThemeConfig`       | Individual theme settings (colors, blur, etc.) |
+| `DualThemeConfig`   | Combined settings for light and dark modes     |
+| `LogoConfig`        | Logo image and text configuration              |
+| `HeaderProps`       | Main props for the Header component            |
+
 ## Browser Support
 
-- All modern browsers
-- Mobile responsive design
-- Supports CSS `backdrop-filter`
-- Graceful degradation for older browsers
+- All modern browsers (Chrome, Firefox, Safari, Edge)
+- Mobile responsive design with optimized touch targets
+- Supports CSS `backdrop-filter` for glassmorphism
+- Automatic theme switching based on OS or site preference via `.dark` class
 
 ## Troubleshooting
 
@@ -320,29 +362,26 @@ import type {
 If you encounter import errors, try these solutions:
 
 1. **Use direct subpath import:**
+
    ```astro
    import Header from '@sofidevo/astro-dynamic-header/Header';
    ```
 
-2. **Verify TypeScript configuration:**
+2. **Check relative imports in TS:**
+   In some environments (like `node16`), you might need to use the `.js` extension even for TypeScript files when importing from the package internals, though the main entry point handles this for you.
+
+3. **Verify TypeScript configuration:**
+
    ```json
    // tsconfig.json
    {
      "compilerOptions": {
-       "moduleResolution": "bundler", // or "nodenext"
+       "moduleResolution": "bundler",
        "allowImportingTsExtensions": true
      }
    }
    ```
 
-3. **Import types separately:**
-   ```astro
-   ---
-   import Header from '@sofidevo/astro-dynamic-header/Header';
-   import type { MenuItemType } from '@sofidevo/astro-dynamic-header';
-   ---
-   ```
-
 ### Compatibility
 
 - Astro 4.x and 5.x
@@ -354,44 +393,6 @@ If you encounter import errors, try these solutions:
 
 Visit our demo website to see the component in action with interactive examples and complete documentation.
 
-## Testing
-
-This project includes a comprehensive test suite with 34 tests covering all critical functionality.
-
-### Running Tests
-
-```bash
-# Run all tests
-npm test
-
-# Run tests in watch mode
-npm run test:watch
-
-# Run tests with coverage report
-npm run test:coverage
-```
-
-### Test Coverage
-
-The test suite covers:
-
-#### Component Logic Tests
-- **Header Component** (4 tests): Hamburger controller functionality, menu toggle behavior
-- **HamburgerButton Component** (10 tests): Button states, responsive behavior, accessibility
-- **MobileNav Component** (7 tests): Dropdown structure, nested submenus, conditional rendering
-- **NavMenu Component** (6 tests): Dynamic positioning, submenu interactions, viewport adjustments
-
-#### Integration Tests (7 tests)
-- Component interaction flows
-- Responsive behavior between mobile/desktop
-- Keyboard navigation and accessibility
-- Menu state management during navigation
-
-### Test Technologies
-- **Vitest**: Fast testing framework
-- **jsdom**: DOM simulation for component testing
-- **TypeScript**: Type-safe test writing
-
 ## License
 
 MIT License - see the [LICENSE](./LICENSE) file for details.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sofidevo/astro-dynamic-header",
-  "version": "1.1.34",
+  "version": "2.0.1",
   "description": "A dynamic Astro header component that switches between floating and fullscreen styles",
   "type": "module",
   "main": "./src/index.ts",
@@ -50,20 +50,20 @@
   "author": "SofiDev contact@sofidev.top",
   "license": "MIT",
   "peerDependencies": {
-    "astro": "^6.0.5"
+    "astro": "^6.0.6"
   },
   "devDependencies": {
     "@astrojs/check": "^0.9.8",
     "@types/jsdom": "^21.1.7",
     "@vitest/coverage-v8": "^3.2.4",
-    "astro": "^6.0.5",
+    "astro": "^6.0.6",
     "jsdom": "^26.1.0",
     "typescript": "^5.0.0",
     "vitest": "^3.2.4"
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/SofiDevO/astro-dynamic-header"
+    "url": "git+https://github.com/SofiDevO/astro-dynamic-header.git"
   },
   "bugs": {
     "url": "https://github.com/SofiDevO/astro-dynamic-header/issues"

package/src/Header.astro

@@ -3,49 +3,83 @@ import HamburgerButton from "./HamburgerButton.astro";
 import NavMenu from "./NavMenu.astro";
 import MobileNav from "./MobileNav.astro";
 
+import type {
+  LogoConfig,
+  NavConfig,
+  DualThemeConfig,
+  CustomClassNames,
+} from "./index.js";
+
 export interface Props {
   headerType?: "floating" | "fullscreen";
-  // properties for logo
-  logoSrc?: string;
-  logoAlt?: string;
-  logoWidth?: string;
-  logoText?: string;
-  logoTextSize?: string;
-  logoTextColor?: string;
-  // properties for navigation
-  homeUrl?: string;
-  menuItems?: Array<{
-    link: string;
-    text: string;
-    submenu?: Array<{
-      link: string;
-      text: string;
-      submenu?: Array<{
-        link: string;
-        text: string;
-      }>;
-    }>;
-  }>;
-  // styles
-  backgroundColor?: string;
-  backdropBlur?: string;
-  zIndex?: number;
+  preset?: "light" | "dark" | "auto";
+  logo?: LogoConfig;
+  navigation?: NavConfig;
+  theme?: DualThemeConfig;
+  classNames?: CustomClassNames;
 }
 
 const {
   headerType = "floating",
-  logoSrc = "/logo.png",
-  logoAlt = "Logo",
-  logoWidth = "55px",
-  logoText = "",
-  logoTextSize = "1em",
-  logoTextColor = "#ffffff",
-  homeUrl = "/",
-  menuItems = [],
-  backgroundColor = "#0d0d0dcc",
-  backdropBlur = "blur(20px)",
-  zIndex = 10
+  preset = "auto",
+  logo = {},
+  navigation = {},
+  theme = {},
+  classNames = {},
 } = Astro.props;
+
+if (import.meta.env.DEV) {
+  // Check if logo is being passed as a string (legacy)
+  if (typeof logo === "string") {
+    console.warn(
+      "[@sofidevo/astro-dynamic-header] BREAKING CHANGE: The 'logo' prop now expects an object. Please use logo={{ src: '...' }} instead.",
+    );
+  }
+  if (Array.isArray(navigation)) {
+    console.warn(
+      "[@sofidevo/astro-dynamic-header] BREAKING CHANGE: The 'navigation' prop now expects an object with 'menuItems'. Please use navigation={{ menuItems: [...] }} instead.",
+    );
+  }
+}
+
+// Default theme configuration
+const defaultThemes = {
+  light: {
+    backgroundColor: "rgba(255, 255, 255, 0.9)",
+    backgroundColorOpaque: "rgb(255, 255, 255)",
+    backdropBlur: "blur(20px)",
+    zIndex: 10,
+    textColor: "#1a1a1a",
+    accentColor: "#3e1c71",
+  },
+  dark: {
+    backgroundColor: "#0d0d0dcc",
+    backgroundColorOpaque: "#0d0d0d",
+    backdropBlur: "blur(20px)",
+    zIndex: 10,
+    textColor: "#ffffff",
+    accentColor: "#00ffff",
+  },
+};
+
+// Merge with user overrides
+const lightTheme = { ...defaultThemes.light, ...theme.light };
+const darkTheme = { ...defaultThemes.dark, ...theme.dark };
+
+// Navigation configuration
+const { homeUrl = "/", menuItems = [] } = navigation;
+
+// Logo configuration
+const {
+  src: logoSrc = "/logo.png",
+  alt: logoAlt = "Logo",
+  width: logoWidth = "55px",
+  text: logoText = "",
+  textSize: logoTextSize = "1em",
+  textColor: logoTextColor = "inherit", // Will inherit from theme text-color
+} = logo;
+
+const forcedClass = preset !== "auto" ? `header--force-${preset}` : "";
 ---
 
 <script>
@@ -64,7 +98,7 @@ const {
     private init(): void {
       if (this.hamburgerBtn && this.mobileMenu) {
         this.hamburgerBtn.addEventListener("click", () => this.toggleMenu());
-        this.links.forEach(link => {
+        this.links.forEach((link) => {
           link.addEventListener("click", () => this.closeMenu());
         });
       }
@@ -85,38 +119,138 @@ const {
     }
   }
 
-  // Auto-initialize when DOM is ready
-  document.addEventListener('DOMContentLoaded', () => {
+  document.addEventListener("DOMContentLoaded", () => {
     new HamburgerController();
   });
 </script>
 
-<div class={`header__container header__container--${headerType}`} style={`z-index: ${zIndex};`}>
-  <header class={`header header--${headerType}`} style={`background-color: ${backgroundColor}; backdrop-filter: ${backdropBlur}; -webkit-backdrop-filter: ${backdropBlur};`}>
-    <a class="logo__container" href={homeUrl}>
-      <img class="header__logo" src={logoSrc} alt={logoAlt} style={`width: ${logoWidth};`} />
-      {logoText && <span class="header__logo-text" style={`color: ${logoTextColor}; font-size: ${logoTextSize};`}>{logoText}</span>}
+<div
+  class:list={[
+    "header__container",
+    `header__container--${headerType}`,
+    classNames.container,
+  ]}
+  style={{ zIndex: lightTheme.zIndex }}
+>
+  <header
+    class:list={[
+      "header",
+      `header--${headerType}`,
+      forcedClass,
+      classNames.header,
+    ]}
+    style={{
+      "--l-bg": lightTheme.backgroundColor,
+      "--l-bg-opaque": lightTheme.backgroundColorOpaque,
+      "--l-text": lightTheme.textColor,
+      "--l-accent": lightTheme.accentColor,
+      "--l-blur": lightTheme.backdropBlur,
+      "--d-bg": darkTheme.backgroundColor,
+      "--d-bg-opaque": darkTheme.backgroundColorOpaque,
+      "--d-text": darkTheme.textColor,
+      "--d-accent": darkTheme.accentColor,
+      "--d-blur": darkTheme.backdropBlur,
+    }}
+  >
+    <a class:list={["logo__container", classNames.logo]} href={homeUrl}>
+      <img
+        class="header__logo"
+        src={logoSrc}
+        alt={logoAlt}
+        style={{ width: logoWidth }}
+      />
+      {
+        logoText && (
+          <span
+            class:list={["header__logo-text", classNames.logoText]}
+            style={{ color: logoTextColor, fontSize: logoTextSize }}
+          >
+            {logoText}
+          </span>
+        )
+      }
     </a>
-    <NavMenu menuItems={menuItems} />
-    {Astro.slots.has('actions') && (
-      <div class="actions-desktop">
-        <slot name="actions" />
-      </div>
-    )}
-    <HamburgerButton />
-    <MobileNav menuItems={menuItems}  type={headerType}>
-      {Astro.slots.has('actions') && (
-        <div class="actions-mobile" slot="slot-panel">
+
+    <div class:list={["nav-menu-wrapper", classNames.nav]}>
+      <NavMenu menuItems={menuItems} />
+    </div>
+
+    {
+      Astro.slots.has("actions") && (
+        <div class="actions-desktop">
           <slot name="actions" />
         </div>
-      )}
-    </MobileNav>
+      )
+    }
+
+    <HamburgerButton />
 
+    <MobileNav menuItems={menuItems} type={headerType}>
+      {
+        Astro.slots.has("actions") && (
+          <div class="actions-mobile" slot="slot-panel">
+            <slot name="actions" />
+          </div>
+        )
+      }
+    </MobileNav>
   </header>
 </div>
 
-<style is:inline >
-  /* Base styles for header container */
+<style is:inline>
+  .header {
+    --bg-color: var(--l-bg);
+    --bg-color-opaque: var(--l-bg-opaque);
+    --text-color: var(--l-text);
+    --accent-color: var(--l-accent);
+    --backdrop-blur: var(--l-blur);
+
+    display: flex;
+    align-items: center;
+    width: 100%;
+    justify-content: space-between;
+    padding: 1em 2em;
+    background-color: var(--bg-color);
+    backdrop-filter: var(--backdrop-blur);
+    -webkit-backdrop-filter: var(--backdrop-blur);
+    color: var(--text-color);
+    transition:
+      background-color 0.3s ease,
+      color 0.3s ease;
+
+    @media (width < 768px) {
+      align-self: flex-end;
+      padding: 0.4em;
+      margin: 0 auto;
+    }
+  }
+
+  /* Automatic dark mode detection via root class */
+  :root.dark .header:not(.header--force-light) {
+    --bg-color: var(--d-bg);
+    --bg-color-opaque: var(--d-bg-opaque);
+    --text-color: var(--d-text);
+    --accent-color: var(--d-accent);
+    --backdrop-blur: var(--d-blur);
+  }
+
+  /* Forced themes */
+  .header--force-dark {
+    --bg-color: var(--d-bg) !important;
+    --bg-color-opaque: var(--d-bg-opaque) !important;
+    --text-color: var(--d-text) !important;
+    --accent-color: var(--d-accent) !important;
+    --backdrop-blur: var(--d-blur) !important;
+  }
+
+  .header--force-light {
+    --bg-color: var(--l-bg) !important;
+    --bg-color-opaque: var(--l-bg-opaque) !important;
+    --text-color: var(--l-text) !important;
+    --accent-color: var(--l-accent) !important;
+    --backdrop-blur: var(--l-blur) !important;
+  }
+
   .header__container {
     width: 100%;
     display: flex;
@@ -131,43 +265,24 @@ const {
     }
   }
 
-  /* Floating header container styles */
   .header__container--floating {
-    padding: .5em;
+    padding: 0.5em;
   }
 
-  /* Fullscreen header container styles */
   .header__container--fullscreen {
     padding: 0;
   }
 
-  /* Base styles for header */
-  .header {
-    display: flex;
-    align-items: center;
-    width: 100%;
-    justify-content: space-between;
-    padding: 1em 2em;
-
-    @media (width < 768px) {
-      align-self: flex-end;
-      padding: 0.4em;
-      margin: 0 auto;
-    }
-  }
-
-  /* Floating header styles */
   .header--floating {
     max-width: 1100px;
     border-radius: 20px;
-    padding: .7em 1em;
+    padding: 0.7em 1em;
 
     @media (width < 768px) {
       max-width: 95%;
     }
   }
 
-  /* Fullscreen header styles */
   .header--fullscreen {
     border-radius: 0;
     padding: 1em 2em;
@@ -182,16 +297,17 @@ const {
     display: flex;
     align-items: center;
     text-decoration: none;
-    & span{
+    color: inherit;
+    & span {
       font-weight: 600;
     }
   }
+
   .header__logo {
     margin-right: 1em;
     object-fit: contain;
   }
 
-  /* Actions visibility control */
   .actions-desktop {
     @media (width < 768px) {
       display: none;
@@ -205,7 +321,6 @@ const {
     }
   }
 
-  /* Adjust transform for fullscreen header */
   .header--fullscreen .mobile-header__menu.is-active {
     transform: translate(0%);
   }

package/src/MobileNav.astro

@@ -1,21 +1,11 @@
 ---
+import type { MenuItem, SecondaryMenuItem, TertiaryMenuItem } from "./index.js";
+
 export interface Props {
   type?: "floating" | "fullscreen";
-  menuItems?: Array<{
-    link: string;
-    text: string;
-    submenu?: Array<{
-      link: string;
-      text: string;
-      submenu?: Array<{
-        link: string;
-        text: string;
-      }>;
-    }>;
-  }>;
+  menuItems?: MenuItem[];
   showHomeLink?: boolean;
   homeText?: string;
-  accentColor?: string;
 }
 
 const { type } = Astro.props;
@@ -24,7 +14,6 @@ const {
   menuItems = [],
   showHomeLink = true,
   homeText = "Home",
-  accentColor = "var(--light-spot-color, #00ffff)",
 } = Astro.props;
 
 const pagePathname = Astro.url.pathname;
@@ -33,7 +22,6 @@ const pagePathname = Astro.url.pathname;
 <nav
   class={`mobile-header__menu mobile-header__menu--${type}`}
   id="mobile-header-menu"
-  style={`--mobile-accent-color: ${accentColor};`}
 >
   <ol class="mobile-menu">
     {
@@ -50,7 +38,7 @@ const pagePathname = Astro.url.pathname;
       )
     }
     {
-      menuItems?.map((item: any) => (
+      menuItems?.map((item: MenuItem) => (
         <li>
           {item.submenu ? (
             <details class="mobile-details">
@@ -61,11 +49,11 @@ const pagePathname = Astro.url.pathname;
                   icon="codicon:triangle-down"
                   width="15"
                   height="15"
-                  style={`color: ${accentColor};`}
+                  style="color: var(--accent-color);"
                 />
               </summary>
               <ol class="mobile-submenu">
-                {item?.submenu?.map((sub:any) => (
+                {item?.submenu?.map((sub: SecondaryMenuItem) => (
                   <li>
                     {sub.submenu && sub.submenu.length > 0 ? (
                       <details class="mobile-details">
@@ -76,11 +64,11 @@ const pagePathname = Astro.url.pathname;
                             icon="codicon:triangle-down"
                             width="15"
                             height="15"
-                            style={`color: ${accentColor};`}
+                            style="color: var(--accent-color);"
                           />
                         </summary>
                         <ol class="mobile-subsubmenu">
-                          {sub.submenu.map((subsub:any) => (
+                          {sub.submenu.map((subsub: TertiaryMenuItem) => (
                             <li class="mobile-submenu__item secondary">
                               <a
                                 class="menu__link mobile-menu__link"
@@ -125,16 +113,16 @@ const pagePathname = Astro.url.pathname;
       position: fixed;
       top: -11px;
       left: 0;
-      background: #151515;
+      background: var(--bg-color-opaque, #151515);
       z-index: 20;
-      transition: transform 0.3s ease-in-out;
+      transition: transform 0.3s ease-in-out, background-color 0.3s ease;
       transform: translateX(100%);
       padding: 10rem 2rem 2rem;
-      color: var(--mobile-accent-color);
+      color: var(--text-color, #fff);
     }
 
     a {
-      color: var(--mobile-accent-color);
+      color: var(--text-color, #fff);
     }
   }
 
@@ -151,7 +139,7 @@ const pagePathname = Astro.url.pathname;
 
   .mobile-menu li a {
     border: solid 1px
-      color-mix(in srgb, var(--mobile-accent-color) 20%, transparent);
+      color-mix(in srgb, var(--accent-color, #00ffff) 20%, transparent);
     border-radius: 4px;
     width: 100%;
     height: 4rem;
@@ -171,7 +159,7 @@ const pagePathname = Astro.url.pathname;
   .mobile-details summary {
     background: linear-gradient(
       to right,
-      color-mix(in srgb, var(--mobile-accent-color) 20%, transparent),
+      color-mix(in srgb, var(--accent-color, #00ffff) 20%, transparent),
       transparent
     );
     border-radius: 4px;
@@ -207,7 +195,7 @@ const pagePathname = Astro.url.pathname;
 
   .mobile-submenu,
   .mobile-subsubmenu {
-    border-left: dashed 1px var(--mobile-accent-color);
+    border-left: dashed 1px var(--accent-color, #00ffff);
     padding-left: 2rem;
     margin-left: 1rem;
     margin-top: 1rem;
@@ -230,7 +218,7 @@ const pagePathname = Astro.url.pathname;
     width: 100%;
     font-size: 1.7rem;
     height: 5rem;
-    color: #fff;
+    color: inherit;
     display: flex;
     align-items: center;
   }

package/src/NavMenu.astro

@@ -1,17 +1,8 @@
 ---
+import type { MenuItem, SecondaryMenuItem, TertiaryMenuItem } from "./index.js";
+
 export interface Props {
-  menuItems?: Array<{
-    link: string;
-    text: string;
-    submenu?: Array<{
-      link: string;
-      text: string;
-      submenu?: Array<{
-        link: string;
-        text: string;
-      }>;
-    }>;
-  }>;
+  menuItems?: MenuItem[];
   showHomeLink?: boolean;
   homeText?: string;
 }
@@ -24,7 +15,7 @@ const pagePathname = Astro.url.pathname;
 <script>
   function adjustSubsubmenuPositionOnResize() {
     const subsubmenus = document.querySelectorAll(
-      ".subsubmenu"
+      ".subsubmenu",
     ) as NodeListOf<HTMLElement>;
 
     subsubmenus.forEach((subsubmenu) => {
@@ -91,7 +82,7 @@ const pagePathname = Astro.url.pathname;
           const currentTransform = (subsubmenu as HTMLElement).style.transform;
           if (currentTransform && currentTransform.includes("translateX")) {
             const existingTranslate = currentTransform.match(
-              /translateX\(([^)]+)\)/
+              /translateX\(([^)]+)\)/,
             );
             if (existingTranslate) {
               const existingValue = existingTranslate[1];
@@ -135,7 +126,7 @@ const pagePathname = Astro.url.pathname;
       )
     }
     {
-      menuItems.map((item) => (
+      menuItems.map((item: MenuItem) => (
         <li class="menu__item">
           <a class="menu__link" href={item.link}>
             {item.text}
@@ -150,7 +141,7 @@ const pagePathname = Astro.url.pathname;
           </a>
           {item.submenu && (
             <ul class="submenu">
-              {item.submenu.map((sub) => (
+              {item.submenu.map((sub: SecondaryMenuItem) => (
                 <li class="submenu__item submenu__item--secondary">
                   <a href={sub.link}>
                     {sub.text}
@@ -165,7 +156,7 @@ const pagePathname = Astro.url.pathname;
                   </a>
                   {sub.submenu && (
                     <ul class="subsubmenu">
-                      {sub.submenu.map((subsub) => (
+                      {sub.submenu.map((subsub: TertiaryMenuItem) => (
                         <li class="submenu__item--tertiary">
                           <a href={subsub.link}>{subsub.text}</a>
                         </li>
@@ -202,11 +193,15 @@ const pagePathname = Astro.url.pathname;
 
   .menu__link {
     text-decoration: none;
-    padding: 0.5em ;
+    padding: 0.5em;
     display: flex;
     align-items: center;
     gap: 0.8em;
-    color: color-mix(in srgb, var(--light-spot-color, #00ffff) 30%, white 70%);
+    color: color-mix(
+      in srgb,
+      var(--accent-color, #00ffff) 30%,
+      var(--text-color, #ffffff) 70%
+    );
     position: relative;
   }
 
@@ -221,7 +216,7 @@ const pagePathname = Astro.url.pathname;
       transform-origin: 1;
       height: 2px;
       transition: transform 0.3s ease;
-      background: var(--light-spot-color, #00ffff);
+      background: var(--accent-color, #00ffff);
     }
 
     .menu__link:hover::after {
@@ -239,13 +234,14 @@ const pagePathname = Astro.url.pathname;
 
   .submenu,
   .subsubmenu {
-    color: color-mix(in srgb, var(--light-spot-color, #00ffff) 20%, white 80%);
-    background-color: #171717;
-    border: 0.5px solid #3e1c71;
+    color: var(--text-color, #ffffff);
+    background-color: var(--bg-color-opaque, #171717);
+    border: 0.5px solid
+      color-mix(in srgb, var(--accent-color, #3e1c71) 30%, transparent);
     position: absolute;
     flex-direction: column;
     gap: 0.4em;
-    padding:  1em;
+    padding: 1em;
     border-radius: 10px;
     transition: transform 0.3s ease-in-out;
     pointer-events: none;
@@ -267,8 +263,7 @@ const pagePathname = Astro.url.pathname;
     width: 100%;
     height: 64px;
     border-radius: 6px;
-    color: #fff;
-    color: var(--color-tertiary, #fff);
+    color: var(--text-color, #fff);
   }
 
   .submenu__item--secondary,
@@ -283,8 +278,12 @@ const pagePathname = Astro.url.pathname;
 
   .submenu__item--secondary a:hover,
   .submenu__item--tertiary a:hover {
-    background: rgb(71, 70, 70);
-    color: white;
+    background: color-mix(
+      in srgb,
+      var(--accent-color, #00ffff) 15%,
+      transparent
+    );
+    color: var(--text-color, white);
   }
 
   .submenu {

package/src/index.ts

@@ -7,16 +7,66 @@ export interface MenuItemType {
   submenu?: MenuItemType[];
 }
 
-export interface HeaderProps {
-  headerType?: "floating" | "fullscreen";
-  logoSrc?: string;
-  logoAlt?: string;
-  logoWidth?: string;
+export interface TertiaryMenuItem {
+  link: string;
+  text: string;
+}
+
+export interface SecondaryMenuItem {
+  link: string;
+  text: string;
+  submenu?: TertiaryMenuItem[];
+}
+
+export interface MenuItem {
+  link: string;
+  text: string;
+  submenu?: SecondaryMenuItem[];
+}
+
+export interface LogoConfig {
+  src?: string;
+  alt?: string;
+  width?: string;
+  text?: string;
+  textSize?: string;
+  textColor?: string;
+}
+
+export interface NavConfig {
   homeUrl?: string;
-  menuItems?: MenuItemType[];
+  menuItems?: MenuItem[];
+}
+
+export interface ThemeConfig {
   backgroundColor?: string;
+  backgroundColorOpaque?: string;
   backdropBlur?: string;
   zIndex?: number;
+  textColor?: string;
+  accentColor?: string;
+}
+
+export interface DualThemeConfig {
+  light?: ThemeConfig;
+  dark?: ThemeConfig;
+}
+
+export interface CustomClassNames {
+  container?: string;
+  header?: string;
+  logo?: string;
+  logoText?: string;
+  nav?: string;
+}
+
+export interface HeaderProps {
+  headerType?: "floating" | "fullscreen";
+  preset?: "light" | "dark" | "auto";
+  logo?: LogoConfig;
+  navigation?: NavConfig;
+  theme?: DualThemeConfig;
+  classNames?: CustomClassNames;
 }
 
 export interface NavMenuProps {