auto-theme-pro 🌗

Zero-config automatic dark / light theme engine for any frontend app.
No CSS. No framework dependency.

---

🔹 What this does

auto-theme-pro detects system theme and applies dark/light colors
to all elements like div, section, form, input, button, table, etc.

You can also toggle theme manually.

---

1️⃣ Features

- Auto detect system theme
- One-click toggle
- Works with div, table, form, inputs, buttons
- No CSS required
- Saves user preference in localStorage
- Framework agnostic

---

2️⃣ Installation

bash

npm install auto-theme-pro





2.1 Initialize theme (Client-side)

bash

import theme from "auto-theme-pro";



theme.init({ mode: "auto" });



This starts the theme engine.

It automatically chooses light or dark based on user system.



2.2 Toggle theme manually

bash

theme.toggle();







3️⃣ Usage



3.1 Vanilla JavaScript

bash





3.2 React

bash

import { useEffect } from "react";

import theme from "auto-theme-pro";



export default function App() {

  useEffect(() => {

    theme.init({ mode: "auto" });

  }, []);



  return (

    

  );

}





3.3 Angular

bash

// app.component.ts

import { Component, OnInit } from '@angular/core';

import theme from 'frontend-auto-theme-pro';



@Component({

  selector: 'app-root',

  template:



})

export class AppComponent implements OnInit {

  ngOnInit() {

    theme.init({ mode: 'auto' });

  }



  toggle() {

    theme.toggle();

  }

}





3.4 Vue

bash

4️⃣ API

| Method | Description |
| -------------- | ------------------- |
| init({ mode }) | auto / light / dark |
| toggle() | switch theme |
| set(mode) | force theme |