Dark Mode & Search di Nuxt 3? Nggak Perlu Ribet — Cukup Tambah 2 Script

Dark Mode & Search = Mandatory di 2026

Kalo blog kamu belum punya dark mode dan search, rasanya kayak rumah tanpa lampu dan pintu — fungsional sih, tapi pengunjung pasti bete 😅

Tapi masalahnya... implementasi dark mode itu sering ribet. State management, CSS variables, localStorage, transition animation... Belum lagi search — butuh backend atau Algolia yang bikin tagihan naik.

Nah, ternyata ada cara super simpel yang jarang orang bahas: pakai library GitHub yang tinggal tempel via CDN. Zero npm install. Seriusan.

Siapa Penolong Kita?

🌙 Darkmode.js — 16k+ Stars di GitHub

Darkmode.js itu library kecil yang bikin dark mode jalan otomatis di website kamu. Tinggal load script-nya, panggil new Darkmode(), dan boom — website kamu punya toggle dark/light mode.

Yang keren:

✅ Tanpa konfigurasi CSS — otomatis invert warna halaman
✅ Smooth transition — animasi flip yang keren pas toggle
✅ Remember preference — pilihan user tersimpan di localStorage
✅ CDN ready — nggak perlu bundler, tinggal tambah <script>

🔍 Fuse.js — 19k+ Stars di GitHub

Fuse.js adalah fuzzy-search library yang super ringan. Artinya, user nggak perlu ketik persis — ketik "nuxt tut" tetap nemu "Nuxt Tutorial".

Fitur yang bikin aku suka:

✅ Fuzzy matching — typo kecil tetap ketemu
✅ Super ringan — ~5KB minified
✅ Bisa search di array of objects — cocok buat list artikel
✅ Zero dependency — tinggal load dan pakai

Cara Pasang — Singkat & Jelas

Darkmode.js

Tambahkan ini di app.vue atau layout kamu:

html

<script src="https://cdn.jsdelivr.net/npm/darkmode-js@1.5.7/lib/darkmode-js.min.js"></script>

<script>
  function addDarkmodeWidget() {
    new Darkmode({
      bottom: '64px',
      right: 'unset',
      left: '32px',
      time: '0.5s',
      mixColor: '#fff',
      backgroundColor: '#fff',
      buttonColorDark: '#100f2c',
      buttonColorLight: '#fff',
      label: '🌓',
      saveInCookies: false,
      autoMatchOsTheme: true
    }).showWidget()
  }
  window.addEventListener('load', addDarkmodeWidget)
</script>

Done. Dark mode jalan. Segitu aja.

💡 Pro tip: Set autoMatchOsTheme: true biar otomatis ikut tema OS user. Kalo user pakai dark mode di laptop-nya, website langsung dark juga.

Fuse.js

Buat search, kamu perlu dua hal: input field dan sedikit JavaScript:

vue

<template>
  <div class="search-container">
    <input
      v-model="query"
      placeholder="Cari artikel..."
      class="search-input"
    />
    <div v-if="results.length > 0" class="results">
      <NuxtLink
        v-for="result in results"
        :key="result.item.slug"
        :to="result.item.path"
        class="result-item"
      >
        {{ result.item.title }}
      </NuxtLink>
    </div>
  </div>
</template>

<script setup>
import Fuse from 'fuse.js'

const query = ref('')
const articles = queryContent('/tech').only(['title', 'description', 'path', 'slug']).sort({ date: -1 }).limit(50)
const { data: posts } = await useAsyncData('search-posts', () => articles)

const fuse = computed(() => new Fuse(posts.value || [], {
  keys: ['title', 'description'],
  threshold: 0.3
}))

const results = computed(() =>
  query.value ? fuse.value.search(query.value) : []
)
</script>

threshold: 0.3 artinya toleran sama typo. Makin kecil angkanya, makin ketat pencariannya.

Kenapa Ini Pendekatan yang "Cheat"?

Sebenarnya untuk project besar, mendingan pakai CSS variables + Tailwind dark class untuk dark mode, dan Algolia atau server-side search. Tapi buat blog pribadi atau project kecil, pendekatan CDN ini:

🚀 5 menit setup dari nol sampai jalan
📦 Zero bundle size increase — library di-load terpisah
🔧 Zero config — tinggal copy-paste
💰 Gratis — nggak perlu Algolia atau backend

⚠️ Catatan: Darkmode.js pakai CSS filter inversion, jadi warna gambar bisa sedikit berubah di dark mode. Buat kontrol penuh, mendingan pakai Tailwind dark: classes.

Hasilnya?

Blog kamu langsung punya dua fitur yang bikin pengunjung betah:

🌙 Dark mode — mata nggak pedes baca malam
🔍 Search — artikel lama gampang ditemukan

Fitur sederhana, tapi impact-nya besar banget buat UX.

📎 Source: Tutorial lengkap di GitHub OpenClaw Sumopod