theme-dark.scss

/*-- scss:defaults --*/
// Use Cosmo theme as base with dark mode colors
$primary: #45a0f5;
$secondary: #adb5bd;
$success: #3fb618;
$info: #b07cc6;
$warning: #ff7518;
$danger: #ff4d4d;

// Dark theme specific colors
$body-bg: #1a1a1a;
$body-color: #e1e1e1;
$link-color: $primary;
$headings-color: $primary;

// Keep your existing defaults, but add/modify these navbar-specific variables:
$navbar-dark-color:           rgba($body-color, 0.75) !important;
$navbar-dark-hover-color:     rgba($body-color, 0.9) !important;
$navbar-dark-active-color:    $body-color !important;
$navbar-dark-brand-color:     $body-color !important;
$navbar-dark-brand-hover-color: $body-color !important;

// Fonts
$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;
$font-family-monospace: "Source Code Pro", SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;

// Card and border colors
$card-border-color: rgba($primary, 0.2);
$card-cap-bg: rgba($primary, 0.1);
$card-bg: #242424;

// Code blocks
$code-bg: #2d2d2d;
$code-color: #e1e1e1;

/*-- scss:rules --*/

// Custom styling for dark mode
// Navbar styling for dark theme
.navbar {
  background-color: $card-bg;  // Use the same color as cards for consistency
  
  .navbar-nav {
    .nav-link {
      color: $body-color !important;
      opacity: 0.75;
      
      &:hover {
        opacity: 1;
      }
      
      &.active {
        color: $primary !important;
        opacity: 1;
      }
    }
  }
  
  // For brand/logo text if you have any
  .navbar-brand {
    color: $body-color !important;
  }
  
  // For the toggle button in mobile view
  .navbar-toggler {
    color: $body-color !important;
    border-color: rgba($body-color, 0.1) !important;
  }
  
  // Social icons in navbar
  .navbar-nav-scroll {
    .nav-link {
      img, svg {
        opacity: 0.75;
        &:hover {
          opacity: 1;
        }
      }
    }
  }
}

// Social icons in dark mode
.social-icon {
  filter: invert(1);
  opacity: 0.9;
  &:hover {
    opacity: 1;
  }
}

// Consultancy card and buttons
.card {
  &.border-primary {
    border-color: $primary !important;
    background-color: $card-bg !important;
    
    .card-body {
      color: $body-color !important;
    }
  }
}

.btn-primary {
  color: $body-color !important;
  background-color: $primary !important;
  border-color: $primary !important;
  
  &:hover {
    background-color: darken($primary, 10%) !important;
    border-color: darken($primary, 10%) !important;
  }
}

.btn-outline-primary {
  color: $primary !important;
  border-color: $primary !important;
  background-color: transparent !important;
  
  &:hover {
    color: $body-color !important;
    background-color: $primary !important;
  }
}

.about-links {
  margin-top: 1em;
}

.grid {
  gap: 1.5rem;
}

.card {
  transition: transform 0.2s;
  background-color: $card-bg;
  &:hover {
    transform: translateY(-3px);
  }
}

// Recent Updates section styling for dark theme
.grid {
  // Blog post links
  ul li {
    a {
      color: $body-color !important; // Use the main text color for better visibility
      
      &:hover {
        color: $primary !important;
        text-decoration: underline;
      }
    }
    
    // Date text
    small, span, time {
      color: $secondary !important;
    }
  }
}

// "View all posts" and similar links
.view-all-link, 
[href$="→"],
[href*="posts"],
[href*="portfolio"] {
  color: $primary !important;
  
  &:hover {
    color: lighten($primary, 15%) !important;
    text-decoration: underline;
  }
}

// Link styling for featured projects
.project-card {
  a {
    color: $primary !important;
    
    &:hover {
      color: lighten($primary, 15%) !important;
      text-decoration: underline;
    }
  }
}

// Post listings
.post-preview {
  margin-bottom: 1.5rem;
  
  h3 {
    margin-bottom: 0.25rem;
  }
  
  .post-meta {
    color: $secondary;
    font-size: 0.875rem;
  }
}

// Emoji styling
.emoji {
  font-size: 1.2em;
  vertical-align: middle;
}

// Add some spacing
.mt-4 {
  margin-top: 2rem !important;
}

.mb-4 {
  margin-bottom: 2rem !important;
}

// Dark mode specific overrides
a {
  color: $primary;
  &:hover {
    color: lighten($primary, 15%);
  }
}

// Table styling
table {
  background-color: $card-bg;
  color: $body-color;
}

// Code block styling
pre {
  background-color: $code-bg;
  color: $code-color;
}

// Blockquote styling
blockquote {
  border-left-color: $primary;
  background-color: rgba($primary, 0.1);
}

// Blog listing styles
.listing-author {
  font-size: 1rem;
  color: $primary;
  font-weight: 500;
}

.listing-date, .listing-reading-time {
  font-size: 0.95rem;
  color: $secondary;
  opacity: 0.9;
}

.listing-title {
  color: $primary !important;
  text-decoration: none;
  
  &:hover {
    color: lighten($primary, 15%) !important;
    text-decoration: none;
  }
}

.quarto-listing-default .listing-item {
  padding: 1em 0;
}

.quarto-listing-default .listing-item:not(:last-child) {
  border-bottom: 1px solid rgba($primary, 0.2);  // Slightly more visible border for dark theme
}