Color-Theme update to match main site for consistency

[shravanngoswamii]

It should be merged after TuringLang/turinglang.github.io#119

[github-actions]

Preview the changes: https://turinglang.org/docs/pr-previews/613
Please avoid using the search feature and navigation bar in PR previews!

[simonsteiger]

Something unexpected came up yesterday afternoon and I wasn't able to spend much time with this PR as a result. I think that the theming is good to go, and I'm happy to play with the code blocks a bit more when I find the time.

[simonsteiger]

Let's merge this for now; once I have time I plan to try different CSS options for the cell outputs and code blocks, but this won't be before late August.

[shravanngoswamii]

Something unexpected came up yesterday afternoon and I wasn't able to spend much time with this PR as a result. I think that the theming is good to go, and I'm happy to play with the code blocks a bit more when I find the time.

That's fine, thanks a lot for spending time on this! Feel free to open a PR anytime and tag me!

[shravanngoswamii]

Putting old styles here, just for reference

Old Styles

Directory structure:
└── old-styles/
    ├── styles.css
    └── theme-dark.scss

FILE: styles.css

.quarto-container {
  background-color: #f8f9fa;
}

.navbar {
  background-color: #ffffff;
}

nav.sidebar.sidebar-navigation:not(.rollup) {
    background-color: #f8f9fa;
}

.navbar a:hover {
    text-decoration: none;
}

.cell-output {
    border: 1px dashed;
}

.cell-bg {
    background-color: #f1f3f5;
}

.cell-output-stdout code {
    word-break: break-wor !important;
    white-space: pre-wrap !important;
}

.cell-output-display svg {
    height: fit-content;
    width: fit-content;

    &.mermaid-js {
        /* fit-content for mermaid diagrams makes them really small, so we
         * default to 100% */
        width: 100%;
    }
}

.cell-output-display img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.nav-footer-center {
    display: flex;
    justify-content: center;
}

.dropdown-menu {
    text-align: center;
    min-width: 100px !important;
    border-radius: 5px;
    max-height: 250px;
    overflow: scroll;
}

/* Custom Footer */
.footer {
    display: none;
}
.custom-footer {
  background-color: #fff;
  color: #6c757d;
  font-size: 0.9rem;
  padding: 3rem 2rem 2rem;
  border-top: 1px solid #e9ecef;
}

.custom-footer .footer-container {
  max-width: 1350px;
  margin: 0 auto;
}

.custom-footer .footer-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid #e9ecef;
}

.custom-footer .footer-links-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  flex: 2 1 400px;
}

.custom-footer .footer-column {
  flex: 1 1 auto;
}

.custom-footer .footer-brands {
  flex: 1 1 320px;
}

.custom-footer .footer-column h5 {
  font-weight: 600;
  color: #212529;
  margin-bottom: 1.25rem;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.custom-footer .footer-column a {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
  color: #6c757d;
  text-decoration: none;
  transition: color 0.2s ease;
}

.custom-footer .footer-column a:hover {
  color: #212529;
  text-decoration: none;
}

.custom-footer .footer-column a i {
  font-size: 1.1rem;
  line-height: 1;
  width: 20px;
  text-align: center;
}

.custom-footer .footer-brands p {
  font-size: 0.9rem;
  line-height: 1.6;
  margin-top: -0.5rem;
  margin-bottom: 1.5rem;
}

.custom-footer .footer-brands .logo-grid {
  display: flex;
  gap: 2rem;
  align-items: center;
}

.custom-footer .partner-logo {
  flex: 1;
}

.custom-footer .partner-logo img {
  max-width: 100%;
  height: 50px;
  object-fit: contain;
  transition: transform 0.2s ease;
}

.custom-footer .partner-logo:hover img {
  transform: scale(1.05);
}

.custom-footer .brands-light-mode-logo {
  display: inline;
}

.custom-footer .brands-dark-mode-logo {
  display: none;
}

.custom-footer .footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.85rem;
  flex-wrap: wrap;
  gap: 1rem;
}

.custom-footer .footer-bottom p {
  margin: 0;
  line-height: 1.6;
}

.custom-footer .footer-bottom a {
  color: #495057;
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid #dee2e6;
}

.custom-footer .footer-bottom a:hover {
  border-bottom-color: #495057;
}

.footer-source-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

@media (max-width: 992px) {
  .custom-footer .footer-links-wrapper {
    flex-basis: 100%;
    justify-content: center;
  }

  .custom-footer .footer-grid {
    justify-content: center;
  }

  .custom-footer .footer-brands {
    flex-grow: 0;
    text-align: center;
  }

  .custom-footer .footer-brands .logo-grid {
    justify-content: center;
  }

  .custom-footer .footer-column {
    flex-grow: 0;
  }
}

@media (max-width: 768px) {
  .custom-footer .footer-bottom {
    flex-direction: column;
    gap: 1.5rem;
    text-align: center;
  }
}

