src/themes/ikegami.scss
@use '../scss/variables' as var;

body[data-theme='ikegami'] {
  // global
  --color-fg: #ffffff;
  --color-bg: rgba(17, 17, 17, 0.5);
  --shadow: 0 0 0.05rem #000000;
  --icon-color: var(--color-fg);
  --icon-shadow: 0 0 0.04rem rgba(0, 0, 0, 0.6);

  // combatant
  --color-combatant-fg: var(--color-fg);
  --shadow-combatant: var(--shadow);

  // encounter
  --color-encounter-fg: var(--color-fg);
  --color-encounter-bg: var(--color-bg);
  --color-cover-fg: #82c4f8;
  --color-cover-fg-active: #82c4f8;
  --color-cover-bg: var(--color-bg);
  --color-cover-bg-active: var(--color-bg);
  --shadow-encounter: var(--shadow);
  --shadow-encounter-active: var(--shadow);

  // settings
  --color-settings-fg: var(--color-fg);
  --color-settings-bg: #404040;
  --color-settings-tab-fg: var(--color-fg);
  --color-settings-tab-bg: var(--color-bg);
  --color-settings-tab-fg-active: unset;
  --color-settings-tab-bg-active: unset;
  --shadow-settings: none;
  --shadow-settings-tab: none;
  --shadow-settings-tab-active: none;

  // components
  --color-form-fg: var(--color-fg);
  --color-form-fg-active: #404040;
  --color-form-fg-disabled: rgba(255, 255, 255, 0.7);
  --color-form-fg-selection: #404040;
  --color-form-bg: #404040;
  --color-form-bg-active: var(--color-fg);
  --color-form-bg-disabled: var(--color-form-bg);
  --color-form-bg-selection: var(--color-fg);
  --shadow-form: none;
  --shadow-form-active: none;
  --shadow-form-selection: none;

  // extends
  .settings-tabitem {
    flex: 0 0 auto;

    &--active {
      position: relative;

      &::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 0.02rem;
        background-color: #ffffff;
      }
    }
  }

  .settings-btn {
    border: 0.01rem solid #ffffff;
  }

  .s-input {
    border: 0.01rem solid #ffffff;
  }

  .s-input-inner {
    height: 0.2rem;
    line-height: 0.2rem;
  }

  .s-input-number,
  .s-switch {
    gap: var.$padding-md;

    & > div {
      border: 0.01rem solid #ffffff;
    }

    .btn:hover {
      color: #404040;
      background-color: #ffffff;
    }
  }

  .s-select {
    &-value {
      border: 0.01rem solid #ffffff;
    }

    &-options {
      border: 0.01rem solid #ffffff;
    }
  }

  .s-input-color {
    border: 0.01rem solid #ffffff;
  }

  .settings-sort-rule {
    width: 0.68rem;
  }
}
