https://github.com/zakintaliban/bravosix
Bravo Six adalah modul Node yang memungkinkan Anda mengganti tema warna elemen HTML dengan mudah.
https://github.com/zakintaliban/bravosix
accessibility color color-scheme contrast dark-mode night-vision styling theme user-experience webdesign
Last synced: 2 months ago
JSON representation
Bravo Six adalah modul Node yang memungkinkan Anda mengganti tema warna elemen HTML dengan mudah.
- Host: GitHub
- URL: https://github.com/zakintaliban/bravosix
- Owner: Zakintaliban
- License: mit
- Created: 2023-05-03T14:17:44.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2023-07-21T09:50:03.000Z (almost 2 years ago)
- Last Synced: 2025-03-05T10:46:58.303Z (2 months ago)
- Topics: accessibility, color, color-scheme, contrast, dark-mode, night-vision, styling, theme, user-experience, webdesign
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/bravosix
- Size: 72.3 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# BravoSix
BravoSix adalah pustaka JavaScript untuk mengganti tema warna elemen HTML dengan animasi efek "going dark" seperti night vision.
## Instalasi
Anda dapat menginstal BravoSix melalui NPM:
```bash
npm install bravosix
```
## Cara Penggunaan
Berikut adalah contoh penggunaan BravoSix dalam aplikasi React:
1. Import BravoSix
```javascript
import BravoSix from "bravosix";
```
2. Buat instance BravoSix
```javascript
const bravosix = new BravoSix();
```
3. Gunakan metode `applyColors(colorTheme)`
Metode ini mengganti tema warna elemen tanpa animasi.
```javascript
bravosix.applyColors(colorTheme);
```
`colorTheme` dapat berupa:
- "original"
- "dark"
- "light"
- "night-vision" terinspirasi dari night vision di game Call of Duty: Modern Warfare II (2022)
Contoh menggunakan `applyColors` dalam aplikasi React:
```javascript
const handleButtonClick = () => {
let newTheme;
switch (colorTheme) {
case "original":
newTheme = "dark";
break;
case "dark":
newTheme = "light";
break;
case "light":
newTheme = "original";
break;
default:
newTheme = "original";
}
setColorTheme(newTheme);
setIsNightVision(false);
bravosix.applyColors(newTheme);
};
```
4. Gunakan metode `goingDark()`
Metode ini memulai animasi efek "going dark" dan mengganti tema warna menjadi night vision.
```javascript
bravosix.goingDark();
```
Contoh lengkap dengan `applyColors` dan `goingDark`:
```javascript
import React, { useState, useEffect } from "react";
import "./App.css";
import BravoSix from "bravosix";
function App() {
const [colorTheme, setColorTheme] = useState("original");
const [isNightVision, setIsNightVision] = useState(false);
const [bravosix, setBravosix] = useState(null);
useEffect(() => {
setBravosix(new BravoSix());
}, []);
const handleButtonClick = () => {
let newTheme;
switch (colorTheme) {
case "original":
newTheme = "dark";
break;
case "dark":
newTheme = "light";
break;
case "light":
newTheme = "original";
break;
default:
newTheme = "original";
}
setColorTheme(newTheme);
setIsNightVision(false);
bravosix.applyColors(newTheme);
};
const handleGoingDarkClick = () => {
if (isNightVision) {
setColorTheme("original");
setIsNightVision(false);
bravosix.applyColors("original");
} else {
setIsNightVision(true);
bravosix.goingDark();
}
};
return (
Klik tombol di bawah untuk mengganti tema warna:
Ganti Tema Warna
{isNightVision ? "Kembali ke Original" : "Going Dark"}
);
}
export default App;
```
certification: MIT