Eliminate the `$style` variable 🔥

I’ve added a `--absolute` variable that’s `white` in dark mode and `black` in regular mode.

assets/stylesheets/components/_content.scss

@@ -396,12 +396,9 @@
   pre:hover > & { display: block; }
   &:hover { opacity: 1; }
 
-  > svg { @extend %svg-icon; }
-
-  @if $style == 'dark' {
-    > svg { fill: white; }
-  } @else {
-    > svg { fill: black; }
+  > svg {
+    @extend %svg-icon;
+    fill: var(--absolute);
   }
 
   &._pre-clip-success > svg,

assets/stylesheets/components/_header.scss

@@ -151,11 +151,7 @@
     opacity: .42;
     @extend %svg-icon;
 
-    @if $style == 'dark' {
-      fill: white;
-    } @else {
-      fill: black;
-    }
+    fill: var(--absolute);
   }
 }
 
@@ -202,13 +198,9 @@
     top: .5rem;
     left: .375rem;
     @extend %svg-icon;
+    fill: var(--absolute);
   }
 
-  @if $style == 'dark' {
-    > svg { fill: white; }
-  } @else {
-    > svg { fill: black; }
-  }
   ._search-active > & { display: block; }
 }
 

assets/stylesheets/components/_sidebar.scss

@@ -200,11 +200,9 @@
   width: 1rem;
   height: 1rem;
   cursor: pointer;
-  fill: black;
+  fill: var(--absolute);
   opacity: .4;
 
-  @if $style == 'dark' { fill: white; }
-
   &:hover { opacity: .65; }
 
   ._list-rdir > & {

assets/stylesheets/global/_classes.scss

@@ -149,12 +149,11 @@
     pointer-events: none;
 
     // <svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M15,15H2V6h2.595c0,0,0.689-0.896,2.17-2H1C0.447,4,0,4.449,0,5v11c0,0.553,0.447,1,1,1h15c0.553,0,1-0.447,1-1v-3.746 l-2,1.645V15z M13.361,8.05v3.551L20,6.4l-6.639-4.999v3.131C5.3,4.532,5.3,12.5,5.3,12.5C7.582,8.752,8.986,8.05,13.361,8.05z"/></svg>
-    @if $style == 'dark' {
-      background-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjAgMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbD0iI2NiZDBkMCIgZD0iTTE1LDE1SDJWNmgyLjU5NWMwLDAsMC42ODktMC44OTYsMi4xNy0ySDFDMC40NDcsNCwwLDQuNDQ5LDAsNXYxMWMwLDAuNTUzLDAuNDQ3LDEsMSwxaDE1YzAuNTUzLDAsMS0wLjQ0NywxLTF2LTMuNzQ2IGwtMiwxLjY0NVYxNXogTTEzLjM2MSw4LjA1djMuNTUxTDIwLDYuNGwtNi42MzktNC45OTl2My4xMzFDNS4zLDQuNTMyLDUuMywxMi41LDUuMywxMi41QzcuNTgyLDguNzUyLDguOTg2LDguMDUsMTMuMzYxLDguMDV6Ii8+PC9zdmc+);
-    } @else {
     background-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjAgMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbD0iIzMzNzdjMCIgZD0iTTE1LDE1SDJWNmgyLjU5NWMwLDAsMC42ODktMC44OTYsMi4xNy0ySDFDMC40NDcsNCwwLDQuNDQ5LDAsNXYxMWMwLDAuNTUzLDAuNDQ3LDEsMSwxaDE1YzAuNTUzLDAsMS0wLjQ0NywxLTF2LTMuNzQ2IGwtMiwxLjY0NVYxNXogTTEzLjM2MSw4LjA1djMuNTUxTDIwLDYuNGwtNi42MzktNC45OTl2My4xMzFDNS4zLDQuNTMyLDUuMywxMi41LDUuMywxMi41QzcuNTgyLDguNzUyLDguOTg2LDguMDUsMTMuMzYxLDguMDV6Ii8+PC9zdmc+);
   }
-  }
+}
+html.dark %external-link {
+  background-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjAgMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbD0iI2NiZDBkMCIgZD0iTTE1LDE1SDJWNmgyLjU5NWMwLDAsMC42ODktMC44OTYsMi4xNy0ySDFDMC40NDcsNCwwLDQuNDQ5LDAsNXYxMWMwLDAuNTUzLDAuNDQ3LDEsMSwxaDE1YzAuNTUzLDAsMS0wLjQ0NywxLTF2LTMuNzQ2IGwtMiwxLjY0NVYxNXogTTEzLjM2MSw4LjA1djMuNTUxTDIwLDYuNGwtNi42MzktNC45OTl2My4xMzFDNS4zLDQuNTMyLDUuMywxMi41LDUuMywxMi41QzcuNTgyLDguNzUyLDguOTg2LDguMDUsMTMuMzYxLDguMDV6Ii8+PC9zdmc+);
 }
 
 %internal-link:after { content: none !important; }

assets/stylesheets/global/_icons.scss

@@ -23,8 +23,8 @@
   %doc-icon-2 { background-image: image-url('docs-2@2x.png') !important; }
 }
 
-%darkIconFix {
-  @if $style == 'dark' {
+html.dark {
+  %darkIconFix {
     filter: invert(100%) grayscale(100%);
     -webkit-filter: invert(100%) grayscale(100%);
   }

assets/stylesheets/global/_variables-dark.scss

@@ -1,4 +1,3 @@
-$style: 'dark';
 $mediumScreen: '(max-width: 800px)';
 // TODO: convert uses of these to CSS variables
 $selectionText: #fff;
@@ -12,6 +11,8 @@ html.dark {
   --boldFontWeight: 500;
   --bolderFontWeight: 600;
 
+  --absolute: white;
+
   --maxWidth: 80rem;
   --headerHeight: 3rem;
   --sidebarWidth: 20rem;

assets/stylesheets/global/_variables.scss

@@ -1,4 +1,3 @@
-$style: 'light';
 $mediumScreen: '(max-width: 800px)';
 // TODO: convert uses of these to CSS variables
 $selectionText: #fff;
@@ -13,6 +12,8 @@ html {
   --boldFontWeight: 500;
   --bolderFontWeight: 600;
 
+  --absolute: black;
+
   --maxWidth: 80rem;
   --headerHeight: 3rem;
   --sidebarWidth: 20rem;