/** * Modus Dark Theme Variables * * These variables are specific to the Dark Theme of Modus */ // Reference: https://github.com/twbs/bootstrap/blob/v4-dev/scss/_variables.scss // XD https://xd.adobe.com/view/6e4719f4-2da4-4db6-9bdb-609bccffcf46-3b14/specs/ // Gray Colors $trimble-grays: () !default; $trimble-grays: map-merge( ( "white": $col_black, "gray-light": $col_gray_10, "gray-0": $col_gray_9, "gray-1": $col_gray_8, "gray-2": $col_gray_7, "gray-3": $col_gray_6, "gray-4": $col_gray_5, "gray-5": $col_gray_4, "gray-6": $col_gray_3, "gray-7": $col_gray_2, "gray-8": $col_gray_1, "gray-9": $col_gray_0, "gray-10": $col_gray_light, "trimble-gray": $col_trimble_gray, "black": $col_white, ), $trimble-grays ); // Root Colors $black: #f1f1f6; $white: #171c1e; $blue: #007bff !default; $indigo: #6610f2 !default; $purple: #6f42c1 !default; $pink: #e83e8c !default; $red: #dc3545 !default; $orange: #fd7e14 !default; $yellow: #ffc107 !default; $green: #28a745 !default; $teal: #20c997 !default; $cyan: #17a2b8 !default; $colors: () !default; $colors: map-merge( ( "blue": $blue, "indigo": $indigo, "purple": $purple, "pink": $pink, "red": $red, "orange": $orange, "yellow": $yellow, "green": $green, "teal": $teal, "cyan": $cyan, "white": $col_white, "gray": $col_gray_7, "gray-dark": $col_gray_10 ), $colors ); // Body // // Settings for the `` element. $body-bg: #252a2e; $body-color: $col_gray_light; // Links $link-color: #019aeb; $link-hover-color: #019aeb; // Theme Colors $primary: #019aeb; $secondary: #6a6e79; $tertiary: #cbcdd6; $success: $col_green !default; $warning: #fbad26; $danger: $col_red !default; $dark: #f1f1f6; $theme-colors: () !default; // stylelint-disable-next-line scss/dollar-variable-default $theme-colors: map-merge( ( "primary": $primary, "secondary": $secondary, "tertiary": $tertiary, "success": $success, "warning": $warning, "danger": $danger, "dark": $dark, ), $theme-colors ); // UI Colors $main-background: #252a2e; $panel-background: #252a2e !default; $active: #0c77be !default; $hover: #464b52 !default; $selected: #e5f0f8 !default; $ui-colors: () !default; $ui-colors: map-merge( ( "main-background": $main-background, "panel-background": $panel-background, "active": $active, "hover": $hover, "selected": $selected, ), $ui-colors ); // Trimble Brand Colors $trimble-brand-colors: () !default; $trimble-brand-colors: map-merge( ( "trimble-blue-dark": $col_trimble_blue_dark, "trimble-blue": $col_trimble_blue, "trimble-yellow": $col_trimble_yellow, "trimble-green": $col_trimble_green, "trimble-red": $col_trimble_red ), $trimble-brand-colors ); // Set a specific jump point for requesting color jumps $theme-color-interval: 8% !default; // The yiq lightness value that determines when the lightness of color changes from "dark" to "light". Acceptable values are between 0 and 255. $yiq-contrasted-threshold: 200 !default; // Customize the light and dark text colors for use in our YIQ color contrast function. $yiq-text-dark: $col_gray_10 !default; $yiq-text-light: $col_white !default; // Components $border-color: $col_gray_9; // Custom Control Colors $control-bg-color: $col_gray_4 !default; $control-surface-color: #f1f1f6; $control-element-color: #f1f1f6; $control-checked-color: ui-color("active") !default; $control-hover-color: ui-color("active") !default; .custom-radio .custom-control-label::before { background-color: #252a2e !important; } .custom-checkbox .custom-control-label:not(:checked)::before, .custom-radio .custom-control-label:not(:checked)::before { background-color: transparent !important; } .custom-checkbox .custom-control-input:checked ~ .custom-control-label::before { background-color: #0c77be !important; } .custom-select:disabled { background-color: #1f2427 !important; } body { color-scheme: dark; } // Text Colors $body-color: theme-color("dark") !default; $input-color: $body-color !default; $link-color: ui-color("active") !default; $headings-color: #f1f1f6; $pre-color: #f1f1f6; // Tables $table-color: #f1f1f6; $table-head-bg: #171c1e; $table-head-color: #f1f1f6; $table-hover-bg: #464b52; $table-border-color: #464b52; $table-dark-color: #f1f1f6; $table-dark-bg: transparent; .table .thead-dark th, .table thead th { background-color: #343a40 !important; color: #f1f1f6 !important; } // Buttons + Forms // Buttons $btn-disabled-opacity: 0.4; .btn-primary:hover, .btn-primary.hover { background-color: #217cbb !important; border-color: #217cbb !important; } .btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).display-active, .show > .btn-primary.dropdown-toggle { background-color: #004f83 !important; border-color: #004f83 !important; } .btn-primary.display-active { color: #fff !important; } .btn-text-primary:not(:disabled):not(.disabled):active, .btn-text-primary:not(:disabled):not(.disabled).display-active, .show > .btn-text-primary.dropdown-toggle { color: #20b2ff !important; } .btn-secondary:hover:not(.active), .btn-secondary.hover:not(:active) { background-color: #7d808d !important; } .btn-secondary:not(:disabled):not(.disabled):active, .btn-secondary:not(:disabled):not(.disabled).display-active, .show > .btn-secondary.dropdown-toggle { background-color: #585c65 !important; border-color: #585c65 !important; } .btn-tertiary:hover:not(.active), .btn-tertiary.hover:not(:active) { background-color: #e0e1e9 !important; color: #252a2e !important; } .btn-tertiary:not(:disabled):not(.disabled):active, .btn-tertiary:not(:disabled):not(.disabled).display-active, .show > .btn-tertiary.dropdown-toggle { background-color: #b7b9c3 !important; border-color: #b7b9c3 !important; } // Buttons - Outlines .btn-outline-primary:not(:disabled):not(.disabled):active, .btn-outline-primary:not(:disabled):not(.disabled).display-active, .show > .btn-outline-primary.dropdown-toggle { background-color: #004f83 !important; border-color: #019aeb !important; color: #019aeb !important; } .btn-outline-secondary:not(:disabled):not(.disabled) { color: #cbcdd6 !important; border-color: #cbcdd6 !important; } .btn-outline-secondary:hover:not(.active), .btn-outline-secondary.hover:not(:active) { color: #cbcdd6 !important; } .btn-outline-secondary:not(:disabled):not(.disabled):active, .btn-outline-secondary:not(:disabled):not(.disabled).display-active, .show > .btn-outline-secondary.dropdown-toggle { color: #cbcdd6 !important; background-color: #4f5459 !important; } // Forms $input-bg: #171c1e; $input-placeholder-color: #7d808d; $input-group-addon-border-color: #464b52; $custom-control-label-color: #b7b9c3 !important; $custom-control-label-disabled-color: #7d808d; $custom-select-border-color: #464b52; $label-color: #b7b9c3; .form-control:disabled, .form-control[readonly] { background-color: rgba(#171c1e, 0.4) !important; border-color: rgba(#464b52, 0.4); border-bottom: 1px solid #6a6e79; } .valid-feedback { background-color: $success; } .invalid-feedback { background-color: $danger; } .form-check-label { color: #f1f1f6 !important; } .valid-feedback, .invalid-feedback { color: #f1f1f6 !important; margin-top: 0 !important; margin-left: 1px !important; padding-left: 4px !important; padding-right: 4px !important; max-width: 99% !important; width: fit-content !important; display: inline-block; } .custom-control-input:focus ~ .custom-control-label::before { box-shadow: 0 0 0 .2rem rgba(1,154,235, 0.4) !important; } // Navs $nav-tabs-border-color: #6a6e79; $nav-tabs-link-active-bg: transparent; $nav-divider-color: #464b52; .nav-tabs .nav-link:not(.active){ color: #f1f1f6 !important; } .nav-tabs .nav-link:hover, .nav-tabs .nav-link.hover { background-color: #464b52 !important; color: #f1f1f6 !important; } // Navbar .navbar { background-color: #171c1e; color: #f1f1f6 !important; } .navbar a, .navbar button, .navbar .text-white { color: #f1f1f6 !important; fill: #f1f1f6 !important; } // Dropdowns $dropdown-color: #f1f1f6 !important; $dropdown-link-color: #f1f1f6 !important; $dropdown-link-hover-color: #f1f1f6 !important; $dropdown-link-hover-bg: #464b52 !important; $dropdown-link-active-color: #f1f1f6 !important; $dropdown-link-active-bg: #1a4c67 !important; $dropdown-divider-bg: rgba($black, 0.15) !default; .dropdown-item.active { border-top: 1px solid #019aeb !important; border-bottom: 1px solid #019aeb !important; } .dropdown-divider { border-top: 1px solid rgba(241, 241, 246, 0.15) !important; } // Chips .chip-outline:not(.error) { color: #cbcdd6 !important; } .chip-outline:not(.error):hover, .chip-outline:not(.error).hover { background-color: #cbcdd61f !important; } .chip-outline:not(:disabled):not(.disabled):not(.error):active, .chip-outline:not(:disabled):not(.disabled):not(.error).active { background-color: rgba(0, 79, 131, .5) !important; border-color: #019aeb !important; } .chip-outline:not(:disabled):not(.disabled):not(.error):active .chip-delete-right, .chip-outline:not(:disabled):not(.disabled):not(.error).active .chip-delete-right { color: #019aeb !important; } .chip-solid:not(:disabled):not(.disabled):not(.error):active, .chip-solid:not(:disabled):not(.disabled):not(.error).active { background-color: #019aeb !important; border-color: transparent !important; color: #fff !important; } .chip-solid.chip-input.error { color: #ab1f26; background-color: #f4bcc0 !important; } .chip.disabled, .chip:disabled { opacity: 0.6; } // Pagination $pagination-color: #b7b9c3; $pagination-bg: transparent; $pagination-hover-bg: #464b52; $pagination-active-color: $col_gray_light; $pagination-active-bg: #217cbb; $pagination-disabled-color: rgba($col_gray_2, 0.4); $pagination-disabled-bg: transparent; // Jumbotron $jumbotron-bg: $col_trimble_gray; // Cards $card-border-color: #171c1e; $card-cap-bg: #353a40; $card-cap-color: $col_gray_light; $card-bg: #353a40; $card-color: $col_gray_light; .card-header:first-child { border-bottom-color: #464b52; } .card-footer:last-child { border-top-color: #464b52; } // Toasts $toast-color: $col_gray_light !important; $toast-background-color: rgba($black, 0.15); // Modal $modal-content-bg: #353a40; $modal-content-border-color: #171c1e; $modal-header-border-color: #6a6e79; $modal-footer-border-color: #6a6e79; $modal-backdrop-bg: #000; // Alerts $alert-bg-level: -10; .alert, .alert .close { color: #f1f1f6 !important; } .alert.alert-dark { background-color: (rgba(#171c1e, 0.5)) !important; border-color: #464B52 !important; } // Progress bars $progress-bg: #252a2e; $progress-box-shadow: inset 0 0.1rem 0.1rem #6a6e79 !default; // List group $list-group-bg: #171c1e; $list-group-border-color: rgba(#000, 0.125) !default; $list-group-hover-bg: #464b52; $list-group-active-bg: #1a4c67; $list-group-action-active-bg: #464b52; $list-group-active-border-color: #019aeb; $list-group-action-hover-color: #f1f1f6; $list-group-item-outline-color: #464b52; .list-group li.list-group-item.active { border-color: #019aeb !important; border-width: 1px !important; } // Breadcrumbs $breadcrumb-bg: transparent; $breadcrumb-active-color: #f1f1f6; // Accordions $accordion-border-color: $col_gray_6; .accordion .card .card-header h1, .accordion .card .card-header h2, .accordion .card .card-header h3, .accordion .card .card-header h4, .accordion .card .card-header h5, .accordion .card .card-header h6 { color: $col_gray_light !important; } .accordion .card .card-header:hover { background-color: #464b52 !important; } .accordion .card .card-header::after { opacity: 0.4; /* really the icon should be #7D808D */ } .accordion .card:not(:first-of-type):not(:last-of-type), .accordion .card:not(:last-of-type) { border-bottom-color: #cbcdd6; } // Messages .message-primary { background-color: rgba(1, 154, 235, 0.2) !important; color: #f1f1f6 !important; } .message-secondary { background-color: rgba(106, 110, 121, 0.2) !important; color: #f1f1f6 !important; } // Slider / Range $custom-range-track-bg: #019aeb !default; // Toasts .toast-dark { background-color: #171c1e80 !important; border-color: #171c1e !important; } .alert-primary, .toast-primary { background-color: #019aeb80 !important; // Blue Pale border-color: #019aeb !important; color: #f1f1f6 !important; } .alert-secondary, .toast-secondary { background-color: #6a6e7980 !important; border-color: #6a6e79 !important; } .toast-tertiary { background-color: #f3f3f780 !important; } .alert-danger, .toast-danger { background-color: #da212c80 !important; } .alert-warning, .toast-warning { background-color: #fbad2680 !important; } .alert-success, .toast-success { background-color: #1e8a4480 !important; } // Tooltips $tooltip-color: $col_trimble_gray; $tooltip-bg: $col_gray_0; // Modus Layout .modus-header { border-bottom: 1px solid #171c1e; } .modus-content { background-color: #171c1e; } .modus-body .modus-sidebar { background-color: #171c1e; border-right: 1px solid #171c1e; } .modus-body .modus-sidebar .nav-link { color: #7d808d; } .modus-footer { border-top: 1px solid #171c1e; } .modus-panel { background-color: #252a2e; .panel-header, .panel-footer { background-color: #171c1e; border-color: #464b52; } .panel-body { background-color: #252a2e; .static-container { border-color: #464b52; } } }