diff --git a/packages/theme/src/theme-engine/types.ts b/packages/theme/src/theme-engine/types.ts
index 6b9a08486..fcc2da2c4 100644
--- a/packages/theme/src/theme-engine/types.ts
+++ b/packages/theme/src/theme-engine/types.ts
@@ -132,6 +132,10 @@ export type ThemeScopes = {
    * Scope specific to the Editor Toolbar.
    */
   editorToolbar?: PartialVariants;
+  /**
+   * Scope for all the Editor side bars include note properties, attachment previews etc.
+   */
+  editorSidebar?: PartialVariants;
   /**
    * Scope for all the dialogs in the app.
    */
@@ -268,15 +272,16 @@ export const StaticColors = {
   white: "#ffffff"
 } as const;
 
-export const ThemeScopeKeys: readonly (keyof ThemeScopes)[] = [
+export const THEME_SCOPES: readonly (keyof ThemeScopes)[] = [
   "base",
   "statusBar",
   "list",
   "editor",
+  "editorToolbar",
+  "editorSidebar",
   "dialog",
   "navigationMenu",
   "contextMenu",
-  "editorToolbar",
   "sheet"
 ];
 
diff --git a/packages/theme/src/theme-engine/utils.ts b/packages/theme/src/theme-engine/utils.ts
index ae8b45dee..193449d97 100644
--- a/packages/theme/src/theme-engine/utils.ts
+++ b/packages/theme/src/theme-engine/utils.ts
@@ -22,7 +22,7 @@ import {
   PreviewColors,
   StaticColors,
   ThemeDefinition,
-  ThemeScopeKeys,
+  THEME_SCOPES,
   ThemeScopes,
   Variants,
   VariantsWithStaticColors
@@ -64,7 +64,7 @@ export function getPreviewColors(theme: ThemeDefinition): PreviewColors {
 
 export function themeToCSS(theme: ThemeDefinition) {
   const css: string[] = [];
-  for (const scopeKey of ThemeScopeKeys) {
+  for (const scopeKey of THEME_SCOPES) {
     const scope = theme.scopes[scopeKey] || {};
     const variants = buildVariants(scopeKey, theme, scope);