anthonymidili/Bullhorn

:root {
  // Customize bootstrap
  --bs-border-width: 2px;

  // Color palette
  --white: #fefefe;
  --off-white: #fffff4;
  --dark-off-white: #d9d9d3;
  --light-gray: #c6c9cb;
  --gray: #868686;
  --dark-gray: #595959;
  --tundora: #2a2828;
  --light-black: #1b1b1b;
  --black: #010101;
  --light-goldenrod: #fefef2;
  --goldenrod: #fbcc6c;
  --christine: #f26c09;
  --dark-christine: #cb5908;
  --light-red: #fb6363;
  --red: #ff0000;
  --dark-red: #c50606;
  --green-ting: #daf7da;
  --green: #008000;
  --dark-green-ting: #022c02;
  --blue-ting: #fafafb;
  --ice-blue: #d4e6f0;
  --light-blue: #85d5ff;
  --shakespear: #55acd9;
  --blue: #0d6efd;
  --troy-blue: #1552a2;
  --dark-troy-blue: #104182;
  --dark-blue: #13395f;
}

// Light theme
@mixin light-theme {
  // Standards
  --standard-font: var(--black);
  --site-background: var(--off-white);
  --link-color: var(--bs-link-color);
  --link-color-hover: var(--bs-link-hover-color);
  --delete-link-color: var(--red);
  --delete-link-color-hover: var(--dark-red);
  --background-color: var(--blue-ting);
  --border-color: var(--gray);
  --black-color: var(--black);
  --black-color-hover: var(--gray);
  --white-color: var(--white);
  --green-color: var(--green);
  --green-ting-color: var(--green-ting);
  --red-color: var(--red);
  --dark-red-color: var(--dark-red);
  --dark-gray-color: var(--dark-gray);
  --header-color: var(--troy-blue);

  // Topbar
  --topbar-background: var(--troy-blue);
  --topbar-background-hover: var(--dark-blue);
  --topbar-text: var(--off-white);
  --topbar-text-hover: var(--ice-blue);
  --topbar-logo: var(--off-white);
  --topbar-logo-hover: var(--ice-blue);
  --toggler-color: var(--off-white);
  --toggler-clicked: var(--ice-blue);

  // Subbar
  --subbar-background: var(--ice-blue);
  --subbar-text: var(--troy-blue);
  --subbar-text-hover: var(--dark-troy-blue);
  --subbar-border: var(--topbar-background);

  // Callouts
  --callout-background: var(--background-color);
  --callout-border: var(--border-color);

  // Notifications
  --notifications-background: var(--background-color);
  --notifications-border: var(--border-color);
  --notifications-unread: var(--green-ting-color);

  // Comments
  --comments-background: var(--background-color);
  --comments-border: var(--border-color);

  // Autocomplete
  --autocomplete-background: var(--background-color);
  --autocomplete-background-hover: var(--green-ting-color);
  --autocomplete-border: var(--border-color);

  // Avatar
  --avatar-background: var(--background-color);
  --avatar-border: var(--border-color);

  // Pagination
  --pagination-text: var(--dark-gray);

  // Modal
  --modal-background: var(--site-background);
  --modal-border: var(--border-color);

  // Events
  --event-response-background: var(--site-background);
  --event-description-background: var(--site-background);
  --event-border: var(--border-color);

  // Messages
  --messages-background: var(--ice-blue);
  --messages-border: var(--border-color);

  // Forms
  --form-input-border: var(--gray);

  // Tables
  --table-background: var(--background-color);
  --table-border: var(--border-color);
  --table-prev-next-background: var(--light-gray);
  --table-today-background: var(--light-goldenrod);
  --table-link-color: var(--link-color);
  --table-link-color-hover: var(--link-color-hover);

  --bs-body-bg: var(--white);
}

// Dark theme
@mixin dark-theme {
  // Standards
  --standard-font: var(--off-white);
  --site-background: var(--tundora);
  --link-color: var(--light-blue);
  --link-color-hover: var(--shakespear);
  --delete-link-color: var(--light-red);
  --delete-link-color-hover: var(--red);
  --background-color: var(--dark-gray);
  --border-color: var(--light-goldenrod);
  --black-color: var(--off-white);
  --black-color-hover: var(--dark-off-white);
  --white-color: var(--black);
  --green-color: var(--green);
  --green-ting-color: var(--dark-green-ting);
  --red-color: var(--red);
  --dark-red-color: var(--dark-red);
  --dark-gray-color: var(--dark-gray);
  --header-color: var(--off-white);

  // Topbar
  --topbar-background: var(--black);
  --topbar-background-hover: var(--dark-blue);
  --topbar-text: var(--off-white);
  --topbar-text-hover: var(--ice-blue);
  --topbar-logo: var(--off-white);
  --topbar-logo-hover: var(--ice-blue);
  --toggler-color: var(--off-white);
  --toggler-clicked: var(--ice-blue);

  // Subbar
  --subbar-background: var(--light-black);
  --subbar-text: var(--ice-blue);
  --subbar-text-hover: var(--shakespear);
  --subbar-border: var(--topbar-background);

  // Callouts
  --callout-background: var(--black);
  --callout-border: var(--border-color);

  // Notifications
  --notifications-background: var(--black);
  --notifications-border: var(--border-color);
  --notifications-unread: var(--green-ting-color);

  // Comments
  --comments-background: var(--black);
  --comments-border: var(--border-color);

  // Autocomplete
  --autocomplete-background: var(--background-color);
  --autocomplete-background-hover: var(--dark-troy-blue);
  --autocomplete-border: var(--border-color);

  // Avatar
  --avatar-background: var(--background-color);
  --avatar-border: var(--border-color);

  // Pagination
  --pagination-text: var(--dark-gray);

  // Modal
  --modal-background: var(--site-background);
  --modal-border: var(--border-color);

  // Events
  --event-response-background: var(--site-background);
  --event-description-background: var(--site-background);
  --event-border: var(--border-color);

  // Messages
  --messages-background: var(--dark-gray);
  --messages-border: var(--border-color);

  // Forms
  --form-input-border: var(--gray);

  // Tables
  --table-background: var(--light-gray);
  --table-border: var(--border-color);
  --table-prev-next-background: var(--goldenrod);
  --table-today-background: var(--light-goldenrod);
  --table-link-color: var(--red);
  --table-link-color-hover: var(--dark-red);

  --bs-body-bg: var(--light-gray);
}

// System theme dark
@media (prefers-color-scheme: dark) {
  body {
    @include dark-theme;
  }
  // Force to light theme
  body.light {
    @include light-theme;
  }
}

// System theme light
@media (prefers-color-scheme: light) {
  body {
    @include light-theme;
  }
  // Force to dark theme
  body.dark {
    @include dark-theme;
  }
}