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

npm install auto-theme-pro

2.1 Initialize theme (Client-side)

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

theme.toggle();

3️⃣ Usage

3.1 Vanilla JavaScript

<button id="toggle">Toggle Theme</button>

<script type="module">
import theme from "frontend-auto-theme-pro";

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

document.getElementById("toggle").onclick = () => theme.toggle();
</script>

3.2 React

import { useEffect } from "react";
import theme from "auto-theme-pro";

export default function App() {
  useEffect(() => {
    theme.init({ mode: "auto" });
  }, []);

  return (
    <button onClick={() => theme.toggle()}>Toggle Theme</button>
  );
}

3.3 Angular

// app.component.ts
import { Component, OnInit } from '@angular/core';
import theme from 'frontend-auto-theme-pro';

@Component({
  selector: 'app-root',
  template: `<button (click)="toggle()">Toggle</button>`
})
export class AppComponent implements OnInit {
  ngOnInit() {
    theme.init({ mode: 'auto' });
  }

  toggle() {
    theme.toggle();
  }
}

3.4 Vue

<script setup>
import { onMounted } from "vue";
import theme from "frontend-auto-theme-pro";

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

function toggle() {
  theme.toggle();
}
</script>

<template>
  <button @click="toggle">Toggle Theme</button>
</template>

4️⃣ API

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