次回アップデート予告

.btn-group-toggle:has(.btn-outline-secondary) {
  border-radius: 0.5rem !important;
  background-color: var(--hlt-secondary);
  background-image: none;
  padding: 0.25rem 0;
}

.btn-group-toggle .btn-outline-secondary {
  margin: 0 0.25rem;
  border-radius: 0.5rem !important;
  color: var(--hlt-white);
  background-color: transparent;
  border-color: transparent !important;
  --hlt-btn-padding-y: 0.125rem;
  --hlt-btn-focus-shadow-rgb: var(--hlt-white-rgb);
}

.btn-group-toggle .btn-outline-secondary.disabled,
.btn-group-toggle .btn-outline-secondary:disabled {
  color: var(--hlt-black) !important;
  background-color: transparent !important;
}

.btn-group-toggle .btn-outline-secondary.active,
.btn-group-toggle .btn-outline-secondary:active {
  color: var(--hlt-primary) !important;
  background-color: var(--hlt-white) !important;
  background-image: linear-gradient(0deg, var(--hb-post-background), var(--hb-post-background)) !important;
}

.btn-group-toggle .btn-outline-secondary:is(:focus, :hover):not(.active, :active) {
  color: var(--hlt-secondary) !important;
  background-color: var(--hlt-white) !important;
}

@media (prefers-color-scheme: dark) {
  .btn-group-toggle:has(.btn-outline-secondary) {
    background-color: transparent;
    background-image: linear-gradient(0deg, var(--hb-post-background), var(--hb-post-background));
  }

  .btn-group-toggle .btn-outline-secondary {
    --hlt-btn-focus-shadow-rgb: var(--hlt-secondary-rgb);
  }

  .btn-group-toggle .btn-outline-secondary.disabled,
  .btn-group-toggle .btn-outline-secondary:disabled {
    color: var(--hlt-gray) !important;
  }

  .btn-group-toggle .btn-outline-secondary.active,
  .btn-group-toggle .btn-outline-secondary:active {
    background-color: var(--hlt-black) !important;
    background-image: none !important;
    border-color: transparent !important;
  }

  .btn-group-toggle .btn-outline-secondary:is(:focus, :hover):not(.active, :active) {
    color: var(--hlt-white) !important;
    background-color: var(--hlt-secondary) !important;
  }
}

lemmy-ui 0.18用のBootstrap 5.3.0ベースのcssも作ってみました。

ピンク系も作ってみました。 https://github.com/hanubeki/hanubeki-lemmy-themes/tree/main/5/src/_variables.hanubeki-pink.scss

寒色系のcssにも少し手を加えています。 https://github.com/hanubeki/hanubeki-lemmy-themes/tree/main/5/src/_variables.hanubeki-cold.scss

ちなみに、このテーマはCSS自体はnord.cssがベースではあるがNordではなく自分用に作ってたカラースキームをベースに作り変えました。 GoogleのHCTカラーシステムをベースに作ってるのでMaterial You感もあるかもしれません。

・・・って画像添付したらリンクが消し飛んだ

https://github.com/hanubeki/hanubeki-lemmy-themes/tree/main/5/src/_variables.hanubeki-cold.scss 試作したSCSSはこちらになります