_sass/addon/syntax.scss in jekyll-theme-chirpy-5.0.2 vs _sass/addon/syntax.scss in jekyll-theme-chirpy-5.1.0

@@ -3,27 +3,31 @@
 */
 
 @import "colors/light-syntax";
 @import "colors/dark-syntax";
 
-html:not([mode]),
-html[mode=light] {
-  @include light-syntax;
-}
+html {
+  @media (prefers-color-scheme: light) {
+    &:not([data-mode]),
+    [data-mode=light] {
+      @include light-syntax;
+    }
 
-html[mode=dark] {
-  @include dark-syntax;
-}
-
-@media (prefers-color-scheme: dark) {
-  html:not([mode]),
-  html[mode=dark] {
-    @include dark-syntax;
+    &[data-mode=dark] {
+      @include dark-syntax;
+    }
   }
 
-  html[mode=light] {
-    @include light-syntax;
+  @media (prefers-color-scheme: dark) {
+    &:not([data-mode]),
+    &[data-mode=dark] {
+      @include dark-syntax;
+    }
+
+    &[data-mode=light] {
+      @include light-syntax;
+    }
   }
 }
 
 /* -- Codes Snippet -- */
 
@@ -93,11 +97,11 @@
   /* set the dollar sign to non-selectable */
   .gp {
     user-select: none;
   }
 
-} //.highlight
+} /* .highlight */
 
 code {
   -webkit-hyphens: none;
   -ms-hyphens: none;
   -moz-hyphens: none;
@@ -108,20 +112,27 @@
     padding: 3px 5px;
     border-radius: 4px;
     background-color: var(--inline-code-bg);
   }
 
+  &.filepath {
+    background-color: inherit;
+    color: var(--filepath-text-color);
+    font-weight: 600;
+    padding: 0;
+  }
+
   a > &.highlighter-rouge {
-    padding-bottom: 0; // show link's underlinke
+    padding-bottom: 0; /* show link's underlinke */
     color: inherit;
   }
 
   a:hover > &.highlighter-rouge {
     border-bottom: none;
   }
 
-  blockquote &.highlighter-rouge {
+  blockquote & {
     color: inherit;
   }
 
   .highlight > & {
     color: transparent;
@@ -129,12 +140,14 @@
 }
 
 td.rouge-code {
   @extend %code-snippet-padding;
 
-  // Prevent some browser extends from
-  // changing the URL string of code block.
+  /*
+    Prevent some browser extends from
+    changing the URL string of code block.
+  */
   a {
     color: inherit !important;
     border-bottom: none !important;
     pointer-events: none;
   }
@@ -184,13 +197,13 @@
     box-shadow:
       ($dot-size + $dot-margin) 0 0 var(--code-header-muted-color),
       ($dot-size + $dot-margin) * 2 0 0 var(--code-header-muted-color);
   }
 
-  // the label block
+  /* the label block */
   span {
-    // label icon
+    /* label icon */
     i {
       font-size: 1rem;
       margin-right: 0.4rem;
       color: var(--code-header-icon-color);
 
@@ -199,22 +212,22 @@
       }
     }
 
     @at-root [file] #{&} > i {
       position: relative;
-      top: 1px; // center the file icon
+      top: 1px; /* center the file icon */
     }
 
-    // label text
+    /* label text */
     &::after {
-      content: attr(label-text);
+      content: attr(data-label-text);
       font-size: 0.85rem;
       font-weight: 600;
       color: var(--code-header-text-color);
     }
   }
 
-  // clipboard
+  /* clipboard */
   button {
     @extend %cursor-pointer;
 
     border: 1px solid transparent;
     border-radius: $code-radius;