v148 · CSS · demo

Conditional Polish

Compare three approaches to dark-mode styling. revert-rule lets you undo only the properties you want to change — no repetitive re-declaration needed.

A primary button, styled for whichever scheme is active.

❌ Repetitive — must redeclare every changed property

.btn {
  background: #2563eb;
  color: #ffffff;
  border-color: #1d4ed8;
  padding: 0.6rem 1.4rem;
  font-weight: 600;
}

@media (prefers-color-scheme: dark) {
  .btn {
    background: #93c5fd;   /* changed */
    color: #0f172a;        /* changed */
    border-color: #60a5fa; /* changed */
    /* padding, font-weight must be re-stated or
       they inherit — every property is on the hook */
  }
}

✅ Surgical — only override what actually changes

.btn {
  background: #2563eb;
  color: #ffffff;
  border-color: #1d4ed8;
  padding: 0.6rem 1.4rem;
  font-weight: 600;
}

@media (prefers-color-scheme: dark) {
  .btn {
    background: #93c5fd;
    color: #0f172a;
    border-color: #60a5fa;
    /* padding: revert-rule; — keeps 0.6rem 1.4rem from base rule */
    /* font-weight: revert-rule; — keeps 600 from base rule       */
  }
}

/* Or, if you're only tweaking colours: */
@media (prefers-color-scheme: dark) {
  .btn {
    background: #93c5fd;
    color: #0f172a;
    border-color: #60a5fa;
    padding: revert-rule;    /* ← explicit "keep the base value" */
    font-weight: revert-rule;
  }
}

implementation reference

Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗

see also

implementation reference