blog/assets/css/extended/admonitions.css

:root {
  --info-background: #d1ecf1;
  --info-text: #0c5460;
  --success-background: #d4edda;
  --success-text: #155724;
  --danger-background: #f8d7da;
  --danger-text: #721c24;
  --warning-background: #fff3cd;
  --warning-text: #856404;
}

@media (prefers-color-scheme: dark) {
  :root {
    --info-background: #0c5460;
    --info-text: #d1ecf1;
    --success-background: #155724;
    --success-text: #d4edda;
    --danger-background: #721c24;
    --danger-text: #f8d7da;
    --warning-background: #856404;
    --warning-text: #fff3cd;
  }
}

.admonition .title {
  font-weight: bold;
  margin-bottom: 0;
}

.admonition {
  background-color: var(--nc-bg-2);
  box-shadow: 0 0 8px -1px var(--nc-bg-3);
  border: 1px solid var(--nc-bg-3);
  padding: 1ex 1.5ex;
  border-radius: 5px;
  margin-bottom: 1rem;
}

.admonition > :last-child {
  margin-bottom: 0;
}

.admonition.info {
  --nc-bg-2: var(--info-background);
  --nc-bg-3: var(--info-text);
  color: var(--info-text);
}

.admonition.success {
  --nc-bg-2: var(--success-background);
  --nc-bg-3: var(--success-text);
  color: var(--success-text);
}

.admonition.warning {
  --nc-bg-2: var(--warning-background);
  --nc-bg-3: var(--warning-text);
  color: var(--warning-text);
}

.admonition.danger {
  --nc-bg-2: var(--danger-background);
  --nc-bg-3: var(--danger-text);
  color: var(--danger-text);
}

.admonition a {
  color: inherit;
}