From d80769a2755bb71d303caa1ab0611af2b7fbe05a Mon Sep 17 00:00:00 2001
From: Matt Driscoll <MDriscoll@esri.com>
Date: Tue, 8 Jun 2021 09:38:47 -0700
Subject: [PATCH] docs: Update documentation for theming components and fix
 demo toggling theme. #2262

---
 conventions/README.md                  | 8 +-------
 src/demos/_assets/toggles.ts           | 2 +-
 src/demos/calcite-inline-editable.html | 2 +-
 3 files changed, 3 insertions(+), 9 deletions(-)

diff --git a/conventions/README.md b/conventions/README.md
index 0be0c43d2e2..2f01161a637 100644
--- a/conventions/README.md
+++ b/conventions/README.md
@@ -80,16 +80,10 @@ You can then use the `:host()` selector to define your custom colors:
 
 ## Light Theme/Dark Theme
 
-All components should allow developers to supply a `theme` property. This theme should _not_ have default value set:
-
-```tsx
-@Prop({ reflect: true }) theme: "light" | "dark";
-```
-
 In the [global CSS file](https://github.com/Esri/calcite-components/blob/master/src/assets/styles/global.scss), we specify the values of each color for both light and dark theme. This enables theming to be inherited throughout a component tree. Consider this valid example:
 
 ```html
-<div theme="dark">
+<div class="calcite-theme-dark">
   <calcite-button>Button text</calcite-button>
   <calcite-date-picker></calcite-date-picker>
 </div>
diff --git a/src/demos/_assets/toggles.ts b/src/demos/_assets/toggles.ts
index 4ca4f7636f2..fd7d551e17a 100644
--- a/src/demos/_assets/toggles.ts
+++ b/src/demos/_assets/toggles.ts
@@ -24,7 +24,7 @@
     } else if (property === "dir") {
       document.dir = document.dir === "rtl" ? "ltr" : "rtl";
     } else if (property === "theme") {
-      document.body.setAttribute("theme", document.body.getAttribute("theme") === "dark" ? "light" : "dark");
+      document.body.classList.toggle("calcite-theme-dark");
     }
   };
 
diff --git a/src/demos/calcite-inline-editable.html b/src/demos/calcite-inline-editable.html
index fd1270238ec..056c8af0a7c 100644
--- a/src/demos/calcite-inline-editable.html
+++ b/src/demos/calcite-inline-editable.html
@@ -29,7 +29,7 @@ <h1>Calcite Inline Editable</h1>
       document.querySelector("#themeSwitch").addEventListener("calciteSwitchChange", () => {
         isDarkTheme = !isDarkTheme;
         document.querySelectorAll("calcite-accordion").forEach((accordion) => {
-          accordion.setAttribute("theme", isDarkTheme ? "dark" : "light");
+          accordion.classList.toggle("calcite-theme-dark", isDarkTheme);
         });
       });
     </script>