scope css under name space excalidraw (#1983)

public/index.html

@@ -81,7 +81,6 @@
       href="manifest.json"
       style="--pwacompat-splash-font: 24px Virgil"
     />
-
     <% if (process.env.REACT_APP_INCLUDE_GTAG === 'true') { %>
     <script
       async
@@ -99,6 +98,17 @@
 
     <!-- FIXME: remove this when we update CRA (fix SW caching) -->
     <style>
+      body {
+        margin: 0;
+        --ui-font: system-ui, BlinkMacSystemFont, -apple-system, Segoe UI,
+          Roboto, Helvetica, Arial, sans-serif;
+        font-family: var(--ui-font);
+        -webkit-text-size-adjust: 100%;
+        user-select: none;
+        width: 100vw;
+        height: 100vh;
+      }
+
       /* http://www.eaglefonts.com/fg-virgil-ttf-131249.htm */
       @font-face {
         font-family: "Virgil";

src/components/App.tsx

@@ -757,10 +757,9 @@ class App extends React.Component<ExcalidrawProps, AppState> {
       });
     }
 
-    document.documentElement.classList.toggle(
+    document
-      "Appearance_dark",
+      .querySelector(".excalidraw")
-      this.state.appearance === "dark",
+      ?.classList.toggle("Appearance_dark", this.state.appearance === "dark");
-    );
 
     if (this.state.isCollaborating && !this.portal.socket) {
       this.initializeSocketClient({ showLoadingState: true });

src/components/Avatar.scss

@@ -1,5 +1,6 @@
 @import "../css/_variables";
 
+.excalidraw {
   .Avatar {
     width: 2.5rem;
     height: 2.5rem;
@@ -12,3 +13,4 @@
     font-size: 0.8rem;
     font-weight: 500;
   }
+}

src/components/ColorPicker.scss

@@ -1,14 +1,17 @@
 @import "open-color/open-color.scss";
 
+.excalidraw {
   .color-picker {
     background: var(--popup-background-color);
     border: 0px solid transparentize($oc-white, 0.75);
     box-shadow: transparentize($oc-black, 0.75) 0px 1px 4px;
     border-radius: 4px;
     position: absolute;
+
     :root[dir="ltr"] & {
       left: -5.5px;
     }
+
     :root[dir="rtl"] & {
       right: -5.5px;
     }
@@ -28,9 +31,11 @@
     border-color: transparent transparent var(--popup-background-color);
     position: absolute;
     top: -10px;
+
     :root[dir="ltr"] & {
       left: 12px;
     }
+
     :root[dir="rtl"] & {
       right: 12px;
     }
@@ -63,13 +68,13 @@
     border: 1px solid #ddd;
     background-color: currentColor !important;
     filter: var(--appearance-filter);
-}
 
-.color-picker-swatch:focus {
+    &:focus {
       /* TODO: only show the border when the color is too light to see as a shadow */
       box-shadow: 0 0 4px 1px currentColor;
       border-color: var(--select-highlight-color);
     }
+  }
 
   .color-picker-transparent {
     border-radius: 4px;
@@ -80,6 +85,7 @@
     bottom: 0px;
     left: 0px;
   }
+
   .color-picker-transparent,
   .color-picker-label-swatch {
     background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMUlEQVQ4T2NkYGAQYcAP3uCTZhw1gGGYhAGBZIA/nYDCgBDAm9BGDWAAJyRCgLaBCAAgXwixzAS0pgAAAABJRU5ErkJggg==")
@@ -90,21 +96,26 @@
     background: var(--input-border-color);
     height: 1.875rem;
     width: 1.875rem;
+
     :root[dir="ltr"] & {
       border-radius: 4px 0px 0px 4px;
     }
+
     :root[dir="rtl"] & {
       border-radius: 0px 4px 4px 0px;
     }
+
     color: var(--input-label-color);
     display: flex;
     align-items: center;
     justify-content: center;
     position: relative;
   }
+
   .color-input-container:focus-within .color-picker-hash {
     box-shadow: 0 0 0 2px var(--focus-highlight-color);
   }
+
   .color-input-container:focus-within .color-picker-hash::before,
   .color-input-container:focus-within .color-picker-hash::after {
     content: "";
@@ -113,20 +124,26 @@
     position: absolute;
     top: 0;
   }
+
   .color-input-container:focus-within .color-picker-hash::before {
     background: var(--input-border-color);
+
     :root[dir="ltr"] & {
       right: -1px;
     }
+
     :root[dir="rtl"] & {
       left: -1px;
     }
   }
+
   .color-input-container:focus-within .color-picker-hash::after {
     background: var(--input-background-color);
+
     :root[dir="ltr"] & {
       right: -2px;
     }
+
     :root[dir="rtl"] & {
       left: -2px;
     }
@@ -146,12 +163,15 @@
     outline: none;
     height: 1.75em;
     box-shadow: var(--input-border-color) 0px 0px 0px 1px inset;
+
     :root[dir="ltr"] & {
       border-radius: 0px 4px 4px 0px;
     }
+
     :root[dir="rtl"] & {
       border-radius: 4px 0px 0px 4px;
     }
+
     float: left;
     padding: 1px;
     padding-inline-start: 0.5em;
@@ -167,9 +187,8 @@
     overflow: hidden;
     background-color: transparent !important;
     filter: var(--appearance-filter);
-}
 
-.color-picker-label-swatch::after {
+    &:after {
       content: "";
       position: absolute;
       top: 0;
@@ -178,16 +197,20 @@
       height: 100%;
       background: var(--swatch-color);
     }
+  }
 
   .color-picker-keybinding {
     position: absolute;
     bottom: 2px;
+
     :root[dir="ltr"] & {
       right: 2px;
     }
+
     :root[dir="rtl"] & {
       left: 2px;
     }
+
     font-size: 0.7em;
   }
 
@@ -197,17 +220,22 @@
 
   .color-picker-type-elementBackground .color-picker-keybinding {
     color: #fff;
-  .Appearance_dark & {
-    color: #000;
-  }
   }
+
   .color-picker-swatch[aria-label="transparent"] .color-picker-keybinding {
     color: #aaa;
-  .Appearance_dark & {
-    color: #000;
-  }
   }
 
   .color-picker-type-elementStroke .color-picker-keybinding {
     color: #d4d4d4;
   }
+
+  &.Appearance_dark {
+    .color-picker-type-elementBackground .color-picker-keybinding {
+      color: #000;
+    }
+    .color-picker-swatch[aria-label="transparent"] .color-picker-keybinding {
+      color: #000;
+    }
+  }
+}

src/components/ContextMenu.scss

@@ -1,5 +1,6 @@
 @import "open-color/open-color.scss";
 
+.excalidraw {
   .context-menu {
     position: relative;
     border-radius: 4px;
@@ -38,3 +39,4 @@
   .context-menu-option:focus {
     z-index: 1;
   }
+}

src/components/ContextMenu.tsx

@@ -16,7 +16,15 @@ type Props = {
   left: number;
 };
 
-const ContextMenu = ({ options, onCloseRequest, top, left }: Props) => (
+const ContextMenu = ({ options, onCloseRequest, top, left }: Props) => {
+  const isDarkTheme = !!document
+    .querySelector(".excalidraw")
+    ?.classList.contains("Appearance_dark");
+  const wrapperClasses = `excalidraw ${
+    isDarkTheme ? "Appearance_dark Appearance_dark-background-none" : ""
+  }`;
+  return (
+    <div className={wrapperClasses}>
       <Popover
         onCloseRequest={onCloseRequest}
         top={top}
@@ -34,7 +42,9 @@ const ContextMenu = ({ options, onCloseRequest, top, left }: Props) => (
           ))}
         </ul>
       </Popover>
+    </div>
   );
+};
 
 const ContextMenuOption = ({ label, action }: ContextMenuOption) => (
   <button className="context-menu-option" onClick={action}>

src/components/Dialog.scss

@@ -1,5 +1,6 @@
 @import "../css/_variables";
 
+.excalidraw {
   .Dialog__title {
     display: grid;
     align-items: center;
@@ -23,6 +24,7 @@
       --inset-left: #{"max(var(--metric), var(--sal))"};
       --inset-right: #{"max(var(--metric), var(--sar))"};
     }
+
     .Dialog__title {
       grid-template-columns: calc(var(--space-factor) * 7) 1fr calc(
           var(--space-factor) * 7
@@ -42,9 +44,11 @@
       border-bottom: 1px solid var(--button-gray-2);
       z-index: 1;
     }
+
     .Dialog__titleContent {
       text-align: center;
     }
+
     .Dialog .Island {
       width: 100vw;
       height: 100%;
@@ -59,3 +63,4 @@
       order: -1;
     }
   }
+}

src/components/ExportDialog.scss

@@ -1,5 +1,6 @@
 @import "../css/_variables";
 
+.excalidraw {
   .ExportDialog__preview {
     --preview-padding: calc(var(--space-factor) * 4);
 
@@ -15,7 +16,7 @@
     max-height: 25rem;
   }
 
-.Appearance_dark .ExportDialog__preview canvas {
+  &.Appearance_dark .ExportDialog__preview canvas {
     filter: none;
   }
 
@@ -41,10 +42,12 @@
       display: flex;
       flex-direction: column;
     }
+
     .ExportDialog__actions {
       flex-direction: column;
       align-items: center;
     }
+
     .ExportDialog__actions > * {
       margin-bottom: calc(var(--space-factor) * 3);
     }
@@ -54,12 +57,15 @@
     .ExportDialog__preview canvas {
       max-height: 30vh;
     }
+
     .ExportDialog__dialog,
     .ExportDialog__dialog .Island {
       height: 100%;
       box-sizing: border-box;
     }
+
     .ExportDialog__dialog .Island {
       overflow-y: auto;
     }
   }
+}

src/components/FixedSideContainer.css

@@ -1,36 +0,0 @@
-.FixedSideContainer {
-  --margin: 0.25rem;
-  position: absolute;
-  pointer-events: none;
-}
-
-.FixedSideContainer > * {
-  pointer-events: all;
-}
-
-.FixedSideContainer_side_top {
-  left: var(--margin);
-  top: var(--margin);
-  right: var(--margin);
-  z-index: 2;
-}
-
-.FixedSideContainer_side_top.zen-mode {
-  right: 42px;
-}
-
-/* TODO: if these are used, make sure to implement RTL support
-.FixedSideContainer_side_left {
-  left: var(--margin);
-  top: var(--margin);
-  bottom: var(--margin);
-  z-index: 1;
-}
-
-.FixedSideContainer_side_right {
-  right: var(--margin);
-  top: var(--margin);
-  bottom: var(--margin);
-  z-index: 3;
-}
-*/

src/components/FixedSideContainer.scss

@@ -0,0 +1,38 @@
+.excalidraw {
+  .FixedSideContainer {
+    --margin: 0.25rem;
+    position: absolute;
+    pointer-events: none;
+  }
+
+  .FixedSideContainer > * {
+    pointer-events: all;
+  }
+
+  .FixedSideContainer_side_top {
+    left: var(--margin);
+    top: var(--margin);
+    right: var(--margin);
+    z-index: 2;
+  }
+
+  .FixedSideContainer_side_top.zen-mode {
+    right: 42px;
+  }
+}
+
+/* TODO: if these are used, make sure to implement RTL support
+.FixedSideContainer_side_left {
+  left: var(--margin);
+  top: var(--margin);
+  bottom: var(--margin);
+  z-index: 1;
+}
+
+.FixedSideContainer_side_right {
+  right: var(--margin);
+  top: var(--margin);
+  bottom: var(--margin);
+  z-index: 3;
+}
+*/

src/components/FixedSideContainer.tsx

@@ -1,4 +1,4 @@
-import "./FixedSideContainer.css";
+import "./FixedSideContainer.scss";
 
 import React from "react";
 

src/components/HintViewer.scss

@@ -1,5 +1,6 @@
 @import "../css/_variables";
 
+.excalidraw {
   .HintViewer {
     pointer-events: none;
     box-sizing: border-box;
@@ -29,3 +30,4 @@
       border-radius: 4px;
     }
   }
+}

src/components/Island.scss

@@ -1,3 +1,4 @@
+.excalidraw {
   .Island {
     --padding: 0;
     background-color: var(--bg-color-island);
@@ -12,3 +13,4 @@
       box-shadow: none;
     }
   }
+}

