Move theming information from app.shell to body.

This namespaces the dataset attributes, so is a breaking change for users using these names in their CSS styles.

packages/application/style/scrollbar.css

@@ -8,14 +8,14 @@
  */
 
 /* use standard opaque scrollbars for most nodes */
-div.jp-LabShell[data-theme-scrollbars='true'] {
+div.jp-LabShell[data-jp-theme-scrollbars='true'] {
   scrollbar-color: rgb(var(--jp-scrollbar-thumb-color))
     var(--jp-scrollbar-background-color);
 }
 
 /* for code nodes, use a transparent style of scrollbar */
-[data-theme-scrollbars='true'] .CodeMirror-hscrollbar,
-[data-theme-scrollbars='true'] .CodeMirror-vscrollbar {
+[data-jp-theme-scrollbars='true'] .CodeMirror-hscrollbar,
+[data-jp-theme-scrollbars='true'] .CodeMirror-vscrollbar {
   scrollbar-color: rgba(var(--jp-scrollbar-thumb-color), 0.5) transparent;
 }
 
@@ -25,26 +25,26 @@ div.jp-LabShell[data-theme-scrollbars='true'] {
 
 /* use standard opaque scrollbars for most nodes */
 
-[data-theme-scrollbars='true'] ::-webkit-scrollbar,
-[data-theme-scrollbars='true'] ::-webkit-scrollbar-corner {
+[data-jp-theme-scrollbars='true'] ::-webkit-scrollbar,
+[data-jp-theme-scrollbars='true'] ::-webkit-scrollbar-corner {
   background: var(--jp-scrollbar-background-color);
 }
 
-[data-theme-scrollbars='true'] ::-webkit-scrollbar-thumb {
+[data-jp-theme-scrollbars='true'] ::-webkit-scrollbar-thumb {
   background: rgb(var(--jp-scrollbar-thumb-color));
   border: var(--jp-scrollbar-thumb-margin) solid transparent;
   background-clip: content-box;
   border-radius: var(--jp-scrollbar-thumb-radius);
 }
 
-[data-theme-scrollbars='true'] ::-webkit-scrollbar-track:horizontal {
+[data-jp-theme-scrollbars='true'] ::-webkit-scrollbar-track:horizontal {
   border-left: var(--jp-scrollbar-endpad) solid
     var(--jp-scrollbar-background-color);
   border-right: var(--jp-scrollbar-endpad) solid
     var(--jp-scrollbar-background-color);
 }
 
-[data-theme-scrollbars='true'] ::-webkit-scrollbar-track:vertical {
+[data-jp-theme-scrollbars='true'] ::-webkit-scrollbar-track:vertical {
   border-top: var(--jp-scrollbar-endpad) solid
     var(--jp-scrollbar-background-color);
   border-bottom: var(--jp-scrollbar-endpad) solid
@@ -53,29 +53,32 @@ div.jp-LabShell[data-theme-scrollbars='true'] {
 
 /* for code nodes, use a transparent style of scrollbar */
 
-[data-theme-scrollbars='true'] .CodeMirror-hscrollbar::-webkit-scrollbar,
-[data-theme-scrollbars='true'] .CodeMirror-vscrollbar::-webkit-scrollbar,
-[data-theme-scrollbars='true'] .CodeMirror-hscrollbar::-webkit-scrollbar-corner,
-[data-theme-scrollbars='true']
+[data-jp-theme-scrollbars='true'] .CodeMirror-hscrollbar::-webkit-scrollbar,
+[data-jp-theme-scrollbars='true'] .CodeMirror-vscrollbar::-webkit-scrollbar,
+[data-jp-theme-scrollbars='true']
+  .CodeMirror-hscrollbar::-webkit-scrollbar-corner,
+[data-jp-theme-scrollbars='true']
   .CodeMirror-vscrollbar::-webkit-scrollbar-corner {
   background-color: transparent;
 }
 
-[data-theme-scrollbars='true'] .CodeMirror-hscrollbar::-webkit-scrollbar-thumb,
-[data-theme-scrollbars='true'] .CodeMirror-vscrollbar::-webkit-scrollbar-thumb {
+[data-jp-theme-scrollbars='true']
+  .CodeMirror-hscrollbar::-webkit-scrollbar-thumb,
+[data-jp-theme-scrollbars='true']
+  .CodeMirror-vscrollbar::-webkit-scrollbar-thumb {
   background: rgba(var(--jp-scrollbar-thumb-color), 0.5);
   border: var(--jp-scrollbar-thumb-margin) solid transparent;
   background-clip: content-box;
   border-radius: var(--jp-scrollbar-thumb-radius);
 }
 
-[data-theme-scrollbars='true']
+[data-jp-theme-scrollbars='true']
   .CodeMirror-hscrollbar::-webkit-scrollbar-track:horizontal {
   border-left: var(--jp-scrollbar-endpad) solid transparent;
   border-right: var(--jp-scrollbar-endpad) solid transparent;
 }
 
-[data-theme-scrollbars='true']
+[data-jp-theme-scrollbars='true']
   .CodeMirror-vscrollbar::-webkit-scrollbar-track:vertical {
   border-top: var(--jp-scrollbar-endpad) solid transparent;
   border-bottom: var(--jp-scrollbar-endpad) solid transparent;

packages/apputils-extension/src/index.ts

@@ -130,13 +130,15 @@ const themes: JupyterFrontEndPlugin<IThemeManager> = {
     // Set data attributes on the application shell for the current theme.
     manager.themeChanged.connect((sender, args) => {
       currentTheme = args.newValue;
-      app.shell.dataset.themeLight = String(manager.isLight(currentTheme));
-      app.shell.dataset.themeName = currentTheme;
+      document.body.dataset.jpThemeLight = String(
+        manager.isLight(currentTheme)
+      );
+      document.body.dataset.jpThemeName = currentTheme;
       if (
-        app.shell.dataset.themeScrollbars !==
+        document.body.dataset.jpThemeScrollbars !==
         String(manager.themeScrollbars(currentTheme))
       ) {
-        app.shell.dataset.themeScrollbars = String(
+        document.body.dataset.jpThemeScrollbars = String(
           manager.themeScrollbars(currentTheme)
         );
       }

packages/notebook/style/status.css

@@ -7,11 +7,11 @@
  * icons for light themes
  */
 
-[data-theme-light='true'] .jp-StatusItem-untrusted {
+[data-jp-theme-light='true'] .jp-StatusItem-untrusted {
   background-image: url('./not-trusted-icon-light.svg');
 }
 
-[data-theme-light='true'] .jp-StatusItem-trusted {
+[data-jp-theme-light='true'] .jp-StatusItem-trusted {
   background-image: url('./trusted-icon-light.svg');
 }
 
@@ -19,10 +19,10 @@
  * icons for dark themes
  */
 
-[data-theme-light='false'] .jp-StatusItem-untrusted {
+[data-jp-theme-light='false'] .jp-StatusItem-untrusted {
   background-image: url('./not-trusted-icon-dark.svg');
 }
 
-[data-theme-light='false'] .jp-StatusItem-trusted {
+[data-jp-theme-light='false'] .jp-StatusItem-trusted {
   background-image: url('./trusted-icon-dark.svg');
 }

packages/rendermime/style/base.css

@@ -418,16 +418,16 @@
 }
 
 /* Change color behind transparent images if they need it... */
-[data-theme-light='false'] .jp-RenderedImage img.jp-needs-light-background {
+[data-jp-theme-light='false'] .jp-RenderedImage img.jp-needs-light-background {
   background-color: var(--jp-inverse-layout-color1);
 }
-[data-theme-light='true'] .jp-RenderedImage img.jp-needs-dark-background {
+[data-jp-theme-light='true'] .jp-RenderedImage img.jp-needs-dark-background {
   background-color: var(--jp-inverse-layout-color1);
 }
 /* ...or leave it untouched if they don't */
-[data-theme-light='false'] .jp-RenderedImage img.jp-needs-dark-background {
+[data-jp-theme-light='false'] .jp-RenderedImage img.jp-needs-dark-background {
 }
-[data-theme-light='true'] .jp-RenderedImage img.jp-needs-light-background {
+[data-jp-theme-light='true'] .jp-RenderedImage img.jp-needs-light-background {
 }
 
 .jp-RenderedHTMLCommon img,

packages/statusbar/style/base.css

@@ -11,11 +11,11 @@
  * icons for light themes
  */
 
-[data-theme-light='true'] .jp-StatusItem-kernel {
+[data-jp-theme-light='true'] .jp-StatusItem-kernel {
   background-image: url('./kernel-icon-light.svg');
 }
 
-[data-theme-light='true'] .jp-StatusItem-terminal {
+[data-jp-theme-light='true'] .jp-StatusItem-terminal {
   background-image: url('./terminal-icon-light.svg');
 }
 
@@ -23,10 +23,10 @@
  * icons for dark themes
  */
 
-[data-theme-light='false'] .jp-StatusItem-kernel {
+[data-jp-theme-light='false'] .jp-StatusItem-kernel {
   background-image: url('./kernel-icon-dark.svg');
 }
 
-[data-theme-light='false'] .jp-StatusItem-terminal {
+[data-jp-theme-light='false'] .jp-StatusItem-terminal {
   background-image: url('./terminal-icon-dark.svg');
 }