Template:Color box/styles.css

/* Base box styling */
.color-box {
  border-radius: 4px;
  padding: 0.75em 1em;
  margin: 0.5em 0;
  border: 1px solid transparent;
  font-size: 95%;
}

/* Light theme defaults */
.color-box--green    { background: #e6f4ea; color: #093;    border-color: #b7e1c0; }
.color-box--turquoise{ background: #e0f7f9; color: #007c7c; border-color: #b3e6ea; }
.color-box--blue     { background: #e6f0ff; color: #0645ad; border-color: #c0d4ff; }
.color-box--yellow   { background: #fff8d6; color: #7a5a00; border-color: #f2e2a0; }
.color-box--red      { background: #ffe6e6; color: #b00020; border-color: #f5b3b3; }
.color-box--brown    { background: #f3e6dc; color: #5b3b1f; border-color: #d9bda3; }
.color-box--purple   { background: #f1e6ff; color: #5b2b8a; border-color: #d3b8ff; }

/* Dark theme overrides */
@media (prefers-color-scheme: dark) {
  .color-box {
    border-color: rgba(255,255,255,0.18);
  }

  .color-box--green {
    background: #123322;
    color: #b5f7c8;
    border-color: #1f5a37;
  }

  .color-box--turquoise {
    background: #073338;
    color: #9df2f2;
    border-color: #0f5a61;
  }

  .color-box--blue {
    background: #0b223d;
    color: #a9c7ff;
    border-color: #234a7a;
  }

  .color-box--yellow {
    background: #3a3005;
    color: #ffeaa0;
    border-color: #7a6510;
  }

  .color-box--red {
    background: #3a1013;
    color: #ffb3b8;
    border-color: #7a1f26;
  }

  .color-box--brown {
    background: #2b1c12;
    color: #e2c3a3;
    border-color: #5b3b24;
  }

  .color-box--purple {
    background: #241334;
    color: #d7b8ff;
    border-color: #4f2f7a;
  }
}