src/components/LayerUI.scss

@@ -1,5 +1,6 @@
 @import "open-color/open-color";
 
+.excalidraw {
   .layer-ui__library {
     margin: auto;
     display: flex;
@@ -36,12 +37,15 @@
         visibility: hidden;
         width: 20rem;
         bottom: calc(50% + 0.8rem + 6px);
+
         :root[dir="ltr"] & {
           left: -5px;
         }
+
         :root[dir="rtl"] & {
           right: -5px;
         }
+
         background-color: $oc-black;
         color: $oc-white;
         text-align: center;
@@ -60,9 +64,11 @@
           border-top-color: $oc-black;
           position: absolute;
           bottom: calc(-2 * var(--size));
+
           :root[dir="ltr"] & {
             left: calc(5px + var(--size) / 2);
           }
+
           :root[dir="rtl"] & {
             right: calc(5px + var(--size) / 2);
           }
@@ -76,9 +82,11 @@
       body:active &.tooltip:not(:hover) {
         pointer-events: none;
       }
+
       body:not(:active) &.tooltip:hover .tooltip-text {
         visibility: visible;
       }
+
       .tooltip-text:hover {
         visibility: visible;
       }
@@ -86,12 +94,15 @@
 
     &__github-corner {
       top: 0;
+
       :root[dir="ltr"] & {
         right: 0;
       }
+
       :root[dir="rtl"] & {
         left: 0;
       }
+
       position: absolute;
       width: 40px;
     }
@@ -100,26 +111,33 @@
       position: absolute;
       z-index: 100;
       bottom: 0px;
+
       :root[dir="ltr"] & {
         right: 0;
       }
+
       :root[dir="rtl"] & {
         left: 0;
       }
+
       width: 190px;
     }
 
     .zen-mode-transition {
       transition: transform 0.5s ease-in-out;
+
       :root[dir="ltr"] &.transition-left {
         transform: translate(-999px, 0);
       }
+
       :root[dir="ltr"] &.transition-right {
         transform: translate(999px, 0px);
       }
+
       :root[dir="rtl"] &.transition-left {
         transform: translate(999px, 0);
       }
+
       :root[dir="rtl"] &.transition-right {
         transform: translate(-999px, 0);
       }
@@ -149,3 +167,4 @@
       }
     }
   }
