Theming

Colores por línea

A continuación se muestran los colores utlizados por cada línea comercial y modo de color.

Modo claro

// Primary colors
$primary: #003a70 !default;
$secondary: #005eb8 !default;
$success: #00c0f3 !default;

// Text colors
$primary-contrast-color-text: #ffffff !default;
$secondary-contrast-color-text: #ffffff !default;
$success-contrast-color-text: #ffffff !default;
$info-contrast-color-text: #ffffff !default;
$warning-contrast-color-text: #000000 !default;
$danger-contrast-color-text: #000000 !default;

// Link colors (Active Hover Visited)
$default-link-color: $secondary $secondary #005EB8 !default;
$primary-link-color: $secondary $secondary #005EB8 !default;
$secondary-link-color: $secondary $secondary #003A70 !default;
$success-link-color: #0055dd #0055dd #00b0f3 !default;

$isotype-url: url("/assets/contpaqi/svg/isotype-day.svg") !default;
$form-select-indicator: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='%23005eb8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/></svg>") !default;

// Primary colors
$primary: #1a66e0 !default;
$secondary: #00b0f3 !default;
$success: #0055dd !default;

// Text colors
$primary-contrast-color-text: #ffffff !default;
$secondary-contrast-color-text: #000000 !default;
$success-contrast-color-text: #000000 !default;
$info-contrast-color-text: #ffffff !default;
$warning-contrast-color-text: #000000 !default;
$danger-contrast-color-text: #000000 !default;

// Link colors (Active Hover Visited)
$default-link-color: $secondary $secondary #0055DD !default;
$primary-link-color: #00ffff #00ffff #00b0f3 !default;
$secondary-link-color: #00ffff #00ffff #4672b2 !default;
$success-link-color: #0055dd #0055dd #00b0f3 !default;

$isotype-url: url("/assets/contpaqi/svg/isotypes/cotable.svg") !default;
$form-select-indicator: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='%2300b0f3' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/></svg>");

// Primary colors
$primary: #004559 !default;
$secondary: #00b4b8 !default;
$success: #00eed7 !default;

// Text colors
$primary-contrast-color-text: #ffffff !default;
$secondary-contrast-color-text: #ffffff !default;
$success-contrast-color-text: #ffffff !default;
$info-contrast-color-text: #ffffff !default;
$warning-contrast-color-text: #000000 !default;
$danger-contrast-color-text: #000000 !default;

// Link colors (Active Hover Visited)
$default-link-color: $secondary $secondary #004259 !default;
$primary-link-color: #00eed7 #00eed7 #049987 !default;
$secondary-link-color: #00eed7 #00eed7 #049987 !default;
$success-link-color: #004259 #004259 #00b4b8 !default;

$isotype-url: url("/assets/contpaqi/svg/isotypes/comercial.svg") !default;
$form-select-indicator: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='%2300b4b8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/></svg>") !default;

// Primary colors
$primary: #311e7e !default;
$secondary: #a42ae0 !default;
$success: #d154f0 !default;

// Contrast colors
$primary-contrast-color-text: #ffffff !default;
$secondary-contrast-color-text: #ffffff !default;
$success-contrast-color-text: #ffffff !default;
$info-contrast-color-text: #ffffff !default;
$warning-contrast-color-text: #000000 !default;
$danger-contrast-color-text: #000000 !default;

// Link colors (Active Hover Visited)
$default-link-color: $secondary $secondary #02728c !default;
$primary-link-color: #d154f0 #d154f0 #668aa8 !default;
$secondary-link-color: #311e7e #311e7e #7318a8 !default;
$success-link-color: #311e7e #311e7e #ac3ec6 !default;

$isotype-url: url("/assets/contpaqi/svg/isotypes/otras.svg") !default;
$form-select-indicator: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='%23a42ae0' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/></svg>");

$white: #ffffff !default;
$black: #000000 !default;
$info: #0026a4 !default;
$warning: #ffb700 !default;
$danger: #FF6700 !default;
$red: #FF3366 !default;
$yellow: #F3CA3E !default;
$blue: #3399FF !default;
$green: #2AC940 !default;
$pale-yellow: #ffeeba !default;

$body-bg: $white !default;
$body-color: $black !default;

