diff --git a/src/components/app.scss b/src/components/app.scss
index 626932eb..ecc1a7d8 100644
--- a/src/components/app.scss
+++ b/src/components/app.scss
@@ -5,7 +5,7 @@
 
 @import '../variables.scss';
 
-.bp3-dark .splitter-layout > .layout-splitter  {
+.#{$ns}-dark .splitter-layout > .layout-splitter  {
     // make layout splitter match app color scheme
     background-color: $pt-dark-app-background-color;
 }
@@ -15,7 +15,7 @@
     background-color: $pt-app-background-color;
 }
 
-.bp3-dark .terminal-padding {
+.#{$ns}-dark .terminal-padding {
     background-color: black;
 }
 
diff --git a/src/components/editor.scss b/src/components/editor.scss
index 71697224..37f6a23f 100644
--- a/src/components/editor.scss
+++ b/src/components/editor.scss
@@ -5,7 +5,7 @@
 
 @import '../variables.scss';
 
-.bp3-dark .ace_gutter {
+.#{$ns}-dark .ace_gutter {
     // make ace editor match app backgound color
     background-color: $pt-dark-app-background-color;
 }
diff --git a/src/components/status-bar.scss b/src/components/status-bar.scss
index 60448c17..ea0b6469 100644
--- a/src/components/status-bar.scss
+++ b/src/components/status-bar.scss
@@ -20,7 +20,7 @@
     margin-left: 10px;
 }
 
-.bp3-progress-bar.status-bar-item {
+.#{$ns}-progress-bar.status-bar-item {
     // override progress bar default gray1 backgound
     background-color: $pt-app-background-color;
 }
diff --git a/src/components/toolbar.scss b/src/components/toolbar.scss
index efe477c7..02a29f4a 100644
--- a/src/components/toolbar.scss
+++ b/src/components/toolbar.scss
@@ -3,7 +3,9 @@
 
 // Custom styling for the Toolbar control.
 
-.bp3-navbar-divider {
+@import '../variables.scss';
+
+.#{$ns}-navbar-divider {
     // don't draw vertical line since we are just using button groups
     border-left: unset;
 }
diff --git a/src/index.scss b/src/index.scss
index f20c7f1f..a2a72980 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -39,6 +39,6 @@ body {
 
 // global style tweaks
 
-.bp3-form-group > .bp3-label {
+.#{$ns}-form-group > .#{$ns}-label {
     font-weight: bolder;
 }
diff --git a/src/index.tsx b/src/index.tsx
index dd2a51cd..8cb5cf42 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,7 +1,7 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) 2020-2021 The Pybricks Authors
 
-import { ResizeSensor } from '@blueprintjs/core';
+import { Classes, ResizeSensor } from '@blueprintjs/core';
 import { I18nContext, I18nManager } from '@shopify/react-i18n';
 import React from 'react';
 import ReactDOM from 'react-dom';
@@ -38,9 +38,9 @@ store.subscribe(() => {
     const newDarkMode = store.getState().settings.darkMode;
     if (newDarkMode !== oldDarkMode) {
         if (newDarkMode) {
-            document.body.classList.add('bp3-dark');
+            document.body.classList.add(Classes.DARK);
         } else {
-            document.body.classList.remove('bp3-dark');
+            document.body.classList.remove(Classes.DARK);
         }
         oldDarkMode = newDarkMode;
     }