+}

src/components/LibraryUnit.scss

@@ -1,3 +1,4 @@
+.excalidraw {
   .library-unit {
     align-items: center;
     border: 1px solid var(--button-gray-2);
@@ -75,3 +76,4 @@
       transform: scale(0.95);
     }
   }
+}

src/components/Modal.scss

@@ -1,5 +1,6 @@
 @import "../css/_variables";
 
+.excalidraw {
   .Modal {
     position: fixed;
     top: 0;
@@ -54,16 +55,19 @@
       transform: translateY(0);
     }
   }
+
   .Modal__close {
     width: calc(var(--space-factor) * 7);
     height: calc(var(--space-factor) * 7);
     display: flex;
     align-items: center;
     justify-content: center;
+
     svg {
       height: calc(var(--space-factor) * 5);
     }
   }
+
   .Modal__close--floating {
     position: absolute;
     right: calc(var(--space-factor) * 5);
@@ -74,6 +78,7 @@
     .Modal {
       padding: 0;
     }
+
     .Modal__content {
       position: fixed;
       top: 0;
@@ -82,3 +87,4 @@
       bottom: 0;
     }
   }
+}

src/components/Modal.tsx

@@ -47,7 +47,17 @@ export const Modal = (props: {
 
 const useBodyRoot = () => {
   const createDiv = () => {
+    const isDarkTheme = !!document
+      .querySelector(".excalidraw")
+      ?.classList.contains("Appearance_dark");
     const div = document.createElement("div");
+
+    div.classList.add("excalidraw");
+
+    if (isDarkTheme) {
+      div.classList.add("Appearance_dark");
+      div.classList.add("Appearance_dark-background-none");
+    }
     document.body.appendChild(div);
     return div;
   };

src/components/Popover.css

@@ -1,12 +0,0 @@
-.popover {
-  position: absolute;
-  z-index: 10;
-}
-
-.popover .cover {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-}

src/components/Popover.scss

@@ -0,0 +1,14 @@
+.excalidraw {
+  .popover {
+    position: absolute;
+    z-index: 10;
+  }
+
+  .popover .cover {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+  }
+}

src/components/Popover.tsx

@@ -1,5 +1,5 @@
 import React, { useLayoutEffect, useRef, useEffect } from "react";
-import "./Popover.css";
+import "./Popover.scss";
 import { unstable_batchedUpdates } from "react-dom";
 
 type Props = {

src/components/RoomDialog.scss

@@ -1,5 +1,6 @@
 @import "../css/_variables";
 
+.excalidraw {
   .RoomDialog-modalButton.is-collaborating {
     background-color: var(--button-special-active-background-color);
 
@@ -72,7 +73,7 @@
     justify-content: center;
   }
 
-.RoomDialog-stopSession {
+  .Modal .RoomDialog-stopSession {
     background-color: var(--button-destructive-background-color);
 
     .ToolIcon__label,
@@ -80,3 +81,4 @@
       color: var(--button-destructive-color);
     }
   }
+}

src/components/ShortcutsDialog.scss

@@ -1,5 +1,6 @@
 @import "../css/_variables";
 
+.excalidraw {
   .ShortcutsDialog-island {
     border: 1px solid var(--button-gray-2);
     margin-bottom: 16px;
@@ -38,3 +39,4 @@
     margin-top: 8px;
     padding-top: 16px;
   }
+}

src/components/Stack.css

@@ -1,17 +0,0 @@
-.Stack {
-  --gap: 0;
-  display: grid;
-  gap: calc(var(--space-factor) * var(--gap));
-}
-
-.Stack_vertical {
-  grid-template-columns: auto;
-  grid-auto-flow: row;
-  grid-auto-rows: min-content;
-}
-
-.Stack_horizontal {
-  grid-template-rows: auto;
-  grid-auto-flow: column;
-  grid-auto-columns: min-content;
-}

src/components/Stack.scss

@@ -0,0 +1,19 @@
+.excalidraw {
+  .Stack {
+    --gap: 0;
+    display: grid;
+    gap: calc(var(--space-factor) * var(--gap));
+  }
+
+  .Stack_vertical {
+    grid-template-columns: auto;
+    grid-auto-flow: row;
+    grid-auto-rows: min-content;
+  }
+
+  .Stack_horizontal {
+    grid-template-rows: auto;
+    grid-auto-flow: column;
+    grid-auto-columns: min-content;
+  }
+}

src/components/Stack.tsx

@@ -1,4 +1,4 @@
-import "./Stack.css";
+import "./Stack.scss";
 
 import React from "react";
 

src/components/TextInput.scss

@@ -1,5 +1,6 @@
 @import "../css/_variables.scss";
 
+.excalidraw {
   .TextInput {
     color: var(--text-color-primary);
     display: inline-block;
@@ -9,13 +10,16 @@
     white-space: nowrap;
     border-radius: var(--space-factor);
     background-color: var(--input-background-color);
+
     &:not(:focus) {
       &:hover {
         background-color: var(--input-hover-background-color);
       }
     }
+
     &:focus {
       outline: none;
       box-shadow: 0 0 0 2px var(--focus-highlight-color);
     }
   }
+}

src/components/ToolIcon.scss

@@ -1,5 +1,5 @@
 @import "open-color/open-color.scss";
-
+.excalidraw {
   .ToolIcon {
     display: inline-flex;
     align-items: center;
@@ -47,6 +47,8 @@
     font-size: 0.8em;
   }
 
+  .excalidraw .ToolIcon_type_button,
+  .Modal .ToolIcon_type_button,
   .ToolIcon_type_button {
     padding: 0;
     border: none;
@@ -56,14 +58,18 @@
     &:hover {
       background-color: var(--button-gray-1);
     }
+
     &:active {
       background-color: var(--button-gray-2);
     }
+
     &:focus {
       box-shadow: 0 0 0 2px var(--focus-highlight-color);
     }
+
     &.ToolIcon--selected {
       background-color: var(--button-gray-2);
+
       &:active {
         background-color: var(--button-gray-3);
       }
@@ -72,6 +78,7 @@
     &--show {
       visibility: visible;
     }
+
     &--hide {
       visibility: hidden;
     }
@@ -86,9 +93,11 @@
     &:not(.ToolIcon_toggle_opaque):checked + .ToolIcon__icon {
       background-color: var(--button-gray-2);
     }
+
     &:focus + .ToolIcon__icon {
       box-shadow: 0 0 0 2px var(--focus-highlight-color);
     }
+
     &:active + .ToolIcon__icon {
       background-color: var(--button-gray-3);
     }
@@ -96,15 +105,19 @@
 
   .ToolIcon_type_floating {
     background-color: transparent;
+
     &:hover {
       background-color: transparent;
     }
+
     &:active {
       background-color: transparent;
     }
+
     &:focus {
       box-shadow: none;
     }
+
     .ToolIcon__icon {
       width: 2rem;
       height: 2em;
@@ -149,9 +162,11 @@
       border-radius: 20px 0 0 20px;
 
       background-color: var(--button-gray-1);
+
       &:hover {
         background-color: var(--button-gray-1);
       }
+
       &:active {
         background-color: var(--button-gray-2);
       }
@@ -159,6 +174,7 @@
       .ToolIcon__icon {
         border-radius: inherit;
       }
+
       svg {
         position: static;
       }
@@ -169,7 +185,9 @@
     :root[dir="ltr"] & {
       left: 2px;
     }
+
     :root[dir="rtl"] & {
       right: 2px;
     }
   }
+}

src/components/Tooltip.scss

@@ -1,5 +1,5 @@
 @import "../css/_variables";
-
+.excalidraw {
   .Tooltip {
     position: relative;
   }
@@ -46,3 +46,4 @@ body:not(:active) .Tooltip:hover .Tooltip__label {
   .Tooltip__label:hover {
     visibility: visible;
   }
+}

src/components/UserList.css

@@ -1,22 +0,0 @@
-.UserList {
-  pointer-events: none;
-  /*github corner*/
-  padding: var(--space-factor) 40px var(--space-factor) var(--space-factor);
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: flex-end;
-}
-
-.UserList > * {
-  pointer-events: all;
-  margin: 0 0 var(--space-factor) var(--space-factor);
-}
-
-.UserList_mobile {
-  padding: 0;
-  justify-content: normal;
-}
-
-.UserList_mobile > * {
-  margin: 0 var(--space-factor) var(--space-factor) 0;
-}

src/components/UserList.scss

@@ -0,0 +1,24 @@
+.excalidraw {
+  .UserList {
+    pointer-events: none;
+    /*github corner*/
+    padding: var(--space-factor) 40px var(--space-factor) var(--space-factor);
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-end;
+  }
+
+  .UserList > * {
+    pointer-events: all;
+    margin: 0 0 var(--space-factor) var(--space-factor);
+  }
+
+  .UserList_mobile {
+    padding: 0;
+    justify-content: normal;
+  }
+
+  .UserList_mobile > * {
+    margin: 0 var(--space-factor) var(--space-factor) 0;
+  }
+}

src/components/UserList.tsx

@@ -1,4 +1,4 @@
-import "./UserList.css";
+import "./UserList.scss";
 
 import React from "react";
 

src/css/styles.scss

@@ -1,21 +1,14 @@
 @import "./_variables";
 @import "./theme";
 
-body {
+.excalidraw {
-  margin: 0;
-  --ui-font: system-ui, BlinkMacSystemFont, -apple-system, Segoe UI, Roboto,
-    Helvetica, Arial, sans-serif;
-  font-family: var(--ui-font);
   color: var(--text-color-primary);
-  -webkit-text-size-adjust: 100%;
+  display: flex;
-  user-select: none;
+  position: fixed;
-  width: 100vw;
+  top: 0;
-  height: 100vh;
+  bottom: 0;
-}
+  left: 0;
-[contenteditable] {
+  right: 0;
-  user-select: auto;
-  cursor: text;
-}
 
   a {
     font-weight: 500;
@@ -37,24 +30,18 @@ canvas {
     image-rendering: pixelated; // chromium
     // NOTE: must be declared *after* the above
     image-rendering: -moz-crisp-edges; // FF
+  }
 
-  .Appearance_dark & {
+  &.Appearance_dark {
     // The percentage is inspired by
     // https://material.io/design/color/dark-theme.html#properties, which
     // recommends surface color of #121212, 93% yields #111111 for #FFF
+
+    canvas {
       filter: var(--appearance-filter);
     }
   }
 
-.excalidraw {
-  display: flex;
-  position: fixed;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-}
-
   .FixedSideContainer {
     padding-top: var(--sat, 0px);
     padding-right: var(--sar, 0px);
@@ -175,9 +162,11 @@ button,
   .active,
   .buttonList label.active {
     background-color: var(--button-gray-2);
+
     &:hover {
       background-color: var(--button-gray-2);
     }
+
     &:active {
       background-color: var(--button-gray-3);
     }
@@ -216,11 +205,13 @@ button,
 
     box-sizing: border-box;
   }
+
   .App-toolbar-content {
     display: flex;
     align-items: center;
     justify-content: space-between;
   }
+
   .App-mobile-menu {
     width: 100%;
     overflow-x: visible;
@@ -267,6 +258,7 @@ button,
     :root[dir="ltr"] & {
       left: 0.25rem;
     }
+
     :root[dir="rtl"] & {
       right: 0.25rem;
     }
@@ -342,6 +334,7 @@ button,
     .bigger button {
       font-size: 1.1em;
     }
+
     .smaller,
     .smaller button {
       font-size: 0.9em;
@@ -376,9 +369,11 @@ button,
     background-image: var(--dropdown-icon);
     background-repeat: no-repeat;
     background-position: right 0.7rem top 50%, 0 0;
+
     :root[dir="rtl"] & {
       background-position: left 0.7rem top 50%, 0 0;
     }
+
     background-size: 0.65em auto, 100%;
 
     &:focus {
@@ -392,6 +387,7 @@ button,
     &:active {
       background-color: var(--button-gray-2);
     }
+
     &.dropdown-select--floating {
       position: absolute;
       margin: 0.5em;
@@ -401,9 +397,11 @@ button,
   .dropdown-select__language.dropdown-select--floating {
     position: absolute;
     bottom: 10px;
+
     :root[dir="ltr"] & {
       right: 44px;
     }
+
     :root[dir="rtl"] & {
       left: 44px;
     }
@@ -436,9 +434,11 @@ button,
     cursor: pointer;
     fill: $oc-gray-6;
     bottom: 14px;
+
     :root[dir="ltr"] & {
       right: 14px;
     }
+
     :root[dir="rtl"] & {
       left: 14px;
     }
@@ -464,9 +464,11 @@ button,
     position: absolute;
     top: 0;
     z-index: 2;
+
     :root[dir="ltr"] & {
       right: 0;
     }
+
     :root[dir="rtl"] & {
       left: 0;
     }
@@ -499,3 +501,4 @@ button,
       display: none;
     }
   }
+}

src/css/theme.scss

@@ -37,11 +37,16 @@
   --popup-text-inverted-color: #{$oc-white};
 }
 
-:root.Appearance_dark {
+.excalidraw {
-  background-color: #000;
+  &.Appearance_dark {
+    background: #000;
+
+    &.Appearance_dark-background-none {
+      background: none;
+    }
   }
 
-.Appearance_dark {
+  &.Appearance_dark {
     --text-color-primary: #{$oc-gray-4};
     --bg-color-island: #1e1e1e;
     --popup-background-color: #2c2c2c;
@@ -70,3 +75,4 @@
     --popup-text-color: #{$oc-gray-4};
     --popup-text-inverted-color: #2c2c2c;
   }
+}