$border-color: #f2f2f2 !default;
$top-navbar-bg-default: $primary !default;
$dropdown-bg-default: $white !default;
$card-bg-default: $white !default;
$sidebar-bg-default: $white !default;
$nav-tabs-bg-default: $white !default;
$surface-container-bg-default: $white !default;

Modo medio

// Primary colors
$primary: #1a4f80;
$secondary: #4d8fcc;
$success: #80e0fa;

// Text colors
$primary-contrast-color-text: #ffffff;
$secondary-contrast-color-text: #000000;
$success-contrast-color-text: #000000;
$info-contrast-color-text: #ffffff;
$warning-contrast-color-text: #000000;
$danger-contrast-color-text: #000000;

// Link colors (Active Hover Visited)
$default-link-color: #1A4F80 #1A4F80 #4D8FCC;
$primary-link-color: #80E0FA #80E0FA #4D8FCC;
$secondary-link-color: #80E0FA #80E0FA #1A4F80;
$success-link-color: #1A4F80 #1A4F80 #4D8FCC;

$isotype-url: url("/assets/contpaqi/svg/isotypes/contpaqi-mid.svg");
$form-select-indicator: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='%234d8fcc' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/></svg>");

// Primary colors
$primary: #1a66e0;
$secondary: #4dc7f7;
$success: #80ffff;

// Text colors
$primary-contrast-color-text: #ffffff;
$secondary-contrast-color-text: #000000;
$success-contrast-color-text: #000000;
$info-contrast-color-text: #ffffff;
$warning-contrast-color-text: #000000;
$danger-contrast-color-text: #000000;

// Link colors (Active Hover Visited)
$default-link-color: #1A66E0 #1A66E0 #4DC7F7;
$primary-link-color: #80ffff #80ffff #1351aa;
$secondary-link-color: #1a66e0 #1a66e0 #39a5c6;
$success-link-color: #1a66e0 #1a66e0 #53bcb9;

$isotype-url: url("/assets/contpaqi/svg/isotypes/cotable-mid.svg");
$form-select-indicator: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='%234dc7f7' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/></svg>");

// Primary colors
$primary: #1a546b;
$secondary: #4dcccc;
$success: #80f7eb;

// Text colors
$primary-contrast-color-text: #ffffff;
$secondary-contrast-color-text: #000000;
$success-contrast-color-text: #000000;
$info-contrast-color-text: #ffffff;
$warning-contrast-color-text: #000000;
$danger-contrast-color-text: #000000;

// Link colors (Active Hover Visited)
$default-link-color: #1A546B #1A546B #4DCCCC;
$primary-link-color: #80f7eb #80f7eb #0f3e4c;
$secondary-link-color: #80f7eb #80f7eb #389e9b;
$success-link-color: #1a546b #1a546b #66c6ba;

$isotype-url: url("/assets/contpaqi/svg/isotypes/comercial-mid.svg");
$form-select-indicator: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='%234dcccc' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/></svg>");

// Primary colors
$primary: #45368c;
$secondary: #bf6be8;
$success: #d878ef;

// Text colors
$primary-contrast-color-text: #ffffff;
$secondary-contrast-color-text: #000000;
$success-contrast-color-text: #000000;
$info-contrast-color-text: #ffffff;
$warning-contrast-color-text: #000000;
$danger-contrast-color-text: #000000;

// Link colors (Active Hover Visited)
$default-link-color: #45368C #45368C #45368C;
$primary-link-color: #d878ef #d878ef #2d2566;
$secondary-link-color: #45368c #45368c #9e58c6;
$success-link-color: #45368c #45368c #bc62d1;

$isotype-url: url("/assets/contpaqi/svg/isotypes/otras-mid.svg");
$form-select-indicator: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='%23bf6be8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/></svg>");

$body-bg: #d8d8d8;
$body-color: #1e1e1e;

// Fixed colors
$white: $body-bg;
$black: $body-color;
$info: #2142a3;
$warning: #ffc433;
$danger: #cc5200;
$red: #cc2952;
$yellow: #C2A333;
$blue: #297acc;
$green: #21a133;
$pale-yellow: #FFF2C7;

$border-color: #f2f2f2;
$top-navbar-bg-default: $primary;
$dropdown-bg-default: $white;
$card-bg-default: $white;
$sidebar-bg-default: $white;
$nav-tabs-bg-default: $white;
$surface-container-bg-default: $white;

