/* Light (default) */ body { font-family: Arial, sans-serif; margin: 20px; background-color: #f5f5f5; color: #222; } h1 { color: #333; } p { color: #555; } .box { background: white; border: 1px solid #ccc; padding: 10px; margin-top: 10px; } a { color: #0066cc; text-decoration: none; } a:hover { text-decoration: underline; } /* Dark mode via OS preference */ @media (prefers-color-scheme: dark) { body { background-color: #0f1724; color: #e6eef8; } h1 { color: #fff; } p { color: #cbd5e1; } .box { background: #0b1220; border: 1px solid #213244; } a { color: #7fb3ff; } } /* Optional: force dark mode by adding class "dark" on */ body.dark { background-color: #0f1724; color: #e6eef8; } body.dark h1 { color: #fff; } body.dark p { color: #cbd5e1; } body.dark .box { background: #0b1220; border: 1px solid #213244; } body.dark a { color: #7fb3ff; }