docs: Update documentation for theming components and fix demo toggli…

…ng theme. #2262

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>

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");
     }
   };
 

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>