core/src/css/palettes/dark.scss - main - githubmirror/ionic

core/src/css/palettes/dark.scss
190 строк6 KB
Gonçalo M.
fix(tab-button): update dark palette focused background color (#31050)
03 апр 2026, 21:24
03 апр 2026, 21:24dec46b5
@use "sass:map";
@import "../../themes/ionic.functions.color";

$primary: #4d8dff;
$secondary: #46b1ff;
$tertiary: #8482fb;
$success: #2dd55b;
$warning: #ffce31;
$danger: #f24c58;
$light: #222428;
$medium: #989aa2;
$dark: #f4f5f8;

$colors:  (
  primary: (
    base:             $primary,
    contrast:         #000,
    shade:            get-color-shade($primary),
    tint:             get-color-tint($primary)
  ),
  secondary: (
    base:             $secondary,
    contrast:         #000,
    shade:            get-color-shade($secondary),
    tint:             get-color-tint($secondary)
  ),
  tertiary: (
    base:             $tertiary,
    contrast:         #000,
    shade:            get-color-shade($tertiary),
    tint:             get-color-tint($tertiary)
  ),
  success: (
    base:             $success,
    contrast:         #000,
    shade:            get-color-shade($success),
    tint:             get-color-tint($success)
  ),
  warning: (
    base:             $warning,
    contrast:         #000,
    shade:            get-color-shade($warning),
    tint:             get-color-tint($warning)
  ),
  danger: (
    base:             $danger,
    contrast:         #000,
    shade:            get-color-shade($danger),
    tint:             get-color-tint($danger)
  ),
  light: (
    base:             $light,
    contrast:         #fff,
    shade:            get-color-shade($light),
    tint:             get-color-tint($light)
  ),
  medium: (
    base:             $medium,
    contrast:         #000,
    shade:            get-color-shade($medium),
    tint:             get-color-tint($medium)
  ),
  dark: (
    base:             $dark,
    contrast:         #000,
    shade:            get-color-shade($dark),
    tint:             get-color-tint($dark)
  )
);

@mixin dark-base-palette() {
  & {
    @each $color-name, $value in $colors {
      --ion-color-#{$color-name}: #{map.get($value, base)};
      --ion-color-#{$color-name}-rgb: #{color-to-rgb-list(map.get($value, base))};
      --ion-color-#{$color-name}-contrast: #{map.get($value, contrast)};
      --ion-color-#{$color-name}-contrast-rgb: #{color-to-rgb-list(map.get($value, contrast))};
      --ion-color-#{$color-name}-shade: #{map.get($value, shade)};
      --ion-color-#{$color-name}-tint: #{map.get($value, tint)};
    }
  }
}

@mixin dark-ios-palette() {
  & {
    --ion-background-color: #000000;
    --ion-background-color-rgb: 0, 0, 0;
    --ion-text-color: #ffffff;
    --ion-text-color-rgb: 255, 255, 255;
    --ion-background-color-step-50: #0d0d0d;
    --ion-background-color-step-100: #1a1a1a;
    --ion-background-color-step-150: #262626;
    --ion-background-color-step-200: #333333;
    --ion-background-color-step-250: #404040;
    --ion-background-color-step-300: #4d4d4d;
    --ion-background-color-step-350: #595959;
    --ion-background-color-step-400: #666666;
    --ion-background-color-step-450: #737373;
    --ion-background-color-step-500: #808080;
    --ion-background-color-step-550: #8c8c8c;
    --ion-background-color-step-600: #999999;
    --ion-background-color-step-650: #a6a6a6;
    --ion-background-color-step-700: #b3b3b3;
    --ion-background-color-step-750: #bfbfbf;
    --ion-background-color-step-800: #cccccc;
    --ion-background-color-step-850: #d9d9d9;
    --ion-background-color-step-900: #e6e6e6;
    --ion-background-color-step-950: #f2f2f2;
    --ion-text-color-step-50: #f2f2f2;
    --ion-text-color-step-100: #e6e6e6;
    --ion-text-color-step-150: #d9d9d9;
    --ion-text-color-step-200: #cccccc;
    --ion-text-color-step-250: #bfbfbf;
    --ion-text-color-step-300: #b3b3b3;
    --ion-text-color-step-350: #a6a6a6;
    --ion-text-color-step-400: #999999;
    --ion-text-color-step-450: #8c8c8c;
    --ion-text-color-step-500: #808080;
    --ion-text-color-step-550: #737373;
    --ion-text-color-step-600: #666666;
    --ion-text-color-step-650: #595959;
    --ion-text-color-step-700: #4d4d4d;
    --ion-text-color-step-750: #404040;
    --ion-text-color-step-800: #333333;
    --ion-text-color-step-850: #262626;
    --ion-text-color-step-900: #1a1a1a;
    --ion-text-color-step-950: #0d0d0d;
    --ion-item-background: #000000;
    --ion-tab-bar-background-focused: #252525;
    --ion-card-background: #1c1c1d;
  }

  & ion-modal {
    --ion-background-color: var(--ion-color-step-100, var(--ion-background-color-step-100));
    --ion-toolbar-background: var(--ion-color-step-150, var(--ion-background-color-step-150));
    --ion-toolbar-border-color: var(--ion-color-step-250, var(--ion-background-color-step-250));
  }
}

@mixin dark-md-palette() {
  & {
    --ion-background-color: #121212;
    --ion-background-color-rgb: 18, 18, 18;
    --ion-text-color: #ffffff;
    --ion-text-color-rgb: 255, 255, 255;
    --ion-background-color-step-50: #1e1e1e;
    --ion-background-color-step-100: #2a2a2a;
    --ion-background-color-step-150: #363636;
    --ion-background-color-step-200: #414141;
    --ion-background-color-step-250: #4d4d4d;
    --ion-background-color-step-300: #595959;
    --ion-background-color-step-350: #656565;
    --ion-background-color-step-400: #717171;
    --ion-background-color-step-450: #7d7d7d;
    --ion-background-color-step-500: #898989;
    --ion-background-color-step-550: #949494;
    --ion-background-color-step-600: #a0a0a0;
    --ion-background-color-step-650: #acacac;
    --ion-background-color-step-700: #b8b8b8;
    --ion-background-color-step-750: #c4c4c4;
    --ion-background-color-step-800: #d0d0d0;
    --ion-background-color-step-850: #dbdbdb;
    --ion-background-color-step-900: #e7e7e7;
    --ion-background-color-step-950: #f3f3f3;
    --ion-text-color-step-50: #f3f3f3;
    --ion-text-color-step-100: #e7e7e7;
    --ion-text-color-step-150: #dbdbdb;
    --ion-text-color-step-200: #d0d0d0;
    --ion-text-color-step-250: #c4c4c4;
    --ion-text-color-step-300: #b8b8b8;
    --ion-text-color-step-350: #acacac;
    --ion-text-color-step-400: #a0a0a0;
    --ion-text-color-step-450: #949494;
    --ion-text-color-step-500: #898989;
    --ion-text-color-step-550: #7d7d7d;
    --ion-text-color-step-600: #717171;
    --ion-text-color-step-650: #656565;
    --ion-text-color-step-700: #595959;
    --ion-text-color-step-750: #4d4d4d;
    --ion-text-color-step-800: #414141;
    --ion-text-color-step-850: #363636;
    --ion-text-color-step-900: #2a2a2a;
    --ion-text-color-step-950: #1e1e1e;
    --ion-item-background: #1e1e1e;
    --ion-toolbar-background: #1f1f1f;
    --ion-tab-bar-background: #1f1f1f;
    --ion-tab-bar-background-focused: #353535;
    --ion-card-background: #1e1e1e;
  }
}