Template:Version/styles.css

.version-legend {
  display: flex;
  flex-wrap: wrap;
  column-gap: 12px;
}
.version-legend-vertical {
  display: flex;
  flex-wrap: wrap;
  column-gap: 4px;
  flex-direction: column;
}
.version-legend .legend-item,
.version-legend-vertical .legend-item {
  page-break-inside: avoid;
  break-inside: avoid-column;
  gap: 4px;
}
.version-legend .legend-item .swatch,
.version-legend-vertical .legend-item .swatch {
  display: inline-block;
  width: 1.25em;
  height: 1.25em;
  border: 1px solid #aaa;
  margin-top: 1px;
}

/* 淺色模式 */
.swatch-unsupported {
  background-color: #FDB3AB;
}
.swatch-maintained {
  background-color: #FEF8C6;
}
.swatch-latest {
  background-color: #D4F4B4;
}
.swatch-preview {
  background-color: #C1E6F5;
}
.swatch-future {
  background-color: #F2E2FC;
}
.swatch-never {
  background-color: #CFCFD6;
}

/* 深色模式 (手動切換) */
@media screen {
  html.skin-theme-clientpref-night .version-legend .legend-item .swatch,
  html.skin-theme-clientpref-night .version-legend-vertical .legend-item .swatch {
    border-color: #72777d;
  }
  html.skin-theme-clientpref-night .swatch-unsupported {
    background-color: #421511;
  }
  html.skin-theme-clientpref-night .swatch-maintained {
    background-color: #433500;
  }
  html.skin-theme-clientpref-night .swatch-latest {
    background-color: #334423;
  }
  html.skin-theme-clientpref-night .swatch-preview {
    background-color: #154467; 
  }
  html.skin-theme-clientpref-night .swatch-future {
    background-color: #3C2E69;
  }
  html.skin-theme-clientpref-night .swatch-never {
    background-color: #2F3640;
  }
}

/* 深色模式 (跟隨系統) */
@media screen and (prefers-color-scheme: dark) {
  html.skin-theme-clientpref-os .version-legend .legend-item .swatch,
  html.skin-theme-clientpref-os .version-legend-vertical .legend-item .swatch {
    border-color: #72777d;
  }
  html.skin-theme-clientpref-os .swatch-unsupported {
    background-color: #421511;
  }
  html.skin-theme-clientpref-os .swatch-maintained {
    background-color: #433500;
  }
  html.skin-theme-clientpref-os .swatch-latest {
    background-color: #334423;
  }
  html.skin-theme-clientpref-os .swatch-preview {
    background-color: #154467; 
  }
  html.skin-theme-clientpref-os .swatch-future {
    background-color: #3C2E69;
  }
  html.skin-theme-clientpref-os .swatch-never {
    background-color: #2F3640;
  }
}