Fully automatic dark/light theme for frontend without CSS
npm install auto-theme-probash
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
``