src/ionic.css
:root {
  --black: #040404;
  --dark80: rgba(var(--ion-color-dark-rgb), 0.8);
  --dark70: rgba(var(--ion-color-dark-rgb), 0.7);
  --dark50: rgba(var(--ion-color-dark-rgb), 0.5);
  --dark30: rgba(var(--ion-color-dark-rgb), 0.3);
  --dark20: rgba(var(--ion-color-dark-rgb), 0.2);
  --dark10: rgba(var(--ion-color-dark-rgb), 0.1);
  --dark05: rgba(var(--ion-color-dark-rgb), 0.05);
  --green: #60b18a;
  --greenbg: #054a19;
  --grey: #747474;
  --liz: #d5c6ff;
  --logo-color: #391998;
  --magenta: #8563e4;
  --orange: #c3730a;
  --orangebg: #572d00;
  --purple: #391998;
  --purple20: #39199833;
  --purplebg: #391998;
  --purpletext: #7043f4;
  --red: #a51515;
  --redbg: #68222b;
  --white: #fbfbfb;
  --yellow: #e2c542;
  --yellowoutlier: #debb20;
  --ion-background-color: #fff;
  --ion-tabbar-background-color: #fafafa;
  --ion-backdrop-color: #fff;
  --toggle-background: #fbfbfb;
  --danger: #a51515;
  --warning: #c3730a;
  --success: #60b18a;
  --ion-font-family:
    'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans',
    'Droid Sans', 'Helvetica Neue', sans-serif;
  --animation-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.ion-palette-dark {
  --black: #fbfbfb;
  --greenbg: #092d13;
  --orange: #e69b39;
  --orangebg: #2e1800;
  --purplebg: #39199833;
  --red: #e04d4d;
  --redbg: #380008;
  --yellow: #ffdd46;
  --yellowoutlier: #ffdd46;
  --ion-background-color: #101010;
  --ion-tabbar-background-color: #181818;
  --ion-backdrop-color: #000;
  --logo-color: #fbfbfb;
  --toggle-background: #ddd;
  --danger: #e04d4d;
}

.my-ion-action-sheet div.action-sheet-group {
  background-color: var(--ion-background-color);
  border-top: var(--dark50) 1px solid;
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
  & .action-sheet-title {
    font-size: 1rem;
    font-weight: 700;
    text-align: center;
    & .action-sheet-sub-title {
      font-size: 0.8rem;
      font-weight: 400;
    }
  }
  & button {
    border-radius: 0.5rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
}

ion-button {
  --border-radius: 0.5rem;
  font-family: 'Geist Mono';
  font-size: 0.875rem;
  font-weight: 400;
  letter-spacing: 0%;
  min-height: 40px;
  text-transform: uppercase;
  width: 100%;
  &.clear {
    --background: none;
    --border-color: none;
    --color: var(--black);
  }
  &.dark {
    --background: var(--purple);
    --border-color: var(--purple);
    --color: white;
  }
  &.red {
    --background: var(--red);
    --border-color: var(--red);
    --color: white;
  }
  &.secondary {
    --background: var(--dark20);
    --border-color: var(--black);
    --color: var(--black);
  }
  &[size='small'] {
    min-height: 16px;
    --padding-top: 0.5rem;
    --padding-bottom: 0.5rem;
  }
}

ion-app ion-header {
  align-items: center;
  border-bottom: 1px solid #444;
  color: var(--ion-color-dark);
  display: flex;
  height: 4rem;
  & ion-grid {
    margin: auto;
  }
}

.ion-page {
  max-width: 640px;
  margin: auto;
}

ion-tab-bar {
  border-top: 1px solid var(--dark20);
  width: 100%;
  & ion-tab-button {
    --color-selected: var(--ion-color-dark);
    background-color: var(--ion-tabbar-background-color);
    max-width: none;
    &:hover,
    &:hover svg,
    &.tab-selected,
    &.tab-selected svg {
      color: var(--ion-color-dark);
    }
  }
  & svg {
    color: var(--dark50);
  }
}

ion-checkbox {
  --border-color: var(--dark10);
  --border-color-checked: var(--ion-color-danger);
  --border-radius: 6px;
  --checkbox-background: var(--dark10);
  --checkbox-background-checked: var(--ion-color-danger);
  --checkmark-color: #fbfbfb;
  --checkmark-width: 2px;
  --size: 24px;
}

ion-checkbox::part(label) {
  font-size: 13px;
}

/* Hide scrollbar for Chrome, Safari and Opera */
ion-content::part(scroll)::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
ion-content::part(scroll) {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}

ion-action-sheet.my-ion-action-sheet {
  --backdrop-opacity: 0.6;
  --color: var(--ion-color-dark-rgb);
  --max-width: 100%;
  --width: 100%;
}

ion-modal::part(content) {
  --background: var(--ion-background-color);
  --border-radius: 1rem;
  --height: auto;
  --max-width: 100%;
  --width: 100%;
  position: absolute;
  bottom: -1rem;
}

ion-select {
  --background: var(--dark20);
  --border-radius: 0.5rem;
  width: 100%;
  &::part(container) {
    padding: 0 1rem;
  }
}

input.native-input:focus::placeholder {
  color: transparent; /* Hide placeholder on focus */
}

ion-toast {
  --background: var(--greenbg);
  --border-radius: 0.5rem;
  --color: var(--white);
  --padding: 1rem;
  --max-width: 260px;
  text-align: center;
}

ion-toast::part(button) {
  border-left: 1px solid var(--white);
  color: var(--white);
  font-size: 0.7rem;
  text-transform: uppercase;
}

.toast-container {
  text-align: center;
}

ion-toggle {
  margin: 12px;
  border: 1px solid var(--black);

  --track-background: var(--toggle-background);
  --track-background-checked: var(--toggle-background);

  --handle-background: var(--grey);
  --handle-background-checked: var(--purple);

  --handle-width: 15px;
  --handle-height: 15px;
  --handle-max-height: auto;
  --handle-spacing: 0;

  --handle-border-radius: 0;
  --handle-box-shadow: none;
}

ion-toggle::part(track) {
  height: 15px;
  width: 30px;
  border-radius: 0;

  /* Required for iOS handle to overflow the height of the track */
  overflow: visible;
}

ion-input[readonly] {
  --color: var(--dark50);
  --highlight-color-focused: none;
}
