mycsslab/src/themes/dark-mode.css

MyCSSLab Quantum v3.0 - Revolutionary CSS framework with AI-powered intelligence, holographic UI, neural networks, and quantum effects

/**
 * FluxCSS Dark Mode Theme
 */

/* Dark Mode Variables */
:root {
  --my-dark-bg: #0a0a0a;
  --my-dark-surface: #1a1a1a;
  --my-dark-surface-elevated: #2a2a2a;
  --my-dark-text: #ffffff;
  --my-dark-text-secondary: #a0a0a0;
  --my-dark-text-muted: #666666;
  --my-dark-border: #333333;
  --my-dark-border-light: #444444;
}

/* Dark Mode Base */
.my-dark {
  background-color: var(--my-dark-bg);
  color: var(--my-dark-text);
}

/* Dark Mode Surface */
.my-dark-surface {
  background-color: var(--my-dark-surface);
  color: var(--my-dark-text);
}

.my-dark-surface-elevated {
  background-color: var(--my-dark-surface-elevated);
  color: var(--my-dark-text);
}

/* Dark Mode Text */
.my-dark-text {
  color: var(--my-dark-text);
}

.my-dark-text-secondary {
  color: var(--my-dark-text-secondary);
}

.my-dark-text-muted {
  color: var(--my-dark-text-muted);
}

/* Dark Mode Borders */
.my-dark-border {
  border-color: var(--my-dark-border);
}

.my-dark-border-light {
  border-color: var(--my-dark-border-light);
}

/* Dark Mode Cards */
.my-dark-card {
  background-color: var(--my-dark-surface);
  border: 1px solid var(--my-dark-border);
  color: var(--my-dark-text);
}

.my-dark-card-elevated {
  background-color: var(--my-dark-surface-elevated);
  border: 1px solid var(--my-dark-border);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
  color: var(--my-dark-text);
}

/* Dark Mode Buttons */
.my-dark-btn {
  background-color: var(--my-dark-surface-elevated);
  border: 1px solid var(--my-dark-border);
  color: var(--my-dark-text);
}

.my-dark-btn:hover {
  background-color: var(--my-dark-border);
  color: var(--my-dark-text);
}

/* Dark Mode Inputs */
.my-dark-input {
  background-color: var(--my-dark-surface);
  border: 1px solid var(--my-dark-border);
  color: var(--my-dark-text);
}

.my-dark-input:focus {
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.my-dark-input::placeholder {
  color: var(--my-dark-text-muted);
}

/* Dark Mode Navigation */
.my-dark-nav {
  background-color: rgba(10, 10, 10, 0.8);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--my-dark-border);
}

.my-dark-nav-link {
  color: var(--my-dark-text-secondary);
}

.my-dark-nav-link:hover {
  color: var(--my-dark-text);
}

/* Dark Mode Alerts */
.my-dark-alert {
  background-color: var(--my-dark-surface);
  border: 1px solid var(--my-dark-border);
  color: var(--my-dark-text);
}

.my-dark-alert-primary {
  background-color: rgba(102, 126, 234, 0.1);
  border-color: rgba(102, 126, 234, 0.3);
  color: #8b9cff;
}

.my-dark-alert-success {
  background-color: rgba(40, 167, 69, 0.1);
  border-color: rgba(40, 167, 69, 0.3);
  color: #6bcf7f;
}

.my-dark-alert-warning {
  background-color: rgba(255, 193, 7, 0.1);
  border-color: rgba(255, 193, 7, 0.3);
  color: #ffd43b;
}

.my-dark-alert-danger {
  background-color: rgba(220, 53, 69, 0.1);
  border-color: rgba(220, 53, 69, 0.3);
  color: #ff6b7a;
}