fix: dark mode removed from theme context

ccontrols · Jun 21, 2020 · 74d3b51 · 74d3b51
1 parent 8b9e463
commit 74d3b51
Show file tree

Hide file tree

Showing 5 changed files with 11 additions and 17 deletions.
diff --git a/ui/blocks/src/ComponentSource/ComponentSource.tsx b/ui/blocks/src/ComponentSource/ComponentSource.tsx
@@ -1,10 +1,6 @@
 import React, { FC } from 'react';
 import { ActionItem } from '@component-controls/components';
-import {
-  ThemeContext,
-  Source,
-  SourceProps,
-} from '@component-controls/components';
+import { Source, SourceProps } from '@component-controls/components';
 import {
   ComponentsBlockContainer,
   ComponentsBlockContainerProps,
@@ -27,7 +23,6 @@ export const ComponentSource: FC<ComponentSourceProps> = ({
   ...rest
 }) => {
   const [showFileSource, setShowFileSource] = React.useState<boolean>(false);
-  const { dark } = React.useContext(ThemeContext);
   return (
     <ComponentsBlockContainer visibility="info" {...rest}>
       {(component, props, sourceProps) => {
@@ -66,7 +61,7 @@ export const ComponentSource: FC<ComponentSourceProps> = ({
           allActions.push.apply(allActions, actions);
         }
         return (
-          <Source dark={dark} {...sourceProps} actions={allActions}>
+          <Source {...sourceProps} actions={allActions}>
             {showFileSource ? component?.source ?? '' : source}
           </Source>
         );

diff --git a/ui/blocks/src/StoryConfig/BaseStoryConfig.tsx b/ui/blocks/src/StoryConfig/BaseStoryConfig.tsx
@@ -3,10 +3,9 @@
 /** @jsx jsx */
 /* eslint react/jsx-key: 0 */
 import { jsx } from 'theme-ui';
-import { FC, useState, useContext } from 'react';
+import { FC, useState } from 'react';
 import { Story, StoriesDoc, PackageInfo } from '@component-controls/core';
 import {
-  ThemeContext,
   Source,
   SourceProps,
   ActionItem,
@@ -29,7 +28,6 @@ export const BaseStoryConfig: FC<BaseStoryConfigProps> = ({
   const [showFileSource, setShowFileSource] = useState<boolean>(false);
   const onShowFileSource = () => setShowFileSource(!showFileSource);
 
-  const { dark } = useContext(ThemeContext);
   const allActions: ActionItem[] = [];
   const repositoryItems = repositoryActions(docPackage);
   if (repositoryItems) {
@@ -57,7 +55,7 @@ export const BaseStoryConfig: FC<BaseStoryConfigProps> = ({
     restStory.parameters = restParameters;
   }
   return Object.keys(restStory).length ? (
-    <Source dark={dark} language="json" {...sourceProps} actions={allActions}>
+    <Source language="json" {...sourceProps} actions={allActions}>
       {JSON.stringify(restStory, null, 2)}
     </Source>
   ) : null;

diff --git a/ui/blocks/src/StorySource/BaseStorySource.tsx b/ui/blocks/src/StorySource/BaseStorySource.tsx
@@ -1,11 +1,10 @@
 /* eslint-disable react/jsx-key */
 /** @jsx jsx */
 import { jsx } from 'theme-ui';
-import { FC, useState, useContext } from 'react';
+import { FC, useState } from 'react';
 import { Styled } from 'theme-ui';
 import { Story, StoriesDoc, PackageInfo } from '@component-controls/core';
 import {
-  ThemeContext,
   Source,
   SourceProps,
   ActionItem,
@@ -51,7 +50,6 @@ export const BaseStorySource: FC<BaseStorySourceProps> = ({
   const onShowFileSource = () => setShowFileSource(!showFileSource);
 
   const { controls } = story || {};
-  const { dark } = useContext(ThemeContext);
   const allActions: ActionItem[] = [];
   const repositoryItems = repositoryActions(docPackage);
   if (repositoryItems) {
@@ -85,7 +83,6 @@ export const BaseStorySource: FC<BaseStorySourceProps> = ({
   return (
     <Source
       actions={allActions}
-      dark={dark}
       {...sourceProps}
       renderFn={(
         { className, style, tokens, getLineProps, getTokenProps }: any,

diff --git a/ui/blocks/src/context/block/BlockContext.tsx b/ui/blocks/src/context/block/BlockContext.tsx
@@ -57,6 +57,7 @@ export const BlockContextProvider: React.FC<BlockContextInputProps> = ({
   options,
 }) => {
   let storyId = propsStoryId;
+  console.log(propsStoryId, propsDocId);
   const docId = storyId || propsDocId;
   if (!storyId && docId) {
     const doc = store.getStoryDoc(docId);

diff --git a/ui/components/src/SyntaxHighlighter/SyntaxHighlighter.tsx b/ui/components/src/SyntaxHighlighter/SyntaxHighlighter.tsx
@@ -2,7 +2,7 @@
 /* eslint react/jsx-key: 0 */
 import { jsx } from 'theme-ui';
 import React, { FC } from 'react';
-import { Styled, Box } from 'theme-ui';
+import { Styled, Box, useColorMode } from 'theme-ui';
 import Highlight, {
   defaultProps,
   PrismTheme,
@@ -63,7 +63,10 @@ export const SyntaxHighlighter: FC<SyntaxHighlighterProps> = ({
   style: propStyle,
   as = 'span',
 }) => {
-  const theme = customTheme ? customTheme : dark ? duotoneDark : duotoneLight;
+  const [colorMode] = useColorMode();
+  const isDark = dark === true || colorMode === `dark`;
+  const theme = customTheme ? customTheme : isDark ? duotoneDark : duotoneLight;
+
   const renderProps =
     typeof renderFn === 'function'
       ? (props: RenderProps) => renderFn(props, { theme })