PixelPilot: Instructions file for GitHub Copilot

UI/UX Components, Alerts, Nav & Grid

Dark mode setup, global CSS reset, CDN stack, SweetAlert2 themes, spacing, responsive navigation, grid layouts.

STEP 3 — Dark/Light Mode System

Anti-FOWT (Flash of Wrong Theme) — ALWAYS inline in <head>

<script>
(function(){
  var t=localStorage.getItem('theme')||
    (window.matchMedia('(prefers-color-scheme: dark)').matches?'dark':'light');
  document.documentElement.setAttribute('data-theme',t);
})();
</script>

Toggle JS (universal, all stacks)

const applyTheme = t => {
  document.documentElement.setAttribute('data-theme', t);
  localStorage.setItem('theme', t);
};
const toggleTheme = () => {
  applyTheme(document.documentElement.getAttribute('data-theme') === 'dark' ? 'light' : 'dark');
};
// Init
applyTheme(localStorage.getItem('theme') || (matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'));
// System change listener
matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
  if (!localStorage.getItem('theme')) applyTheme(e.matches ? 'dark' : 'light');
});

React / Next.js Theme Hook

// hooks/useTheme.js — import in _app.js / layout.jsx
import { useEffect, useState } from 'react';
export function useTheme() {
  const [theme, setTheme] = useState('light');
  useEffect(() => {
    const saved = localStorage.getItem('theme') ||
      (matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
    setTheme(saved);
    document.documentElement.setAttribute('data-theme', saved);
  }, []);
  const toggle = () => {
    const next = theme === 'dark' ? 'light' : 'dark';
    setTheme(next);
    document.documentElement.setAttribute('data-theme', next);
    localStorage.setItem('theme', next);
  };
  return { theme, toggle };
}

Toggle Button Styles by Language

/* Luxury — minimal text toggle */
.theme-toggle-luxury {
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  border: 1px solid var(--border); padding: 8px 16px; background: none;
  cursor: pointer; color: var(--text); transition: var(--transition-slow);
}

/* Premium / Technical — icon button */
.theme-toggle-icon {
  width: 40px; height: 40px; border-radius: var(--radius-md);
  border: 1px solid var(--border); background: var(--surface);
  display: grid; place-items: center; cursor: pointer;
  transition: var(--transition-base); color: var(--text);
}
.theme-toggle-icon:hover { background: var(--surface-up); }

/* Warm — pill toggle with sliding circle */
.theme-toggle-pill {
  width: 52px; height: 28px; border-radius: var(--radius-full);
  background: var(--surface-up); border: 1px solid var(--border);
  position: relative; cursor: pointer; transition: var(--transition-spring);
}
.theme-toggle-pill::after {
  content: ''; position: absolute; top: 3px; left: 3px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--accent); transition: var(--transition-spring);
}
[data-theme="dark"] .theme-toggle-pill::after { transform: translateX(24px); }