@media (max-width: 576px) {
  .custom-footer .footer-links-wrapper {
    flex-direction: column;
    text-align: center;
    align-items: center;
  }

  .custom-footer .footer-column {
    width: 100%;
    max-width: 350px;
  }

  .custom-footer .footer-column a {
    justify-content: center;
  }

  .custom-footer .footer-brands .logo-grid {
    flex-direction: column;
    gap: 1.5rem;
    align-items: center;
  }

  .custom-footer .partner-logo {
    flex-basis: auto;
    width: 100%;
    max-width: 220px;
  }
}

FILE: theme-dark.scss

/*-- scss:defaults --*/
// Cosmo 5.3.3
// Bootswatch

$theme: "cosmo" !default;

// Manually-added colors
$background-nav: #22272e;
$background-body: #1c2128;
$foreground: #ffffff;
$links: #34b8bf;
$links-hover: #31dce6;
$code-background-color: #22272e;
$li-color: #bcbcbc;
$text-muted: #bcbcbc;
$btn-border-color: #444c56;

// Quarto default colors
$white: #ffffff !default;
$gray-100: #f8f9fa !default;
$gray-200: #e9ecef !default;
$gray-300: #dee2e6 !default;
$gray-400: #ced4da !default;
$gray-500: #adb5bd !default;
$gray-600: #868e96 !default;
$gray-700: #495057 !default;
$gray-800: #22272e !default;
$gray-900: #1c2128 !default;
$black: #000000 !default;

$indigo: #6610f2 !default;
$purple: #613d7c !default;
$pink: #e83e8c !default;
$red: #ff0039 !default;
$orange: #f0ad4e !default;
$yellow: #ff7518 !default;
$green: #3fb618 !default;
$teal: #4DB6AC !default;
$cyan: #39d3d7 !default;

$primary: $links-hover !default;
$secondary: $gray-800 !default;
$success: $green !default;
$info: $cyan !default;
$warning: $yellow !default;
$danger: $red !default;
$light: $gray-100 !default;
$dark: $gray-800 !default;

$min-contrast-ratio: 2.6 !default;

// Options

$enable-rounded: false !default;

// Fonts

// stylelint-disable-next-line value-keyword-case
$font-family-sans-serif: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
$headings-font-weight: 400 !default;

// Tables

$table-color: initial !default;

// Alerts

$alert-border-width: 0 !default;

// Progress bars

$progress-height: .5rem !default;


// Custom tweaks for Quarto-Cosmo 

$navbar-bg: $background-nav;
$navbar-fg: $foreground;
$footer-bg: $background-nav;
$footer-fg: $foreground;
$body-color: $white;
$body-bg: $background-body;
$sidebar-bg: $background-body;
$sidebar-fg: $text-muted;

/*-- scss:rules --*/

h1, h2, h3, h4, h5, h6 {
    color: $foreground !important;
}

.quarto-container {
    background-color: $background-body !important;
}

.navbar {
    background-color: $navbar-bg !important;
}

.sidebar {
    background-color: $sidebar-bg !important;
    color: $sidebar-fg !important;
}

pre code {
    color: $links !important;
}

pre {
    color: $foreground !important;
}

p {
    color: $li-color !important;
}

li {
    color: $li-color !important;
}

a {
    color: $links;

    &:hover {
        color: $links-hover !important;
    }
}

code,
p code,
ol code,
li code,
h1 code {
    background-color: $code-background-color !important;
    color: $links;
}

.cell,
.anchored code {
    background-color: $code-background-color !important;
    color: $links;
}

div.sourceCode {
    background-color: $code-background-color !important;
}

.menu-text:hover {
    color: $links-hover !important;
}

.quarto-title-breadcrumbs .breadcrumb li:last-of-type a {
    color: #6c757d !important;
}

.ansi-bright-black-fg {
    color: $foreground !important;
}

::selection {
    color: $links-hover;
    background: $background-nav;
}


.tooltip {
    --bs-tooltip-color: $black !important;
    --bs-tooltip-bg: $white !important;
}

.aa-DetachedOverlay li.aa-Item[aria-selected=true] .search-item * {
    color: white !important;
}

.aa-List li.aa-Item[aria-selected="true"] * {
    background-color: #4DB6AC !important;
}

// Custom Footer Dark Mode
.custom-footer {
    background-color: $background-nav !important;
    border-top-color: $btn-border-color !important;
    color: $text-muted !important;
}

.custom-footer .footer-grid {
    border-bottom-color: $btn-border-color !important;
}

.custom-footer .footer-column h5 {
    color: $foreground !important;
}

.custom-footer .footer-column a {
    color: $text-muted !important;
    &:hover {
        color: $links-hover !important;
    }
}

.custom-footer .footer-bottom p {
    color: $text-muted !important;
}

.custom-footer .footer-bottom a {
    color: $links !important;
    border-bottom-color: $btn-border-color !important;
    &:hover {
        color: $links-hover !important;
        border-bottom-color: $links-hover !important;
    }
}

.custom-footer .brands-light-mode-logo {
    display: none !important;
}

.custom-footer .brands-dark-mode-logo {
    display: inline !important;
}

.footer-source-link {
  color: $text-muted !important;
  &:hover {
    color: $links-hover !important;
  }
}