diff --git a/src/common/styles/md3.js b/src/common/styles/md3.js
index c712226..d3b098c 100644
--- a/src/common/styles/md3.js
+++ b/src/common/styles/md3.js
@@ -1,7 +1,24 @@
 import {css} from 'lit';
 
+// This is used to customize some colors. Also, we use this to pass the dark
+// theme color scheme (it's defined in variables prefixed with --TWPT).
 export const SHARED_MD3_STYLES = css`
   :host {
-    --md-sys-color-surface: rgb(227, 255, 251);
+    --md-sys-color-primary: var(--TWPT-md-sys-color-primary, #6750a4);
+    --md-sys-color-on-primary: var(--TWPT-md-sys-color-on-primary, #fff);
+    --md-sys-color-surface: var(--TWPT-md-sys-color-surface, rgb(227, 255, 251));
+    --md-sys-color-on-surface: var(--TWPT-md-sys-color-on-surface);
+    --md-sys-color-on-surface-rgb: var(--TWPT-md-sys-color-on-surface-rgb);
+    --md-sys-color-on-surface-variant: var(--TWPT-md-sys-color-on-surface-variant);
+    --md-list-list-divider-color: var(--TWPT-md-list-list-divider-color);
+    --md-ripple-hover-state-layer-color: var(--TWPT-md-ripple-hover-state-layer-color);
+    --md-ripple-pressed-state-layer-color: var(--TWPT-md-ripple-pressed-state-layer-color);
+    --md-icon-button-unselected-icon-color: var(--TWPT-custom-md-icon-color);
+    --md-icon-button-unselected-hover-icon-color: var(--TWPT-custom-md-icon-color);
+    --md-icon-button-unselected-focus-icon-color: var(--TWPT-custom-md-icon-color);
+    --md-icon-button-unselected-pressed-icon-color: var(--TWPT-custom-md-icon-color);
+    --mdc-theme-on-surface: var(--TWPT-primary-text, #000);
+    --mdc-dialog-heading-ink-color: var(--TWPT-primary-text);
+    --mdc-theme-surface: var(--TWPT-primary-background, #fff);
   }
 `;
diff --git a/src/contentScripts/communityConsole/workflows/components/TwptConfirmDialog.js b/src/contentScripts/communityConsole/workflows/components/TwptConfirmDialog.js
index 8b778e6..38d3420 100644
--- a/src/contentScripts/communityConsole/workflows/components/TwptConfirmDialog.js
+++ b/src/contentScripts/communityConsole/workflows/components/TwptConfirmDialog.js
@@ -5,22 +5,27 @@
 import {css, html, LitElement} from 'lit';
 import {createRef, ref} from 'lit/directives/ref.js';
 
