diff --git a/plugins/chat/assets/javascripts/discourse/components/styleguide/chat-composer-message-details.js b/plugins/chat/assets/javascripts/discourse/components/styleguide/chat-composer-message-details.js
index 68a60e77724..e3b6bc8827f 100644
--- a/plugins/chat/assets/javascripts/discourse/components/styleguide/chat-composer-message-details.js
+++ b/plugins/chat/assets/javascripts/discourse/components/styleguide/chat-composer-message-details.js
@@ -8,10 +8,11 @@ export default class ChatStyleguideChatComposerMessageDetails extends Component
   @service site;
   @service session;
   @service keyValueStore;
+  @service currentUser;
 
   @cached
   get message() {
-    return fabricators.message();
+    return fabricators.message({ user: this.currentUser });
   }
 
   @action
diff --git a/plugins/chat/assets/javascripts/discourse/components/styleguide/chat-composer.js b/plugins/chat/assets/javascripts/discourse/components/styleguide/chat-composer.js
index feb5d069630..7a6b812437d 100644
--- a/plugins/chat/assets/javascripts/discourse/components/styleguide/chat-composer.js
+++ b/plugins/chat/assets/javascripts/discourse/components/styleguide/chat-composer.js
@@ -8,7 +8,7 @@ export default class ChatStyleguideChatComposer extends Component {
   @service chatChannelComposer;
   @service chatChannelPane;
 
-  channel = fabricators.channel();
+  channel = fabricators.channel({ id: -999 });
 
   @action
   toggleDisabled() {
diff --git a/plugins/chat/assets/javascripts/discourse/components/styleguide/chat-message.js b/plugins/chat/assets/javascripts/discourse/components/styleguide/chat-message.js
index 5088d5c4437..f57ef71b8ff 100644
--- a/plugins/chat/assets/javascripts/discourse/components/styleguide/chat-message.js
+++ b/plugins/chat/assets/javascripts/discourse/components/styleguide/chat-message.js
@@ -3,11 +3,14 @@ import fabricators from "discourse/plugins/chat/discourse/lib/fabricators";
 import { action } from "@ember/object";
 import ChatMessagesManager from "discourse/plugins/chat/discourse/lib/chat-messages-manager";
 import { getOwner } from "discourse-common/lib/get-owner";
+import { inject as service } from "@ember/service";
 
 export default class ChatStyleguideChatMessage extends Component {
+  @service currentUser;
+
   manager = new ChatMessagesManager(getOwner(this));
 
-  message = fabricators.message();
+  message = fabricators.message({ user: this.currentUser });
 
   @action
   toggleDeleted() {
diff --git a/plugins/chat/assets/javascripts/discourse/components/styleguide/chat-thread-original-message.js b/plugins/chat/assets/javascripts/discourse/components/styleguide/chat-thread-original-message.js
index f1abb03dfac..8fc54b63124 100644
--- a/plugins/chat/assets/javascripts/discourse/components/styleguide/chat-thread-original-message.js
+++ b/plugins/chat/assets/javascripts/discourse/components/styleguide/chat-thread-original-message.js
@@ -1,6 +1,9 @@
 import Component from "@glimmer/component";
 import fabricators from "discourse/plugins/chat/discourse/lib/fabricators";
+import { inject as service } from "@ember/service";
 
 export default class ChatStyleguideChatThreadOriginalMessage extends Component {
-  message = fabricators.message();
+  @service currentUser;
+
+  message = fabricators.message({ user: this.currentUser });
 }
diff --git a/plugins/styleguide/assets/javascripts/discourse/components/toggle-color-mode.js b/plugins/styleguide/assets/javascripts/discourse/components/toggle-color-mode.js
index e06f93cff84..3e33769cd36 100644
--- a/plugins/styleguide/assets/javascripts/discourse/components/toggle-color-mode.js
+++ b/plugins/styleguide/assets/javascripts/discourse/components/toggle-color-mode.js
@@ -10,19 +10,33 @@ function colorSchemeOverride(type) {
   const lightScheme = document.querySelector("link.light-scheme");
   const darkScheme = document.querySelector("link.dark-scheme");
 
-  if (!lightScheme || !darkScheme) {
+  if (!lightScheme && !darkScheme) {
     return;
   }
 
   switch (type) {
     case DARK:
+      lightScheme.origMedia = lightScheme.media;
       lightScheme.media = "none";
+      darkScheme.origMedia = darkScheme.media;
       darkScheme.media = "all";
       break;
     case LIGHT:
+      lightScheme.origMedia = lightScheme.media;
       lightScheme.media = "all";
+      darkScheme.origMedia = darkScheme.media;
       darkScheme.media = "none";
       break;
+    default:
+      if (lightScheme.origMedia) {
+        lightScheme.media = lightScheme.origMedia;
+        lightScheme.removeAttribute("origMedia");
+      }
+      if (darkScheme.origMedia) {
+        darkScheme.media = darkScheme.origMedia;
+        darkScheme.removeAttribute("origMedia");
+      }
+      break;
   }
 }