netbox/netbox/project-static/styles/overrides/_tabler.scss

// Disable font-ligatures for Chromium based browsers
// Chromium requires `font-variant-ligatures: none` in addition to `font-feature-settings "liga" 0`
* {
  font-feature-settings: "liga" 0;
  font-variant-ligatures: none;
}

// Restore default foreground & background colors for <pre> blocks
pre {
  background-color: transparent;
  color: inherit;
}

// Slightly increase alert contrast between bg and text
.alert {
  background: var(--#{$prefix}bg-surface);
}

// Permit copying of badge text
.badge {
  user-select: text;
}

// Button adjustments
.btn {
  // Tabler sets display: flex
  display: inline-block;

  &:focus {
    // Add button focus state
    border: 1px solid var(--tblr-primary-fg);
    outline: 2px solid var(--tblr-primary) !important;
  }
}
.btn-sm {
  // $border-radius-sm (2px) is too small
  border-radius: $border-radius;
}

// Dropdown items
.dropdown-item {
  // Tabler sets display: flex
  display: inline-block;
}

// Set footer icon color
.footer .text-primary {
  color: $rich-black !important;
}

// Tabs
.nav-tabs {
  .nav-link {
    // Tabler sets display: flex
    display: inline-block;
  }
}

// Altering background colors
.page, .page-tabs .nav-tabs .nav-link.active {
  background-color: var(--#{$prefix}bg-surface-tertiary) !important;
}

// Navigation bar
.navbar {
  // Lighten highlight color of active item
  --tblr-navbar-active-bg: rgba(0, 0, 0, 0.06);
}

// Dark mode colors
@if $enable-dark-mode {
  @include color-mode(dark, true) {
    --#{$prefix}alert-color: darken(var(--#{$prefix}warning),10%);
    --#{$prefix}link-color: #{$bright-teal};
    --#{$prefix}link-color-rgb: 0,242,212;
    --#{$prefix}link-hover-color-rgb: 0,242,212;
    --#{$prefix}secondary: #{$gray-400};
    --#{$prefix}primary: #{$bright-teal};
    --#{$prefix}primary-fg: #{$rich-black};
    --#{$prefix}primary-rgb: 0,242,212;
    --#{$prefix}btn-active-color: #{$rich-black};
  }
}

// Dark mode overrides
body[data-bs-theme=dark] {
  // Override background color alpha value
  ::selection {
    background-color: rgba(var(--tblr-primary-rgb),.48);
  }

  .btn-primary {
    color: $rich-black !important;
  }

  // Change content color when primary teal changes with theme
  .bg-primary {
    .card-title,a,i {
      color: $rich-black !important;
    }
  }
  .text-bg-primary {
    color: $rich-black !important;
  }

  // Altering background colors
  .card {
    background: $rich-black !important;
  }

  // Background colors to match brand colors
  background-color: $rich-black;
  .navbar, .page-header {
    background-color: $rich-black;
  }
  .page, .page-tabs .nav-tabs .nav-link.active {
    background-color: $rich-black-light !important;
  }

  .page-link.active, .active>.page-link {
    color: $rich-black;
  }

  // Adjusting text colors
  .text- {
    &bg-primary {
      color: $rich-black !important;
    }
    &muted {
      color: var(--#{$prefix}secondary-color) !important;
    }
    &secondary {
      color: $gray-400 !important;
    }
  }
  .footer .text-primary {
    color: white !important;
  }
  .toast {
    color: var(--#{$prefix}body-color);
  }
  .table-primary {
    --tblr-table-bg: rgba(var(--tblr-secondary-rgb), 0.48);
    --tblr-table-hover-bg: inherit;
    --tblr-table-hover-color: inherit;
  }
}

// Do not apply padding to <code> elements inside a <pre>
pre code {
  padding: unset;
}

// Use an icon instead of Tabler's native "caret" for dropdowns (avoids a Safari bug)
.dropdown-toggle:after{
  font-family: "Material Design Icons";
  content: '\F0140';
  padding-right: 9px;
  border-bottom: none;
  border-left: none;
  transform: none;
  vertical-align: .05em;
  height: auto;
}

// Theme-based visibility utilities
// Tabler's .hide-theme-* utilities expect data-bs-theme on :root, but NetBox applies
// it to body. These overrides use higher specificity selectors to ensure theme-based
// visibility works correctly. The :root:not(.dummy) pattern provides the additional
// specificity needed to override Tabler's :root:not() rules.
:root:not(.dummy) body[data-bs-theme='light'] .hide-theme-light,
:root:not(.dummy) body[data-bs-theme='dark'] .hide-theme-dark {
  display: none !important;
}

:root:not(.dummy) body[data-bs-theme='dark'] .hide-theme-light,
:root:not(.dummy) body[data-bs-theme='light'] .hide-theme-dark {
  display: inline-flex !important;
}