diff --git a/app/client/ui/HomeLeftPane.ts b/app/client/ui/HomeLeftPane.ts
index 057e5ac1..1f0adbb6 100644
--- a/app/client/ui/HomeLeftPane.ts
+++ b/app/client/ui/HomeLeftPane.ts
@@ -247,7 +247,6 @@ export const cssEditorInput = styled(transientInput, `
   height: 24px;
   flex: 1 1 0px;
   min-width: 0px;
-  color: initial;
   background-color: ${theme.inputBg};
   margin-right: 16px;
   font-size: inherit;
diff --git a/app/client/ui/RightPanel.ts b/app/client/ui/RightPanel.ts
index d65dc665..d2ad2366 100644
--- a/app/client/ui/RightPanel.ts
+++ b/app/client/ui/RightPanel.ts
@@ -690,7 +690,7 @@ const cssTopBarIcon = styled(icon, `
   margin: 16px;
   height: 16px;
   width: 16px;
-  background-color: vars(--icon-color);
+  background-color: var(--icon-color);
 `);
 
 const cssHoverCircle = styled('div', `
@@ -705,14 +705,14 @@ const cssHoverCircle = styled('div', `
   justify-content: center;
 
   &:hover {
-    background-color: ${theme.rightPanelTabCloseButtonHoverBg};
+    background-color: ${theme.rightPanelTabButtonHoverBg};
   }
 `);
 
 const cssHoverIcon = styled(icon, `
   height: 16px;
   width: 16px;
-  background-color: vars(--icon-color);
+  background-color: var(--icon-color);
 `);
 
 const cssSubTabContainer = styled('div', `
diff --git a/app/client/ui/TopBar.ts b/app/client/ui/TopBar.ts
index 98550084..f56fea09 100644
--- a/app/client/ui/TopBar.ts
+++ b/app/client/ui/TopBar.ts
@@ -118,6 +118,7 @@ function buildShowDiscussionButton(pageModel: DocPageModel) {
   return cssHoverCircle({ style: `margin: 5px; position: relative;` },
     cssTopBarBtn('Chat', dom.cls('tour-share-icon')),
     cssBeta('Beta'),
+    hoverTooltip('Comments', {key: 'topBarBtnTooltip'}),
     testId('open-discussion'),
     dom.on('click', () => pageModel.gristDoc.get()!.showTool('discussion'))
   );
diff --git a/app/client/ui2018/cssVars.ts b/app/client/ui2018/cssVars.ts
index 19cd6812..45203e60 100644
--- a/app/client/ui2018/cssVars.ts
+++ b/app/client/ui2018/cssVars.ts
@@ -414,7 +414,7 @@ export const theme = {
     colors.light),
   rightPanelTabSelectedBg: new CustomProp('theme-right-panel-tab-selected-bg', undefined,
     colors.lightGreen),
-  rightPanelTabCloseButtonHoverBg: new CustomProp('theme-right-panel-tab-close-button-hover-bg',
+  rightPanelTabButtonHoverBg: new CustomProp('theme-right-panel-tab-button-hover-bg',
     undefined, colors.darkGreen),
   rightPanelSubtabFg: new CustomProp('theme-right-panel-subtab-fg', undefined, colors.lightGreen),
   rightPanelSubtabSelectedFg: new CustomProp('theme-right-panel-subtab-selected-fg', undefined,
@@ -651,6 +651,17 @@ export const theme = {
   chartLegendBg: new CustomProp('theme-chart-legend-bg', undefined, '#FFFFFF80'),
   chartXAxis: new CustomProp('theme-chart-x-axis', undefined, '#444'),
   chartYAxis: new CustomProp('theme-chart-y-axis', undefined, '#444'),
+
+  /* Comments */
+  commentsPopupHeaderBg: new CustomProp('theme-comments-popup-header-bg', undefined,
+    colors.lightGrey),
+  commentsPopupBodyBg: new CustomProp('theme-comments-popup-body-bg', undefined, 'white'),
+  commentsPopupBorder: new CustomProp('theme-comments-popup-border', undefined, colors.darkGrey),
+  commentsUserNameFg: new CustomProp('theme-comments-user-name-fg', undefined, colors.darkText),
+  commentsPanelTopicBg: new CustomProp('theme-comments-panel-topic-bg', undefined, 'white'),
+  commentsPanelTopicBorder: new CustomProp('theme-comments-panel-topic-border', undefined, '#ccc'),
+  commentsPanelResolvedTopicBg: new CustomProp('theme-comments-panel-resolved-topic-bg', undefined,
+    vars.labelActiveBg),
 };
 
 const cssColors = values(colors).map(v => v.decl()).join('\n');
diff --git a/app/client/widgets/DiscussionEditor.ts b/app/client/widgets/DiscussionEditor.ts
index 54e80de3..23ce7805 100644
--- a/app/client/widgets/DiscussionEditor.ts
+++ b/app/client/widgets/DiscussionEditor.ts
@@ -8,7 +8,7 @@ import {RowSource, RowWatcher} from 'app/client/models/rowset';
 import {createUserImage} from 'app/client/ui/UserImage';
 import {basicButton, primaryButton, textButton} from 'app/client/ui2018/buttons';
 import {labeledSquareCheckbox} from 'app/client/ui2018/checkbox';
-import {colors, vars} from 'app/client/ui2018/cssVars';
+import {theme, vars} from 'app/client/ui2018/cssVars';
 import {icon} from 'app/client/ui2018/icons';
 import {menu, menuItem} from 'app/client/ui2018/menus';
 import {CellInfoType} from 'app/common/gristTypes';
@@ -446,9 +446,8 @@ class CommentView extends Disposable {
         dom.maybe(use => !use(this.isEditing),
           () => dom.domComputed(comment.hidden, (hidden) => {
             if (hidden) {
-              return dom('div',
+              return cssCommentCensored(
                 "CENSORED",
-                {style: 'margin-top: 4px'},
                 testId('comment-text'),
               );
             }
@@ -1095,7 +1094,7 @@ const cssDropdownMenu = styled('div', `
 `);
 
 const cssReplyBox = styled(cssCommonPadding, `
-  border-top: 1px solid ${colors.mediumGrey};
+  border-top: 1px solid ${theme.commentsPopupBorder};
 `);
 
 const cssCommentEntry = styled('div', `
@@ -1130,7 +1129,9 @@ const cssTextArea = styled('textarea', `
   min-height: 5em;
   border-radius: 3px;
   padding: 4px 6px;
-  border: 1px solid ${colors.darkGrey};
+  color: ${theme.inputFg};
+  background-color: ${theme.inputBg};
+  border: 1px solid ${theme.inputBorder};
   outline: none;
   width: 100%;
   resize: none;
@@ -1139,16 +1140,20 @@ const cssTextArea = styled('textarea', `
     min-height: 28px;
     height: 28px;
   }
+  &::placeholder {
+    color: ${theme.inputPlaceholderFg};
+  }
 `);
 
 const cssHeaderBox = styled('div', `
-  background-color: ${colors.lightGrey};
+  color: ${theme.text};
+  background-color: ${theme.commentsPopupHeaderBg};
   padding: 12px; /* 12px * 2 + 24px (size of the icon) == 48px in height */
   padding-right: 16px;
   display: flex;
   gap: 8px;
   &-border {
-    border-bottom: 1px solid ${colors.mediumGrey};
+    border-bottom: 1px solid ${theme.commentsPopupBorder};
   }
 `);
 
@@ -1156,9 +1161,9 @@ const cssTopic = styled('div', `
   position: relative;
   display: flex;
   flex-direction: column;
-  border: 1px solid #ccc;
+  border: 1px solid ${theme.commentsPopupBorder};
   border-radius: 4px;
-  background-color: ${colors.light};
+  background-color: ${theme.commentsPopupBodyBg};
   box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
   z-index: 100;
   width: 325px;
@@ -1166,7 +1171,7 @@ const cssTopic = styled('div', `
   outline: none;
   max-height: inherit;
   &-disabled {
-    background-color: ${vars.labelActiveBg}
+    background-color: ${theme.commentsPanelResolvedTopicBg}
   }
   &-panel {
     width: unset;
@@ -1178,14 +1183,14 @@ const cssTopic = styled('div', `
 `);
 
 const cssDiscussionWrapper = styled('div', `
-  border-bottom: 1px solid ${colors.darkGrey};
+  border-bottom: 1px solid ${theme.commentsPopupBorder};
   &:last-child {
     border-bottom: none;
   }
   .${cssTopic.className}-panel & {
-    border: 1px solid #ccc;
+    border: 1px solid ${theme.commentsPanelTopicBorder};
     border-radius: 4px;
-    background-color: ${colors.light};
+    background-color: ${theme.commentsPanelTopicBg};
     margin-bottom: 4px;
   }
 `);
@@ -1195,15 +1200,21 @@ const cssDiscussion = styled('div', `
   flex-direction: column;
   padding: 16px;
   &-resolved {
-    background-color: ${vars.labelActiveBg};
+    background-color: ${theme.commentsPanelResolvedTopicBg};
     cursor: pointer;
   }
   &-resolved * {
-    color: ${colors.slate} !important;
+    color: ${theme.lightText} !important;
   }
 `);
 
+const cssCommentCensored = styled('div', `
+  color: ${theme.text};
+  margin-top: 4px;
+`);
+
 const cssCommentPre = styled('pre', `
+  color: ${theme.text};
   padding: 0px;
   font-size: revert;
   border: 0px;
@@ -1232,7 +1243,7 @@ const cssCommentReplyWrapper = styled('div', `
 `);
 
 const cssComment = styled('div', `
-  border-bottom: 1px solid ${colors.mediumGrey};
+  border-bottom: 1px solid ${theme.commentsPopupBorder};
   .${cssCommentList.className} &:last-child {
     border-bottom: 0px;
   }
@@ -1268,9 +1279,9 @@ const cssIconButton = styled('div', `
   line-height: 0px;
   border-radius: 3px;
   cursor: pointer;
-  --icon-color: ${colors.slate};
+  --icon-color: ${theme.controlSecondaryFg};
   &:hover, &.weasel-popup-open {
-    background-color: ${colors.darkGrey};
+    background-color: ${theme.controlSecondaryHoverBg};
   }
 `);
 
@@ -1283,9 +1294,9 @@ const cssIconButtonMenu = styled('div', `
   line-height: 0px;
   border-radius: 3px;
   cursor: pointer;
-  --icon-color: ${colors.light};
+  --icon-color: ${theme.rightPanelTabSelectedFg};
   &:hover, &.weasel-popup-open {
-    background-color: ${colors.darkGreen};
+    background-color: ${theme.rightPanelTabButtonHoverBg};
   }
 `);
 
@@ -1297,7 +1308,7 @@ const cssReplyButton = styled(textButton, `
 `);
 
 const cssTime = styled('div', `
-  color: ${colors.slate};
+  color: ${theme.lightText};
   font-size: ${vars.smallFontSize};
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -1310,7 +1321,7 @@ const cssNick = styled('div', `
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
-  color: ${colors.darkText};
+  color: ${theme.commentsUserNameFg};
   &-small {
     font-size: 12px;
   }
@@ -1325,15 +1336,15 @@ const cssCloseButton = styled('div', `
   border-radius: 4px;
   line-height: 1px;
   cursor: pointer;
-  --icon-color: ${colors.slate};
+  --icon-color: ${theme.controlSecondaryFg};
   &:hover {
-    background-color: ${colors.mediumGreyOpaque};
+    background-color: ${theme.hover};
   }
 `);
 
 const cssHoverButton = styled(cssCloseButton, `
   &:hover {
-    --icon-color: ${colors.lightGreen};
+    --icon-color: ${theme.controlPrimaryBg};
   }
 `);
 
@@ -1360,11 +1371,11 @@ function trigger(element: Element, name: string, args?: any) {
 
 const cssResolvedBlock = styled('div', `
   margin-top: 5px;
-  --icon-color: ${colors.dark};
+  --icon-color: ${theme.text};
 `);
 
 const cssResolvedText = styled('span', `
-  color: ${colors.dark};
+  color: ${theme.text};
   font-size: ${vars.smallFontSize};
   margin-left: 5px;
 `);
diff --git a/app/common/ThemePrefs-ti.ts b/app/common/ThemePrefs-ti.ts
index 550a4a0a..795e3f24 100644
--- a/app/common/ThemePrefs-ti.ts
+++ b/app/common/ThemePrefs-ti.ts
@@ -185,7 +185,7 @@ export const ThemeColors = t.iface([], {
   "right-panel-tab-hover-bg": "string",
   "right-panel-tab-selected-fg": "string",
   "right-panel-tab-selected-bg": "string",
-  "right-panel-tab-close-button-hover-bg": "string",
+  "right-panel-tab-button-hover-bg": "string",
   "right-panel-subtab-fg": "string",
   "right-panel-subtab-selected-fg": "string",
   "right-panel-subtab-selected-underline": "string",
@@ -321,6 +321,13 @@ export const ThemeColors = t.iface([], {
   "chart-legend-bg": "string",
   "chart-x-axis": "string",
   "chart-y-axis": "string",
+  "comments-popup-header-bg": "string",
+  "comments-popup-body-bg": "string",
+  "comments-popup-border": "string",
+  "comments-user-name-fg": "string",
+  "comments-panel-topic-bg": "string",
+  "comments-panel-topic-border": "string",
+  "comments-panel-resolved-topic-bg": "string",
 });
 
 const exportedTypeSuite: t.ITypeSuite = {
diff --git a/app/common/ThemePrefs.ts b/app/common/ThemePrefs.ts
index 5036d7d4..fbee9965 100644
--- a/app/common/ThemePrefs.ts
+++ b/app/common/ThemePrefs.ts
@@ -239,7 +239,7 @@ export interface ThemeColors {
   'right-panel-tab-hover-bg': string;
   'right-panel-tab-selected-fg': string;
   'right-panel-tab-selected-bg': string;
-  'right-panel-tab-close-button-hover-bg': string;
+  'right-panel-tab-button-hover-bg': string;
   'right-panel-subtab-fg': string;
   'right-panel-subtab-selected-fg': string;
   'right-panel-subtab-selected-underline': string;
@@ -421,6 +421,15 @@ export interface ThemeColors {
   'chart-legend-bg': string;
   'chart-x-axis': string;
   'chart-y-axis': string;
+
+  /* Comments */
+  'comments-popup-header-bg': string;
+  'comments-popup-body-bg': string;
+  'comments-popup-border': string;
+  'comments-user-name-fg': string;
+  'comments-panel-topic-bg': string;
+  'comments-panel-topic-border': string;
+  'comments-panel-resolved-topic-bg': string;
 }
 
 export const ThemePrefsChecker = createCheckers(ThemePrefsTI).ThemePrefs as CheckerT<ThemePrefs>;
diff --git a/app/common/themes/GristDark.ts b/app/common/themes/GristDark.ts
index 29eaeeda..ac34c106 100644
--- a/app/common/themes/GristDark.ts
+++ b/app/common/themes/GristDark.ts
@@ -218,7 +218,7 @@ export const GristDark: ThemeColors = {
   'right-panel-tab-hover-bg': 'rgba(111,111,117,0.6)',
   'right-panel-tab-selected-fg': '#FFFFFF',
   'right-panel-tab-selected-bg': '#1DA270',
-  'right-panel-tab-close-button-hover-bg': '#157A54',
+  'right-panel-tab-button-hover-bg': '#157A54',
   'right-panel-subtab-fg': '#1DA270',
   'right-panel-subtab-selected-fg': '#EFEFEF',
   'right-panel-subtab-selected-underline': '#1DA270',
@@ -400,4 +400,13 @@ export const GristDark: ThemeColors = {
   'chart-legend-bg': '#32323F80',
   'chart-x-axis': '#A4A4A4',
   'chart-y-axis': '#A4A4A4',
+
+  /* Comments */
+  'comments-popup-header-bg': '#262633',
+  'comments-popup-body-bg': '#32323F',
+  'comments-popup-border': '#69697D',
+  'comments-user-name-fg': '#DFDFDF',
+  'comments-panel-topic-bg': '#32323F',
+  'comments-panel-topic-border': '#555563',
+  'comments-panel-resolved-topic-bg': '#262634',
 };
diff --git a/app/common/themes/GristLight.ts b/app/common/themes/GristLight.ts
index bcdd161f..4838e37d 100644
--- a/app/common/themes/GristLight.ts
+++ b/app/common/themes/GristLight.ts
@@ -218,7 +218,7 @@ export const GristLight: ThemeColors = {
   'right-panel-tab-hover-bg': 'rgba(217,217,217,0.6)',
   'right-panel-tab-selected-fg': '#FFFFFF',
   'right-panel-tab-selected-bg': '#16B378',
-  'right-panel-tab-close-button-hover-bg': '#009058',
+  'right-panel-tab-button-hover-bg': '#009058',
   'right-panel-subtab-fg': '#16B378',
   'right-panel-subtab-selected-fg': '#262633',
   'right-panel-subtab-selected-underline': '#16B378',
@@ -400,4 +400,13 @@ export const GristLight: ThemeColors = {
   'chart-legend-bg': '#FFFFFF80',
   'chart-x-axis': '#444',
   'chart-y-axis': '#444',
+
+  /* Comments */
+  'comments-popup-header-bg': '#F7F7F7',
+  'comments-popup-body-bg': 'white',
+  'comments-popup-border': '#D9D9D9',
+  'comments-user-name-fg': '#494949',
+  'comments-panel-topic-bg': 'white',
+  'comments-panel-topic-border': '#ccc',
+  'comments-panel-resolved-topic-bg': '#F0F0F0',
 };