arsxy-theme 1.0.0.pre.rc

data/_sass/_dark-mode.scss

@@ -0,0 +1,749 @@
+/* Dark mode styles */
+
+/* Apply dark mode when .dark-mode class is present on html */
+html.dark-mode {
+  /* Base color overrides */
+  background-color: $dark-background;
+  color: $dark-text-color;
+  
+  /* Global heading styles to ensure visibility in dark mode - with higher specificity */
+  h1, h2, h3, h4, h5, h6,
+  .post-content h1, .post-content h2, .post-content h3, 
+  .post-content h4, .post-content h5, .post-content h6,
+  .site-footer h1, .site-footer h2, .site-footer h3, 
+  .site-footer h4, .site-footer h5, .site-footer h6,
+  [class*="section"] h1, [class*="section"] h2, [class*="section"] h3, 
+  [class*="section"] h4, [class*="section"] h5, [class*="section"] h6 {
+    color: $dark-text-color !important; /* Force override with !important */
+    letter-spacing: -0.02em;
+  }
+  
+  /* Strong tag styling for dark mode */
+  strong {
+    font-weight: 700;
+    color: lighten($dark-text-color, 10%) !important; /* Slightly brighter than normal text for emphasis */
+  }
+  
+  body {
+    background-color: $dark-background;
+    color: $dark-text-color;
+  }
+  
+  /* Header styles */
+  .site-header {
+    background-color: rgba($dark-surface, 0.95);
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+    border-color: $dark-border-color;
+    box-shadow: $shadow-sm;
+    
+    .site-title {
+      color: $dark-text-color;
+    }
+  }
+  
+  /* Link colors */
+  a {
+    color: lighten($link-color, 15%);
+    
+    &:hover {
+      color: lighten($link-color, 25%);
+    }
+    
+    &.underline-effect {
+      &::after {
+        background-color: currentColor;
+      }
+    }
+  }
+  
+  /* Navigation */
+  .site-nav {
+    .page-link {
+      color: $dark-text-color;
+      
+      &:hover, &.active {
+        color: lighten($primary-color, 20%);
+      }
+      
+      &::after {
+        background: linear-gradient(to right, lighten($secondary-color, 10%), lighten($accent-color, 10%));
+      }
+    }
+    
+    @media (max-width: $on-palm) {
+      background-color: rgba($dark-surface, 0.95);
+      backdrop-filter: blur(10px);
+      -webkit-backdrop-filter: blur(10px);
+      border-color: $dark-border-color;
+      box-shadow: $shadow-md;
+      
+      .menu-icon > svg {
+        fill: $dark-text-color;
+      }
+      
+      input ~ .trigger {
+        background: linear-gradient(to bottom right, rgba($dark-surface, 0.95), rgba($dark-surface, 0.99));
+      }
+    }
+    
+    /* Dark mode toggle */
+    .theme-toggle {
+      color: darken($dark-text-color, 15%);
+      
+      &:hover {
+        color: $dark-text-color;
+        background-color: rgba(lighten($primary-color, 20%), 0.1);
+      }
+      
+      .theme-toggle-icon.sun {
+        display: block !important;
+      }
+      
+      .theme-toggle-icon.moon {
+        display: none !important;
+      }
+    }
+  }
+  
+  /* Footer */
+  .site-footer {
+    background: linear-gradient(to bottom, $dark-surface, $dark-background);
+    border-color: $dark-border-color;
+    
+    &::before {
+      background: lighten($primary-color, 15%); /* Changed from gradient to solid lightened primary color */
+    }
+    
+    .footer-col {
+      h2 {
+        color: lighten($primary-color, 15%);
+        
+        &::after {
+          background: lighten($primary-color, 15%);
+        }
+      }
+      
+      p {
+        color: darken($dark-text-color, 10%);
+      }
+    }
+    
+    .footer-links, .social-links {
+      li {
+        &:hover {
+          transform: translateX(3px);
+        }
+      }
+      
+      a {
+        color: darken($dark-text-color, 10%);
+        
+        &::before {
+          color: lighten($accent-color, 10%);
+        }
+        
+        &:hover {
+          color: lighten($primary-color, 20%);
+        }
+      }
+    }
+    
+    .social-links {
+      .social-icon {
+        background-color: rgba(lighten($primary-color, 15%), 0.1);
+        color: lighten($primary-color, 15%);
+        
+        &:hover {
+          background-color: lighten($primary-color, 15%);
+          color: $dark-background;
+        }
+      }
+    }
+    
+    .footer-bottom {
+      border-color: rgba($dark-border-color, 0.5);
+      color: darken($dark-text-color, 20%);
+      
+      a {
+        color: lighten($secondary-color, 15%);
+        
+        &:hover {
+          color: lighten($accent-color, 15%);
+        }
+      }
+    }
+    
+    .back-to-top {
+      background-color: $dark-surface;
+      color: lighten($primary-color, 15%);
+      box-shadow: $shadow-md;
+      
+      &:hover {
+        background-color: lighten($primary-color, 15%);
+        color: $dark-background;
+      }
+    }
+  }
+  
+  /* Post content */
+  .post {
+    .post-header {
+      .post-title {
+        background: linear-gradient(to right, lighten($primary-color, 15%), lighten($secondary-color, 15%));
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        background-clip: text;
+        color: transparent;
+      }
+      
+      .post-description {
+        color: darken($dark-text-color, 15%);
+        border-left: 3px solid rgba(lighten($accent-color, 15%), 0.5);
+      }
+      
+      .post-meta {
+        color: darken($dark-text-color, 15%);
+        
+        .post-date {
+          background-color: rgba(lighten($primary-color, 15%), 0.1);
+          color: lighten($primary-color, 15%);
+        }
+        
+        .post-categories {
+          a {
+            background: linear-gradient(to right, rgba(lighten($secondary-color, 15%), 0.1), rgba(lighten($accent-color, 15%), 0.1));
+            color: lighten($secondary-color, 15%);
+            border: 1px solid rgba(lighten($secondary-color, 15%), 0.2);
+            
+            &:hover {
+              background: linear-gradient(to right, lighten($secondary-color, 10%), lighten($accent-color, 10%));
+              color: $dark-background;
+            }
+          }
+        }
+        
+        .reading-time {
+          background-color: rgba($dark-gray-light, 0.3);
+          border: 1px solid rgba($dark-gray-light, 0.4);
+          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+          color: $dark-text-color; /* Adding explicit color for visibility */
+          
+          &:hover {
+            background-color: rgba($dark-gray-light, 0.4);
+            transform: translateY(-1px);
+            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+          }
+        }
+        
+        .post-date-author {
+          background-color: rgba(lighten($primary-color, 15%), 0.15);
+          border: 1px solid rgba(lighten($primary-color, 15%), 0.3);
+          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+          
+          &:hover {
+            background-color: rgba(lighten($primary-color, 15%), 0.25);
+            transform: translateY(-1px);
+            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+          }
+          
+          .post-date {
+            color: lighten($primary-color, 15%);
+          }
+          
+          .separator {
+            color: rgba(lighten($primary-color, 10%), 0.6);
+          }
+          
+          .post-author {
+            color: lighten($secondary-color, 15%);
+          }
+        }
+        
+        .post-categories {
+          a {
+            background: rgba(lighten($secondary-color, 15%), 0.15);
+            color: lighten($secondary-color, 15%);
+            border: 1px solid rgba(lighten($secondary-color, 15%), 0.3);
+            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+            
+            &:hover {
+              background: rgba(lighten($secondary-color, 15%), 0.25);
+              color: lighten($secondary-color, 15%);
+              transform: translateY(-1px);
+              box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+            }
+          }
+        }
+        
+        .reading-time {
+          background-color: rgba($dark-gray-light, 0.3);
+          border: 1px solid rgba($dark-gray-light, 0.4);
+          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+          color: $dark-text-color; /* Adding explicit color for visibility */
+          
+          &:hover {
+            background-color: rgba($dark-gray-light, 0.4);
+            transform: translateY(-1px);
+            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+          }
+        }
+      }
+      
+      .post-author {
+        .author-avatar {
+          border-color: lighten($secondary-color, 15%);
+        }
+        
+        .author-name {
+          color: $dark-text-color;
+        }
+      }
+    }
+    
+    .post-content {
+      h1, h2, h3, h4, h5, h6 {
+        color: $dark-text-color;
+        
+        .heading-anchor {
+          color: darken($dark-text-color, 20%);
+          
+          &:hover {
+            color: lighten($primary-color, 15%);
+          }
+        }
+      }
+      
+      h2::after {
+        background: linear-gradient(to right, lighten($secondary-color, 10%), lighten($accent-color, 10%));
+      }
+      
+      h4 {
+        color: lighten($secondary-color, 15%);
+      }
+      
+      strong {
+        color: lighten($dark-text-color, 10%);
+      }
+      
+      .lead {
+        color: lighten($secondary-color, 15%);
+      }
+      
+      blockquote {
+        background-color: $dark-surface;
+        border-left: 4px solid lighten($secondary-color, 10%);
+        
+        &::before {
+          color: rgba(lighten($secondary-color, 15%), 0.2);
+        }
+        
+        cite {
+          color: darken($dark-text-color, 20%);
+        }
+      }
+      
+      code {
+        color: lighten($accent-color, 15%);
+        background-color: $dark-code-background;
+      }
+      
+      a:not(.heading-anchor) {
+        color: lighten($primary-color, 15%);
+        
+        &:hover {
+          color: lighten($accent-color, 15%);
+        }
+        
+        &::after {
+          background-color: lighten($accent-color, 15%);
+        }
+      }
+    }
+    
+    /* Table of contents */
+    .table-of-contents {
+      background: linear-gradient(to bottom right, rgba($dark-surface, 0.8), rgba($dark-background, 0.8));
+      
+      h2 {
+        color: lighten($secondary-color, 15%);
+      }
+      
+      .toc-entry {
+        a {
+          color: $dark-text-color;
+
+          &:hover {
+            color: $accent-color; /* Match the floating TOC hover color */
+          }
+          
+          &.active {
+            color: $accent-color; /* Match the floating TOC active color */
+            font-weight: 600;
+          }
+        }
+        
+        &.active > a {
+          color: $accent-color; /* Match the floating TOC active color */
+        }
+      }
+    }
+    
+    /* Post tags */
+    .post-tags {
+      background-color: rgba($dark-background, 0.8); /* Darker background */
+      border: 1px solid $dark-border-color; /* Adding border for definition */
+      box-shadow: $shadow-sm;
+      
+      h3 {
+        color: lighten($secondary-color, 15%);
+      }
+      
+      .tag-list {
+        .tag {
+          background-color: $dark-surface; /* Darker tag background */
+          color: lighten($accent-color, 15%);
+          border: 1px solid rgba(lighten($accent-color, 15%), 0.2);
+          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+          
+          &:hover {
+            background-color: lighten($accent-color, 15%);
+            color: $dark-background;
+            transform: translateY(-1px);
+            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
+          }
+        }
+      }
+    }
+    
+    /* Post navigation */
+    .post-navigation {
+      a {
+        background: $dark-surface; /* Solid darker background instead of gradient */
+        color: $dark-text-color;
+        border: 1px solid $dark-border-color;
+        box-shadow: $shadow-sm;
+        
+        .nav-label {
+          color: lighten($secondary-color, 15%);
+        }
+        
+        &::after {
+          background: linear-gradient(to right, lighten($secondary-color, 10%), lighten($accent-color, 10%));
+        }
+        
+        &:hover {
+          background: lighten($dark-surface, 5%); /* Slightly lighter on hover */
+          transform: translateY(-2px);
+          box-shadow: $shadow-md;
+        }
+        
+        &.prev::before, &.next::before {
+          color: lighten($secondary-color, 15%);
+        }
+      }
+    }
+  }
+  
+  /* Homepage elements in dark mode */
+  .featured-card, .post-preview {
+    .card-title, h3 {
+      a {
+        color: lighten($dark-text-color, 15%) !important; /* Make card titles lighter and more visible */
+        
+        &:hover {
+          color: lighten($primary-color, 20%) !important; /* Even lighter hover state */
+        }
+      }
+    }
+    
+    .card-content {
+      .card-title {
+        color: lighten($dark-text-color, 15%); /* Ensure the title itself is visible */
+      }
+    }
+  }
+  
+  /* Post layout in dark mode */
+  .post-layout {
+    @media (min-width: 1024px) {
+      &.sidebar-right {
+        .post-sidebar {
+          border-left: 2px solid $dark-border-color;
+        }
+      }
+      
+      &.sidebar-left {
+        .post-sidebar {
+          border-right: 2px solid $dark-border-color;
+        }
+      }
+    }
+    
+    /* Floating TOC in dark mode */
+    .post-sidebar {
+      .floating-toc {
+        h2 {
+          color: lighten($secondary-color, 15%);
+        }
+        
+        .toc {
+          a {
+            
+            &:hover {
+              color: $accent-color; /* Much lighter color for hover state */
+            }
+            
+            &.active {
+              color: $accent-color; /* Much lighter color for active state */
+            }
+          }
+          
+          .toc-level-2 > a {
+            color: darken($dark-text-color, 5%); 
+            font-weight: 500;
+            
+            &:hover, &.active {
+              color: $accent-color;
+            }
+          }
+          
+          .toc-level-3 > a {
+            color: darken($dark-text-color, 15%);
+            opacity: 0.9;
+            
+            &:hover, &.active {
+              color: $accent-color;
+            }
+          }
+        }
+      }
+    }
+  }
+  
+  /* Hero section buttons in dark mode */
+  .hero-section {
+    .hero-buttons {
+      .btn {
+        &.btn-primary {
+          background: linear-gradient(135deg, lighten($accent-color, 5%), lighten($primary-color, 10%));
+          box-shadow: 0 4px 15px rgba(lighten($primary-color, 15%), 0.3);
+          
+          &:hover {
+            background: linear-gradient(135deg, lighten($accent-color, 10%), lighten($primary-color, 15%));
+            box-shadow: 0 6px 20px rgba(lighten($primary-color, 20%), 0.4);
+          }
+        }
+        
+        &.btn-secondary {
+          background: linear-gradient(135deg, lighten($secondary-color, 5%), $secondary-color);
+          box-shadow: 0 4px 15px rgba(lighten($secondary-color, 15%), 0.3);
+          
+          &:hover {
+            background: linear-gradient(135deg, lighten($secondary-color, 10%), lighten($secondary-color, 5%));
+            box-shadow: 0 6px 20px rgba(lighten($secondary-color, 20%), 0.4);
+          }
+        }
+        
+        &::before {
+          background: linear-gradient(
+            90deg, 
+            rgba(255, 255, 255, 0) 0%, 
+            rgba(255, 255, 255, 0.3) 50%, 
+            rgba(255, 255, 255, 0) 100%
+          );
+        }
+      }
+    }
+  }
+  
+  /* Code blocks */
+  .code-block {
+    pre {
+      background-color: $dark-code-background;
+      color: #f8f8f2;
+    }
+    
+    &::before {
+      background: linear-gradient(to right, lighten($secondary-color, 10%), lighten($accent-color, 10%));
+    }
+    
+    &:hover .copy-code-button {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+  
+  .code-filename {
+    background: $dark-surface;
+    color: $dark-text-color;
+    border-color: $dark-border-color;
+  }
+  
+  .highlight-line {
+    background: linear-gradient(to right, rgba(lighten($accent-color, 10%), 0.1), rgba(lighten($accent-color, 10%), 0.05));
+    border-left: 3px solid lighten($accent-color, 10%);
+  }
+  
+  .copy-code-button {
+    background-color: rgba(255, 255, 255, 0.2); /* Light background for dark mode */
+    color: $dark-text-color;
+    opacity: 0.7; /* Make button visible by default */
+    transform: translateY(0); /* No initial transform */
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+    
+    &:hover {
+      background-color: rgba(255, 255, 255, 0.4); /* Lighter on hover */
+      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
+      transform: translateY(-2px);
+      opacity: 1; /* Full opacity on hover */
+    }
+    
+    &.copied {
+      background: linear-gradient(to right, lighten($success-color, 10%), lighten($success-color, 5%));
+      opacity: 1;
+    }
+  }
+  
+  /* Code blocks and syntax highlighting */
+  .highlight {
+    background: $dark-code-background;
+    
+    pre {
+      background-color: $dark-code-background;
+      color: #f8f8f2;
+      border-color: $dark-border-color;
+    }
+    
+    /* Syntax highlighting */
+    .c, .c1, .cm { color: #6272a4; font-style: italic; } /* Comment */
+    .err { color: #f8f8f2; background-color: transparent; } /* Error */
+    .k, .kd, .kr { color: #ff79c6; font-weight: bold; } /* Keyword */
+    .o { color: #f8f8f2; } /* Operator */
+    .p { color: #f8f8f2; } /* Punctuation */
+    .s, .s1, .s2 { color: #f1fa8c; background-color: transparent; } /* String */
+    .nb { color: #8be9fd; background-color: transparent; } /* Built-in */
+    .nc { color: #50fa7b; background-color: transparent; } /* Class */
+    .nf { color: #50fa7b; background-color: transparent; } /* Function */
+    .nn { color: #8be9fd; background-color: transparent; } /* Namespace */
+    .nt { color: #ff79c6; background-color: transparent; } /* Tag */
+    .nv { color: #8be9fd; background-color: transparent; } /* Variable */
+    .w { color: #f8f8f2; } /* Text.Whitespace */
+    .m, .mi, .mf { color: #bd93f9; background-color: transparent; } /* Number */
+    
+    /* Override any problematic elements */
+    .gd { 
+      color: #ff5555; 
+      background-color: rgba(255, 85, 85, 0.2);
+    }
+    .gi { 
+      color: #50fa7b; 
+      background-color: rgba(80, 250, 123, 0.2);
+    }
+    
+    /* All other syntax elements */
+    .kc, .kn, .kp, .kt,
+    .na, .no, .nd, .ni, .ne, .nl,
+    .nx, .py, .ow, .mh, .mo,
+    .sb, .sc, .sd, .se, .sh, .si, .sx, .sr, .ss, .bp,
+    .vc, .vg, .vi, .il { 
+      color: inherit;
+      background-color: transparent; 
+    }
+  }
+  
+  .language-label {
+    background: $dark-gray-light;
+    color: $dark-text-color;
+  }
+  
+  /* Tables */
+  table {
+    box-shadow: $shadow-sm;
+    
+    th, td {
+      border-color: $dark-border-color;
+    }
+    
+    th {
+      background: linear-gradient(to right, rgba(lighten($primary-color, 15%), 0.1), rgba(lighten($secondary-color, 15%), 0.1));
+      color: lighten($secondary-color, 15%);
+    }
+    
+    tr {
+      &:nth-child(even) {
+        background-color: rgba($dark-gray-light, 0.3);
+      }
+      
+      &:hover {
+        background-color: rgba(lighten($secondary-color, 15%), 0.05);
+      }
+    }
+  }
+  
+  /* Selection */
+  ::selection {
+    background: rgba(lighten($accent-color, 15%), 0.3);
+    color: $dark-text-color;
+  }
+
+  /* CSS-only featured images in dark mode */
+  .css-featured-image {
+    /* Pattern 0 - Diagonal stripes */
+    &[data-pattern="0"] {
+      background: linear-gradient(135deg, lighten($primary-color, 10%), lighten($secondary-color, 10%));
+      
+      &::before {
+        background: repeating-linear-gradient(
+          45deg,
+          transparent,
+          transparent 20px,
+          rgba(255, 255, 255, 0.1) 20px,
+          rgba(255, 255, 255, 0.1) 40px
+        );
+      }
+    }
+    
+    /* Pattern 1 - Radial gradient */
+    &[data-pattern="1"] {
+      background: radial-gradient(circle at 30% 40%, lighten($secondary-color, 10%), lighten($accent-color, 10%));
+    }
+    
+    /* Pattern 2 - Geometric shapes */
+    &[data-pattern="2"] {
+      background: linear-gradient(to right, lighten($primary-color, 10%), lighten($accent-color, 10%));
+    }
+    
+    /* Pattern 3 - Waves */
+    &[data-pattern="3"] {
+      background: linear-gradient(to bottom, lighten($secondary-color, 10%), lighten($accent-color, 10%));
+    }
+    
+    /* Pattern 4 - Grid */
+    &[data-pattern="4"] {
+      background: linear-gradient(135deg, lighten($accent-color, 10%), lighten($primary-color, 10%));
+    }
+    
+    /* Pattern 5 - Dots */
+    &[data-pattern="5"] {
+      background: linear-gradient(45deg, lighten($primary-color, 10%), lighten($secondary-color, 10%));
+    }
+    
+    .css-image-title {
+      color: rgba(255, 255, 255, 0.2);
+      text-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
+      
+      &::after {
+        background: rgba(255, 255, 255, 0.3);
+      }
+    }
+  }
+}
+
+/* Transition for smooth mode switching */
+body, a, .site-header, .site-nav, .site-footer, .post, 
+.table-of-contents, pre, code, blockquote, table, button,
+.post-navigation a, .tag, .theme-toggle, .footer-col h2::after,
+.post-content h2::after, .heading-anchor, .social-icon {
+  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
+}