+import {SHARED_MD3_STYLES} from '../../../../common/styles/md3.js';
+
 export default class TwptConfirmDialog extends LitElement {
   static properties = {
     open: {type: Boolean},
     workflow: {type: Object},
   };
 
-  static styles = css`
-    :host {
-      --mdc-dialog-content-ink-color: var(--mdc-theme-on-surface, #000);
-      --mdc-dialog-z-index: 200;
-    }
+  static styles = [
+    SHARED_MD3_STYLES,
+    css`
+      :host {
+        --mdc-dialog-content-ink-color: var(--mdc-theme-on-surface, #000);
+        --mdc-dialog-z-index: 200;
+      }
 
-    .workflow {
-      font-weight: 500;
-    }
-  `;
+      .workflow {
+        font-weight: 500;
+      }
+    `,
+  ];
 
   constructor() {
     super();
diff --git a/src/contentScripts/communityConsole/workflows/components/TwptWorkflowDialog.js b/src/contentScripts/communityConsole/workflows/components/TwptWorkflowDialog.js
index 9b9525f..c6c9a7f 100644
--- a/src/contentScripts/communityConsole/workflows/components/TwptWorkflowDialog.js
+++ b/src/contentScripts/communityConsole/workflows/components/TwptWorkflowDialog.js
@@ -1,11 +1,11 @@
 import '@material/mwc-dialog/mwc-dialog.js';
 import '@material/web/button/text-button.js';
-
 import './TwptWorkflowProgress.js';
 
 import {css, html, LitElement} from 'lit';
 import {createRef, ref} from 'lit/directives/ref.js';
 
+import {SHARED_MD3_STYLES} from '../../../../common/styles/md3.js';
 import WorkflowRunner from '../runner.js';
 
 export default class TwptWorkflowDialog extends LitElement {
@@ -15,16 +15,19 @@
     _runner: {type: Object, state: true},
   };
 
-  static styles = css`
-    :host {
-      --mdc-dialog-content-ink-color: var(--mdc-theme-on-surface, #000);
-      --mdc-dialog-z-index: 200;
-    }
+  static styles = [
+    SHARED_MD3_STYLES,
+    css`
+      :host {
+        --mdc-dialog-content-ink-color: var(--mdc-theme-on-surface, #000);
+        --mdc-dialog-z-index: 200;
+      }
 
-    .workflow-name {
-      font-weight: 500;
-    }
-  `;
+      .workflow-name {
+        font-weight: 500;
+      }
+    `,
+  ];
 
   progressRef = createRef();
 
diff --git a/src/contentScripts/communityConsole/workflows/components/TwptWorkflowProgress.js b/src/contentScripts/communityConsole/workflows/components/TwptWorkflowProgress.js
index 52245e0..54e8c63 100644
--- a/src/contentScripts/communityConsole/workflows/components/TwptWorkflowProgress.js
+++ b/src/contentScripts/communityConsole/workflows/components/TwptWorkflowProgress.js
@@ -7,6 +7,8 @@
 import {css, html, LitElement} from 'lit';
 import {map} from 'lit/directives/map.js';
 
+import {SHARED_MD3_STYLES} from '../../../../common/styles/md3.js';
+
 export default class TwptWorkflowProgress extends LitElement {
   static properties = {
     workflow: {type: Object},
@@ -16,13 +18,16 @@
     status: {type: String},
   };
 
-  static styles = css`
-    .progressbar-container {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-    }
-  `;
+  static styles = [
+    SHARED_MD3_STYLES,
+    css`
+      .progressbar-container {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+      }
+    `,
+  ];
 
   renderThreadProgress() {
     // @TODO: Improve this UI when the actions section is complete
diff --git a/src/contentScripts/communityConsole/workflows/components/index.js b/src/contentScripts/communityConsole/workflows/components/index.js
index 1822edc..05cf839 100644
--- a/src/contentScripts/communityConsole/workflows/components/index.js
+++ b/src/contentScripts/communityConsole/workflows/components/index.js
@@ -58,6 +58,8 @@
   }
 
   get _selectedWorkflow() {
+    if (!this._workflows) return null;
+
     for (const w of this._workflows) {
       if (w.uuid == this._selectedWorkflowUuid) return w.proto;
     }
diff --git a/src/static/css/ccdarktheme.css b/src/static/css/ccdarktheme.css
index a35dc0b..e8e7366 100644
--- a/src/static/css/ccdarktheme.css
+++ b/src/static/css/ccdarktheme.css
@@ -28,6 +28,18 @@
   --TWPT-interop-subtle-border: #474747;
   --TWPT-interop-success: #37be5f;
   --TWPT-interop-blue: #7cacf8;
+
+  /* MD3 dark theme variables */
+  --TWPT-md-sys-color-primary: #bda5ff;
+  --TWPT-md-sys-color-on-primary: #000;
+  --TWPT-md-sys-color-surface: var(--TWPT-drawer-background);
+  --TWPT-md-sys-color-on-surface: var(--TWPT-primary-text);
+  --TWPT-md-sys-color-on-surface-rgb: 154, 160, 166;
+  --TWPT-md-sys-color-on-surface-variant: var(--TWPT-secondary-text);
+  --TWPT-md-list-list-divider-color: var(--TWPT-subtle-border);
+  --TWPT-md-ripple-hover-state-layer-color: white;
+  --TWPT-md-ripple-pressed-state-layer-color: white;
+  --TWPT-custom-md-icon-color: var(--TWPT-subtle-button-background);
 }
 
 body {