Theme Customization

All colors in Casual UI are defined with

Theme colors

--casual-primary

--casual-secondary

--casual-warning

--casual-negative

<script>
  const colors = ['--casual-primary', '--casual-secondary', '--casual-warning', '--casual-negative']
</script>
<div class="sm:grid-cols-4 gap-4 grid grid-cols-2">
  {#each colors as color}
    <div style="background-color:var({color});" class="h-[200px] flex items-center justify-center text-white rounded-lg">
      {color}
    </div>
  {/each}
</div>

<script>
  const colors = ['--casual-primary', '--casual-secondary', '--casual-warning', '--casual-negative']
</script>
<div class="sm:grid-cols-4 gap-4 grid grid-cols-2">
  {#each colors as color}
    <div style="background-color:var({color});" class="h-[200px] flex items-center justify-center text-white rounded-lg">
      {color}
    </div>
  {/each}
</div>

svelte

Css variables

@use "sass:color";

// background
$normal-bg: #dcdfe6;
$light-bg: #f2f6fc;
$pure-white: #fff;

// primary
$primary: #8952fd;
$primary-lighter: color.adjust(#8952fd, $lightness: 2%, $alpha: -0.1);
$primary-lighter2: color.adjust(#8952fd, $lightness: 5%);
$primary-pale: lighten(#8952fd, 32%);
$primary-pale-darker: color.adjust(#8952fd, $lightness: 5%, $alpha: -0.9);
$primary-darker: color.adjust(#8952fd, $lightness: -5%, $alpha: 0.1);

// secondary
$secondary: #66bb6a;
$secondary-pale: lighten($secondary, 40%);
$secondary-lighter: color.adjust($secondary, $lightness: 3%, $alpha: -0.1);
$secondary-lighter2: color.adjust($secondary, $lightness: 10%);
$secondary-darker: color.adjust($secondary, $lightness: -3%, $alpha: 0.1);

// negative
$negative: #ff6472;
$negative-pale: lighten(#ff6472, 29%);
$negative-lighter: color.adjust(#ff6472, $lightness: 5%, $alpha: -0.1);
$negative-darker: color.adjust(#ff6472, $lightness: -5%, $alpha: 0.1);

// warning
$warning: #ff9100;
$warning-pale: lighten($warning, 48%);
$warning-lighter: color.adjust(#ff9100, $lightness: 5%, $alpha: -0.1);
$warning-darker: color.adjust(#ff9100, $lightness: -5%, $alpha: 0.1);

// disabled
$disabled: #9dacb6;

// text
$copywriting-normal: #303133;
$copywriting-light: color.adjust(#303133, $lightness: 40%);

// input
$input-bg: #f8f8fb;
$input-bg-lighter: lighten(#f8f8fb, 2%);
$input-bg-darker: darken(#f8f8fb, 2%);
$input-bg-darker2: darken(#f8f8fb, 5%);
$input-placeholder: #c1cbd1;
$input-prefix-suffix-divider: #eaeaea;
$input-clear-icon-hover: #909399;

// select
$select-dropdown-z-index: 9;

// table
$table-striped-bg: color.adjust(#fff, $lightness: -3%);
$table-sticky-shadow-left: 3px 3px 3px 0 rgb(0 0 0 / 10%);
$table-sticky-shadow-right: -3px 3px 3px 0 rgb(0 0 0 / 10%);

// popup
$popup-bg: rgba(#000, 0.6);
$popup-content-bg: #fff;

// toggle
$toggle-dot-bg: #fff;

// tooltip
$tooltip-bg: #090909;
$tooltip-color: rgb(231 227 227);

:root {
  // background
  --casual-normal-bg: #{$normal-bg};
  --casual-light-bg: #{$light-bg};
  --casual-pure-white: #{$pure-white};

  // primary
  --casual-primary: #{$primary};
  --casual-primary-darker: #{$primary-darker};
  --casual-primary-lighter: #{$primary-lighter};
  --casual-primary-lighter2: #{$primary-lighter2};
  --casual-primary-pale: #{$primary-pale};
  --casual-primary-pale-darker: #{$primary-pale-darker};

  // secondary
  --casual-secondary: #{$secondary};
  --casual-secondary-pale: #{$secondary-pale};
  --casual-secondary-darker: #{$secondary-darker};
  --casual-secondary-lighter: #{$secondary-lighter};
  --casual-secondary-lighter2: #{$secondary-lighter2};

  // text
  --casual-copywriting-normal: #{$copywriting-normal};
  --casual-copywriting-light: #{$copywriting-light};

  // negative
  --casual-negative: #{$negative};
  --casual-negative-pale: #{$negative-pale};
  --casual-negative-lighter: #{$negative-lighter};
  --casual-negative-darker: #{$negative-darker};

  // warning
  --casual-warning: #{$warning};
  --casual-warning-pale: #{$warning-pale};
  --casual-warning-lighter: #{$warning-lighter};
  --casual-warning-darker: #{$warning-darker};

  // disabled
  --casual-disabled: #{$disabled};

  // input
  --casual-input-bg: #{$input-bg};
  --casual-input-bg-lighter: #{$input-bg-lighter};
  --casual-input-bg-darker: #{$input-bg-darker};
  --casual-input-bg-darker2: #{$input-bg-darker2};
  --casual-input-placeholder: #{$input-placeholder};
  --casual-input-prefix-suffix-divider: #{$input-prefix-suffix-divider};
  --casual-input-clear-icon-hover: #{$input-clear-icon-hover};

  // select
  --casual-select-bg: #{$pure-white};
  --casual-select-dropdown-z-index: #{$select-dropdown-z-index};

  // radio
  --casual-radio-unselect: #{$copywriting-light};

  // toggle
  --casual-toggle-dot-bg: #{$toggle-dot-bg};

  // table
  --casual-table-bg: #{$pure-white};
  --casual-table-divider-color: #{$normal-bg};
  --casual-table-striped-bg: #{$table-striped-bg};
  --casual-table-sticky-shadow-left: #{$table-sticky-shadow-left};
  --casual-table-sticky-shadow-right: #{$table-sticky-shadow-right};

  // popup
  --casual-popup-bg: #{$popup-bg};
  --casual-popup-content-bg: #{$popup-content-bg};

  // tooltip
  --casual-tooltip-bg: #{$tooltip-bg};
  --casual-tooltip-color: #{$tooltip-color};
}

@use "sass:color";

// background
$normal-bg: #dcdfe6;
$light-bg: #f2f6fc;
$pure-white: #fff;

// primary
$primary: #8952fd;
$primary-lighter: color.adjust(#8952fd, $lightness: 2%, $alpha: -0.1);
$primary-lighter2: color.adjust(#8952fd, $lightness: 5%);
$primary-pale: lighten(#8952fd, 32%);
$primary-pale-darker: color.adjust(#8952fd, $lightness: 5%, $alpha: -0.9);
$primary-darker: color.adjust(#8952fd, $lightness: -5%, $alpha: 0.1);

// secondary
$secondary: #66bb6a;
$secondary-pale: lighten($secondary, 40%);
$secondary-lighter: color.adjust($secondary, $lightness: 3%, $alpha: -0.1);
$secondary-lighter2: color.adjust($secondary, $lightness: 10%);
$secondary-darker: color.adjust($secondary, $lightness: -3%, $alpha: 0.1);

// negative
$negative: #ff6472;
$negative-pale: lighten(#ff6472, 29%);
$negative-lighter: color.adjust(#ff6472, $lightness: 5%, $alpha: -0.1);
$negative-darker: color.adjust(#ff6472, $lightness: -5%, $alpha: 0.1);

// warning
$warning: #ff9100;
$warning-pale: lighten($warning, 48%);
$warning-lighter: color.adjust(#ff9100, $lightness: 5%, $alpha: -0.1);
$warning-darker: color.adjust(#ff9100, $lightness: -5%, $alpha: 0.1);

// disabled
$disabled: #9dacb6;

// text
$copywriting-normal: #303133;
$copywriting-light: color.adjust(#303133, $lightness: 40%);

// input
$input-bg: #f8f8fb;
$input-bg-lighter: lighten(#f8f8fb, 2%);
$input-bg-darker: darken(#f8f8fb, 2%);
$input-bg-darker2: darken(#f8f8fb, 5%);
$input-placeholder: #c1cbd1;
$input-prefix-suffix-divider: #eaeaea;
$input-clear-icon-hover: #909399;

// select
$select-dropdown-z-index: 9;

// table
$table-striped-bg: color.adjust(#fff, $lightness: -3%);
$table-sticky-shadow-left: 3px 3px 3px 0 rgb(0 0 0 / 10%);
$table-sticky-shadow-right: -3px 3px 3px 0 rgb(0 0 0 / 10%);

// popup
$popup-bg: rgba(#000, 0.6);
$popup-content-bg: #fff;

// toggle
$toggle-dot-bg: #fff;

// tooltip
$tooltip-bg: #090909;
$tooltip-color: rgb(231 227 227);

:root {
  // background
  --casual-normal-bg: #{$normal-bg};
  --casual-light-bg: #{$light-bg};
  --casual-pure-white: #{$pure-white};

  // primary
  --casual-primary: #{$primary};
  --casual-primary-darker: #{$primary-darker};
  --casual-primary-lighter: #{$primary-lighter};
  --casual-primary-lighter2: #{$primary-lighter2};
  --casual-primary-pale: #{$primary-pale};
  --casual-primary-pale-darker: #{$primary-pale-darker};

  // secondary
  --casual-secondary: #{$secondary};
  --casual-secondary-pale: #{$secondary-pale};
  --casual-secondary-darker: #{$secondary-darker};
  --casual-secondary-lighter: #{$secondary-lighter};
  --casual-secondary-lighter2: #{$secondary-lighter2};

  // text
  --casual-copywriting-normal: #{$copywriting-normal};
  --casual-copywriting-light: #{$copywriting-light};

  // negative
  --casual-negative: #{$negative};
  --casual-negative-pale: #{$negative-pale};
  --casual-negative-lighter: #{$negative-lighter};
  --casual-negative-darker: #{$negative-darker};

  // warning
  --casual-warning: #{$warning};
  --casual-warning-pale: #{$warning-pale};
  --casual-warning-lighter: #{$warning-lighter};
  --casual-warning-darker: #{$warning-darker};

  // disabled
  --casual-disabled: #{$disabled};

  // input
  --casual-input-bg: #{$input-bg};
  --casual-input-bg-lighter: #{$input-bg-lighter};
  --casual-input-bg-darker: #{$input-bg-darker};
  --casual-input-bg-darker2: #{$input-bg-darker2};
  --casual-input-placeholder: #{$input-placeholder};
  --casual-input-prefix-suffix-divider: #{$input-prefix-suffix-divider};
  --casual-input-clear-icon-hover: #{$input-clear-icon-hover};

  // select
  --casual-select-bg: #{$pure-white};
  --casual-select-dropdown-z-index: #{$select-dropdown-z-index};

  // radio
  --casual-radio-unselect: #{$copywriting-light};

  // toggle
  --casual-toggle-dot-bg: #{$toggle-dot-bg};

  // table
  --casual-table-bg: #{$pure-white};
  --casual-table-divider-color: #{$normal-bg};
  --casual-table-striped-bg: #{$table-striped-bg};
  --casual-table-sticky-shadow-left: #{$table-sticky-shadow-left};
  --casual-table-sticky-shadow-right: #{$table-sticky-shadow-right};

  // popup
  --casual-popup-bg: #{$popup-bg};
  --casual-popup-content-bg: #{$popup-content-bg};

  // tooltip
  --casual-tooltip-bg: #{$tooltip-bg};
  --casual-tooltip-color: #{$tooltip-color};
}

scss

Suggest changes to this page

Last update at: 2023/08/13 13:04:55

On this page

Theme colors Css variables