diff --git a/apps/comments-ui/src/App.js b/apps/comments-ui/src/App.js
index dbd5e78d72..286e47afde 100644
--- a/apps/comments-ui/src/App.js
+++ b/apps/comments-ui/src/App.js
@@ -23,13 +23,13 @@ function AuthFrame({adminUrl, onLoad}) {
     );
 }
 
-function CommentsBoxContainer({done, colorScheme, avatarSaturation}) {
+function CommentsBoxContainer({done}) {
     if (!done) {
         return null;
     }
     return (
         <ShadowRoot>
-            <CommentsBox colorScheme={colorScheme} avatarSaturation={avatarSaturation} />
+            <CommentsBox />
         </ShadowRoot>
     );
 }
@@ -276,6 +276,9 @@ export default class App extends React.Component {
             comments,
             pagination,
             postId,
+            colorScheme: this.props.colorScheme,
+            avatarSaturation: this.props.avatarSaturation,
+            accentColor: this.props.accentColor,
             dispatchAction: (_action, data) => this.dispatchAction(_action, data),
             
             /**
@@ -297,7 +300,7 @@ export default class App extends React.Component {
         return (
             <SentryErrorBoundary dsn={this.props.sentryDsn}>
                 <AppContext.Provider value={this.getContextFromState()}>
-                    <CommentsBoxContainer done={done} colorScheme={this.props.colorScheme} avatarSaturation={this.props.avatarSaturation} />
+                    <CommentsBoxContainer done={done} />
                     <AuthFrame adminUrl={this.props.adminUrl} onLoad={this.initSetup.bind(this)}/>
                 </AppContext.Provider>
             </SentryErrorBoundary>
diff --git a/apps/comments-ui/src/components/Comment.js b/apps/comments-ui/src/components/Comment.js
index 85a047e043..97c8286392 100644
--- a/apps/comments-ui/src/components/Comment.js
+++ b/apps/comments-ui/src/components/Comment.js
@@ -21,7 +21,7 @@ const Comment = (props) => {
         setIsInReplyMode(current => !current);
     };
 
-    const {admin} = useContext(AppContext);
+    const {admin, avatarSaturation} = useContext(AppContext);
     const comment = props.comment;
     const hasReplies = comment.replies && comment.replies.length > 0;
     const isNotPublished = comment.status !== 'published';
@@ -45,7 +45,7 @@ const Comment = (props) => {
                 <div className={`flex flex-col ${hasReplies ? 'mb-4' : 'mb-12'}`}>
                     <div>
                         <div className="flex justify-start items-center">
-                            <Avatar comment={comment} saturation={props.avatarSaturation} />
+                            <Avatar comment={comment} saturation={avatarSaturation} />
                             <div className="ml-3">
                                 <h4 className="text-lg font-sans font-semibold mb-1 tracking-tight dark:text-[rgba(255,255,255,0.85)]">{comment.member.name}</h4>
                             </div>
@@ -71,12 +71,12 @@ const Comment = (props) => {
                     leaveTo="opacity-0"
                 >
                     <div className="ml-14 my-10">
-                        <Form parent={comment} toggle={toggleReplyMode} avatarSaturation={props.avatarSaturation} isReply={true} />
+                        <Form parent={comment} toggle={toggleReplyMode} isReply={true} />
                     </div>
                 </Transition>
                 {hasReplies && 
                     <div className="ml-14 mt-10">
-                        <Replies comment={comment} avatarSaturation={props.avatarSaturation} />
+                        <Replies comment={comment} />
                     </div>
                 }
             </>
diff --git a/apps/comments-ui/src/components/CommentsBox.js b/apps/comments-ui/src/components/CommentsBox.js
index 7f4f2e5c18..f900f1a29e 100644
--- a/apps/comments-ui/src/components/CommentsBox.js
+++ b/apps/comments-ui/src/components/CommentsBox.js
@@ -31,9 +31,9 @@ class CommentsBox extends React.Component {
     }
 
     darkMode() {
-        if (this.props.colorScheme === 'light') {
+        if (this.context.colorScheme === 'light') {
             return false;
-        } else if (this.props.colorScheme === 'dark') {
+        } else if (this.context.colorScheme === 'dark') {
             return true;
         } else {
             const containerColor = getComputedStyle(document.querySelector('#ghost-comments-root').parentNode).getPropertyValue('color');
@@ -48,7 +48,7 @@ class CommentsBox extends React.Component {
     }
 
     render() {
-        const comments = !this.context.comments ? 'Loading...' : this.context.comments.slice().reverse().map(comment => <Comment comment={comment} key={comment.id} avatarSaturation={this.props.avatarSaturation} />);
+        const comments = !this.context.comments ? 'Loading...' : this.context.comments.slice().reverse().map(comment => <Comment comment={comment} key={comment.id} avatarSaturation={this.context.avatarSaturation} />);
 
         const containerClass = this.darkMode() ? 'dark' : '';
         const commentsCount = comments.length;
@@ -60,7 +60,7 @@ class CommentsBox extends React.Component {
                     {comments}
                 </div>
                 <div>
-                    { this.context.member ? <Form commentsCount={commentsCount} avatarSaturation={this.props.avatarSaturation} /> : <NotSignedInBox /> }
+                    { this.context.member ? <Form commentsCount={commentsCount} /> : <NotSignedInBox /> }
                 </div>
             </section>
         );
diff --git a/apps/comments-ui/src/components/Form.js b/apps/comments-ui/src/components/Form.js
index 35434aa8e1..07be331400 100644
--- a/apps/comments-ui/src/components/Form.js
+++ b/apps/comments-ui/src/components/Form.js
@@ -6,7 +6,7 @@ import {useEditor, EditorContent} from '@tiptap/react';
 import {getEditorConfig} from '../utils/editor';
 
 const Form = (props) => {
-    const {member, postId, dispatchAction, onAction} = useContext(AppContext);
+    const {member, postId, dispatchAction, onAction, avatarSaturation} = useContext(AppContext);
 
     let config;
     if (props.isReply) {
@@ -128,7 +128,7 @@ const Form = (props) => {
                     </div>
                 </div>
                 <div className="flex mb-1 justify-start items-center absolute top-[4px] left-0">
-                    <Avatar saturation={props.avatarSaturation} />
+                    <Avatar saturation={avatarSaturation} />
                     <Transition
                         show={focused}
                         enter="transition duration-500 ease-in-out"
diff --git a/apps/comments-ui/src/components/Replies.js b/apps/comments-ui/src/components/Replies.js
index 145422fbd1..4c8627665f 100644
--- a/apps/comments-ui/src/components/Replies.js
+++ b/apps/comments-ui/src/components/Replies.js
@@ -5,7 +5,7 @@ const Replies = (props) => {
 
     return (
         <div>
-            {comment.replies.map((reply => <Comment comment={reply} parent={comment} key={reply.id} isReply={true} avatarSaturation={props.avatarSaturation} />))}
+            {comment.replies.map((reply => <Comment comment={reply} parent={comment} key={reply.id} isReply={true} />))}
         </div>
     );
 };