Modo oscuro

// Primary colors
$primary: #668aa8;
$secondary: #99bfe3;
$success: #ccf2fc;

// Text colors
$primary-contrast-color-text: #000000;
$secondary-contrast-color-text: #000000;
$success-contrast-color-text: #000000;
$info-contrast-color-text: #ffffff;
$warning-contrast-color-text: #000000;
$danger-contrast-color-text: #000000;

// Link colors (Active Hover Visited)
$default-link-color: #ccf2fc #ccf2fc #668aa8;
$primary-link-color: #ccffff #ccffff #99BFE3;
$secondary-link-color: #ccffff #ccffff #668AA8;
$success-link-color: #668AA8 #668AA8 #99BFE3;

$isotype-url: url("/assets/contpaqi/svg/isotypes/contpaqi-dark.svg");
$form-select-indicator: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='%2399bfe3' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/></svg>");
$top-navbar-bg-default: #00050a;

// Primary colors
$primary: #6699eb;
$secondary: #99defa;
$success: #ccffff;

// Text colors
$primary-contrast-color-text: #000000;
$secondary-contrast-color-text: #000000;
$success-contrast-color-text: #000000;
$info-contrast-color-text: #ffffff;
$warning-contrast-color-text: #000000;
$danger-contrast-color-text: #000000;

// Link colors (Active Hover Visited)
$default-link-color: #ccffff #ccffff #6699eb;
$primary-link-color: #ccffff #ccffff #5381c4;
$secondary-link-color: #6699eb #6699eb #7fc6db;
$success-link-color: #6699eb #6699eb #b1e5e3;

$isotype-url: url("/assets/contpaqi/svg/isotypes/cotable-dark.svg");
$form-select-indicator: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='%2399defa' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/></svg>");
$top-navbar-bg-default: #000a17;

// Primary colors
$primary: #668f9c;
$secondary: #99e0e3;
$success: #ccfcf7;

// Text colors
$primary-contrast-color-text: #000000;
$secondary-contrast-color-text: #000000;
$success-contrast-color-text: #000000;
$info-contrast-color-text: #ffffff;
$warning-contrast-color-text: #000000;
$danger-contrast-color-text: #000000;

// Link colors (Active Hover Visited)
$default-link-color: #ccf2fc #ccf2fc #668aa8;
$primary-link-color: #ccfcf7 #ccfcf7 #4b6f87;
$secondary-link-color: #668f9c #668f9c #74c4c4;
$success-link-color: #668f9c #668f9c #aae0da;

$isotype-url: url("/assets/contpaqi/svg/isotypes/comercial-dark.svg");
$form-select-indicator: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='%2399e0e3' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/></svg>");
$top-navbar-bg-default: #00080a;

// Primary colors
$primary: #8278b2;
$secondary: #dbabf2;
$success: #fc80ff;

// Contrast colors
$primary-contrast-color-text: #000000;
$secondary-contrast-color-text: #000000;
$success-contrast-color-text: #000000;
$info-contrast-color-text: #ffffff;
$warning-contrast-color-text: #000000;
$danger-contrast-color-text: #000000;

// Link colors (Active Hover Visited)
$default-link-color: #ccf2fc #ccf2fc #668aa8;
$primary-link-color: #fc80ff #fc80ff #676193;
$secondary-link-color: #8278b2 #8278b2 #c69edd;
$success-link-color: #8278b2 #8278b2 #dc6de2;

$isotype-url: url("/assets/contpaqi/svg/isotypes/otras-dark.svg");
$form-select-indicator: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='%23dbabf2' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/></svg>");
$top-navbar-bg-default: #120517;

$body-bg: #1e1e1e;
$body-color: #cccccc;

// Fixed colors
$white: $body-bg;
$black: $body-color;
$info: #5266a3;
$warning: #ffd466;
$danger: #ff8533;
$red: #ff5c85;
$yellow: #f5d666;
$blue: #5cadff;
$green: #54d466;
$pale-yellow: #F5D666;

$surface-container-bg: rgba(white, 0.07);
$surface-container-bg: #2e2e2e;
$dropdown-bg-default: #121212;
$card-bg-default: #2e2e2e;
$sidebar-bg-default: #121212;
$nav-tabs-bg-default: #2E2E2E;
$border-color: #121212;