Muslim Finder Angular Theme

A comprehensive Angular theme system inspired by ngx-admin with multiple themes, components, and utilities.

Features

• Multiple Themes: Default, Dark, and Corporate themes
• Theme Service: Centralized theme management with localStorage persistence
• Theme Toggle Component: Easy-to-use theme switching component
• SCSS Variables: Comprehensive CSS custom properties for theming
• TypeScript Support: Full type definitions for all theme configurations

Installation

npm install muslim-finder-angular-theme

Usage

1. Import the Module

import { MuslimFinderAngularThemeModule } from 'muslim-finder-angular-theme';

@NgModule({
  imports: [
    MuslimFinderAngularThemeModule
  ],
  // ...
})
export class AppModule { }

2. Use the Theme Toggle Component

<mf-theme-toggle 
  [size]="'md'" 
  [showLabel]="true"
  (themeChange)="onThemeChange($event)">
</mf-theme-toggle>

3. Use the Theme Service

import { MuslimFinderThemeService } from 'muslim-finder-angular-theme';

constructor(private themeService: MuslimFinderThemeService) {}

// Get current theme
const currentTheme = this.themeService.getCurrentTheme();

// Set theme
this.themeService.setTheme('dark');

// Toggle theme
this.themeService.toggleTheme();

// Check if dark theme is active
const isDark = this.themeService.isDarkTheme();

4. Import Styles

Add the theme styles to your angular.json:

{
  "styles": [
    "node_modules/muslim-finder-angular-theme/styles"
  ]
}

Or import directly in your styles.scss:

@import 'muslim-finder-angular-theme/styles';

Available Themes

Default Theme

• Primary: #153D77
• Secondary: #FCD806
• Background: #f8f9fa
• Surface: #ffffff

Dark Theme

• Primary: #4a9eff
• Secondary: #ffd700
• Background: #1a1a1a
• Surface: #2d2d2d

Corporate Theme

• Primary: #2c3e50
• Secondary: #34495e
• Background: #f8f9fa
• Surface: #ffffff

CSS Custom Properties

The library provides CSS custom properties that you can use in your components:

.my-component {
  background-color: var(--mf-background);
  color: var(--mf-text-primary);
  border: 1px solid var(--mf-border);
}

Available properties:

• --mf-primary
• --mf-secondary
• --mf-background
• --mf-surface
• --mf-text-primary
• --mf-text-secondary
• --mf-border

Component Props

ThemeToggleComponent

| Property | Type | Default | Description | |----------|------|---------|-------------| | size | 'sm' \| 'md' \| 'lg' | 'md' | Size of the toggle button | | showLabel | boolean | true | Whether to show the theme label | | themeChange | EventEmitter<ThemeType> | - | Emitted when theme changes |

Development

Building the Library

npm run build

Building for Production

npm run build:prod

Testing

npm test

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

License

MIT

Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

Changelog

1.0.0

• Initial release
• Theme service with localStorage persistence
• Theme toggle component
• Three built-in themes (Default, Dark, Corporate)
• SCSS variables and CSS custom properties
• TypeScript support