ThemeProvider draft

components/core/CarouselSidebarData.js

@@ -10,7 +10,7 @@ import * as Events from "~/common/custom-events";
 import * as Window from "~/common/window";
 import * as FileUtilities from "~/common/file-utilities";
 
-import { css } from "@emotion/react";
+import { css, withTheme } from "@emotion/react";
 import { LoaderSpinner } from "~/components/system/components/Loaders";
 import { SlatePicker } from "~/components/core/SlatePicker";
 import { Input } from "~/components/system/components/Input";
@@ -246,7 +246,7 @@ export const FileTypeDefaultPreview = () => {
   return DEFAULT_DATA;
 };
 
-export default class CarouselSidebarData extends React.Component {
+class CarouselSidebarData extends React.Component {
   _ref = null;
 
   state = {
@@ -281,6 +281,13 @@ export default class CarouselSidebarData extends React.Component {
     }
   };
 
+  _handleDarkMode = async (e) => {
+    Events.dispatchCustomEvent({
+      name: "slate-theme-toggle-darkmode",
+      detail: { darkmode: e.target.value },
+    });
+  };
+
   _handleChange = (e) => {
     this.debounceInstance();
     this.setState({ [e.target.name]: e.target.value, unsavedChanges: true });
@@ -594,6 +601,20 @@ export default class CarouselSidebarData extends React.Component {
             </div>
           </React.Fragment>
         ) : null}
+        {this.props.data.name.endsWith(".md") ? (
+          <React.Fragment>
+            <div css={STYLES_SECTION_HEADER} style={{ margin: "48px 0px 8px 0px" }}>
+              Settings
+            </div>
+            <div css={STYLES_OPTIONS_SECTION}>
+              <div css={STYLES_TEXT}>Dark mode</div>
+              <Toggle dark active={this.props?.theme?.darkmode} onChange={this._handleDarkMode} />
+            </div>
+            <div style={{ color: Constants.system.darkGray, marginTop: 8 }}>
+              {this.props?.data?.settings?.darkMode ? "You're saving your eyes" : "RIP"}
+            </div>
+          </React.Fragment>
+        ) : null}
         {this.props.isOwner && type?.startsWith("video/") ? (
           <React.Fragment>
             <div css={STYLES_SECTION_HEADER} style={{ margin: "48px 0px 8px 0px" }}>
@@ -636,3 +657,5 @@ export default class CarouselSidebarData extends React.Component {
     );
   }
 }
+
+export default withTheme(CarouselSidebarData);

components/core/MarkdownFrame.js

@@ -6,15 +6,19 @@ import * as Constants from "~/common/constants";
 import { Markdown } from "~/components/system/components/Markdown";
 import { H1, H2, H3, H4, P, UL, OL, LI, Link } from "~/components/system/components/Typography";
 
-const STYLES_ASSET = css`
-  padding: 120px calc(32px + 16px + 8px);
-  position: relative;
-  width: 100%;
-  height: 100%;
-  overflow-y: scroll;
-  will-change: transform;
-  color: ${Constants.system.white};
-`;
+const STYLES_ASSET = (theme) => {
+  console.log(theme.darkMode);
+  return css`
+    padding: 120px calc(32px + 16px + 8px);
+    position: relative;
+    width: 100%;
+    height: 100%;
+    overflow-y: scroll;
+    will-change: transform;
+    color: ${theme.darkmode ? Constants.system.white : "#000"};
+    background-color: ${theme.darkmode ? "#000" : "#fff"};
+  `;
+};
 
 const STYLES_BODY = css`
   width: 100%;

components/system/ThemeProvider.js

@@ -0,0 +1,36 @@
+import * as React from "react";
+import * as Constants from "~/common/constants";
+
+import { ThemeProvider as EmotionTP } from "@emotion/react";
+
+export default function ThemeProvider({ children }) {
+  const [theme, setTheme] = React.useState({ darkmode: true });
+  const toggleDarkMode = (e) => setTheme((prev) => ({ ...prev, darkmode: e.detail.darkmode }));
+
+  React.useEffect(() => {
+    if (!window) return;
+    window.addEventListener("slate-theme-toggle-darkmode", toggleDarkMode);
+    return () => {
+      if (!window) return;
+      window.removeEventListener("slate-theme-toggle-darkmode", toggleDarkMode);
+    };
+  }, []);
+
+  const value = React.useMemo(
+    () => ({
+      ...theme,
+      sizes: Constants.sizes,
+      system: Constants.system,
+      shadow: Constants.shadow,
+      zindex: Constants.zindex,
+      font: Constants.font,
+      typescale: Constants.typescale,
+    }),
+    [theme]
+  );
+  return (
+    <EmotionTP theme={value}>
+      <React.Fragment>{children}</React.Fragment>
+    </EmotionTP>
+  );
+}

pages/_app.js

@@ -4,16 +4,19 @@ import { Global } from "@emotion/react";
 
 import App from "next/app";
 import { injectGlobalStyles, injectCodeBlockStyles } from "~/common/styles/global";
+import ThemeProvider from "~/components/system/ThemeProvider";
 
 // NOTE(wwwjim):
 // https://nextjs.org/docs/advanced-features/custom-app
 function MyApp({ Component, pageProps }) {
   return (
-    <React.Fragment>
-      <Global styles={injectGlobalStyles()} />
-      <Global styles={injectCodeBlockStyles()} />
-      <Component {...pageProps} />
-    </React.Fragment>
+    <ThemeProvider>
+      <React.Fragment>
+        <Global styles={injectGlobalStyles()} />
+        <Global styles={injectCodeBlockStyles()} />
+        <Component {...pageProps} />
+      </React.Fragment>
+    </ThemeProvider>
   );
 }