Dark Mode CSS

August 8, 2025 · AI Conversations

User

generate dark csss for below
dark: {
'–bs-primary': '#6610f2',
'–bs-secondary': '#adb5bd',
'–bs-success': '#20c997',
'–bs-danger': '#d63384',
'–bs-warning': '#fd7e14',
'–bs-info': '#0dcaf0',
},

Assistant

Here’s the **dark theme CSS** generated based on your provided variables:

/* Dark Theme Variables */
:root.dark {
  --bs-primary: #6610f2;
  --bs-secondary: #adb5bd;
  --bs-success: #20c997;
  --bs-danger: #d63384;
  --bs-warning: #fd7e14;
  --bs-info: #0dcaf0;
}

/* Example usage */
.dark .btn-primary {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}

.dark .btn-secondary {
  background-color: var(--bs-secondary);
  border-color: var(--bs-secondary);
}

.dark .btn-success {
  background-color: var(--bs-success);
  border-color: var(--bs-success);
}

.dark .btn-danger {
  background-color: var(--bs-danger);
  border-color: var(--bs-danger);
}

.dark .btn-warning {
  background-color: var(--bs-warning);
  border-color: var(--bs-warning);
}

.dark .btn-info {
  background-color: var(--bs-info);
  border-color: var(--bs-info);
}

/* Optional: background and text adjustments for dark mode */
.dark body {
  background-color: #121212;
  color: #e0e0e0;
}

.dark a {
  color: var(--bs-primary);
}

.dark a:hover {
  color: var(--bs-info);
}

—

**Quick Notes:**
– `.dark` class can be applied to “ or “ to activate dark mode.
– I added basic `.btn-*` styles assuming you're using Bootstrap buttons. You can extend it further for `bg-*`, `text-*`, badges, alerts, etc.

Would you also like me to generate a more complete version (including `background`, `text`, `alert`, `badge`, etc. classes too)? 🚀
I can do it in Bootstrap style if you want!

User

but I want black

Assistant

Got it — you want the **dark theme** to have **black** (or near-black) backgrounds, while **keeping your primary, secondary, success, danger, warning, info** colors based on your variables.

Here’s the corrected **"black dark mode" CSS**:

/* Black Dark Theme */
:root.dark {
  --bs-primary: #6610f2;
  --bs-secondary: #adb5bd;
  --bs-success: #20c997;
  --bs-danger: #d63384;
  --bs-warning: #fd7e14;
  --bs-info: #0dcaf0;

  /* Background and text */
  --bs-body-bg: #000000; /* Pure black background */
  --bs-body-color: #e0e0e0; /* Light gray text */
}

/* Apply background and text color */
.dark body {
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
}

/* Buttons */
.dark .btn-primary {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
  color: #ffffff;
}

.dark .btn-secondary {
  background-color: var(--bs-secondary);
  border-color: var(--bs-secondary);
  color: #000000;
}

.dark .btn-success {
  background-color: var(--bs-success);
  border-color: var(--bs-success);
  color: #000000;
}

.dark .btn-danger {
  background-color: var(--bs-danger);
  border-color: var(--bs-danger);
  color: #ffffff;
}

.dark .btn-warning {
  background-color: var(--bs-warning);
  border-color: var(--bs-warning);
  color: #000000;
}

.dark .btn-info {
  background-color: var(--bs-info);
  border-color: var(--bs-info);
  color: #000000;
}

/* Links */
.dark a {
  color: var(--bs-primary);
}

.dark a:hover {
  color: var(--bs-info);
}

—

✅ **Now the background is black**
✅ **Text color is light gray**
✅ **Your brand colors (primary, secondary, etc.) are preserved**
✅ **Buttons adapt to dark mode nicely**

—

Would you also like a ready version for **alerts**, **badges**, **cards**, etc. all with dark black backgrounds too? 🔥
I can generate that if you want! 🚀

Dark Mode CSS

Leave a Comment Cancel