diff --git a/src/components/atoms/LogoUnit.module.scss b/src/components/atoms/LogoUnit.module.scss
index 6afe6b5..f5892cb 100644
--- a/src/components/atoms/LogoUnit.module.scss
+++ b/src/components/atoms/LogoUnit.module.scss
@@ -31,7 +31,7 @@
     font-size: $font-size-h4;
     color: $brand-grey;
 
-    .dark & {
+    :global(.dark) & {
         color: $brand-grey-light;
     }
 
@@ -49,7 +49,7 @@
     .logounit__description {
         color: $brand-grey-light;
 
-        .dark & {
+        :global(.dark) & {
             color: $brand-grey;
         }
     }
diff --git a/src/components/molecules/Availability.module.scss b/src/components/molecules/Availability.module.scss
index 7d1acc3..e032e1c 100644
--- a/src/components/molecules/Availability.module.scss
+++ b/src/components/molecules/Availability.module.scss
@@ -10,7 +10,7 @@
     display: block;
     transition: opacity .2s ease-out;
 
-    .dark & {
+    :global(.dark) & {
         color: $text-color-light--dark;
     }
 
@@ -24,7 +24,7 @@
         position: fixed;
         bottom: $spacer;
 
-        .dark & {
+        :global(.dark) & {
             background: rgba($body-background-color--dark, .8);
             color: $brand-light;
         }
diff --git a/src/components/molecules/ProjectNav.module.scss b/src/components/molecules/ProjectNav.module.scss
index c3e0e69..c3d3407 100644
--- a/src/components/molecules/ProjectNav.module.scss
+++ b/src/components/molecules/ProjectNav.module.scss
@@ -22,7 +22,7 @@
     box-shadow: 0 3px 5px rgba($brand-main, .15),
         0 5px 16px rgba($brand-main, .15);
 
-    .dark & {
+    :global(.dark) & {
         box-shadow: 0 3px 5px rgba(darken($brand-main, 20%), .15),
             0 5px 16px rgba(darken($brand-main, 20%), .15);
     }
diff --git a/src/components/molecules/ThemeSwitch.module.scss b/src/components/molecules/ThemeSwitch.module.scss
index 09c8280..0e757fc 100644
--- a/src/components/molecules/ThemeSwitch.module.scss
+++ b/src/components/molecules/ThemeSwitch.module.scss
@@ -18,7 +18,7 @@
             height: .7rem;
         }
 
-        .dark & {
+        :global(.dark) & {
             fill: $brand-grey;
         }
     }
@@ -55,7 +55,7 @@ $knob-space: 1px;
         transform: translate3d(0, 0, 0);
     }
 
-    .dark & {
+    :global(.dark) & {
         border-color: $brand-grey;
 
         &::after {
@@ -69,7 +69,7 @@ $knob-space: 1px;
     cursor: pointer;
     opacity: .6;
 
-    .dark & {
+    :global(.dark) & {
         opacity: .8;
     }
 
diff --git a/src/components/organisms/Footer.module.scss b/src/components/organisms/Footer.module.scss
index 8b09f17..bdc4e5e 100644
--- a/src/components/organisms/Footer.module.scss
+++ b/src/components/organisms/Footer.module.scss
@@ -16,7 +16,7 @@
         margin-bottom: $spacer * 2;
     }
 
-    .dark & {
+    :global(.dark) & {
         color: $text-color-light--dark;
     }
 }
@@ -29,7 +29,7 @@
         margin-left: $spacer;
         color: $text-color-light;
 
-        .dark & {
+        :global(.dark) & {
             color: $text-color-light--dark;
         }