pass theme and coordinate visibility

Author: raclim

client/modules/IDE/actions/ide.js

@@ -260,7 +260,8 @@ export function startSketch() {
         files: state.files,
         basePath: window.location.pathname,
         gridOutput: state.preferences.gridOutput,
-        textOutput: state.preferences.textOutput
+        textOutput: state.preferences.textOutput,
+        userTheme: state.preferences.theme
       }
     });
     dispatchMessage({

client/modules/Preview/previewIndex.jsx

@@ -27,7 +27,8 @@ const App = () => {
   const [basePath, setBasePath] = useState('');
   const [textOutput, setTextOutput] = useState(false);
   const [gridOutput, setGridOutput] = useState(false);
-  const [coordinatesVisible] = useState(true);
+  const [userTheme, setUserTheme] = useState('light');
+  const [coordinatesVisible, setCoordinatesVisible] = useState(false);
 
   const { updateCoordinates } = useCoordinates();
 
@@ -41,6 +42,7 @@ const App = () => {
         setBasePath(payload.basePath);
         setTextOutput(payload.textOutput);
         setGridOutput(payload.gridOutput);
+        setUserTheme(payload.userTheme);
         break;
       case MessageTypes.START:
         setIsPlaying(true);
@@ -57,6 +59,9 @@ const App = () => {
       case MessageTypes.COORDINATES:
         updateCoordinates(payload);
         break;
+      case MessageTypes.COORDINATES_VISIBILITY:
+        setCoordinatesVisible(payload);
+        break;
       default:
         break;
     }
@@ -88,9 +93,9 @@ const App = () => {
   }, []);
 
   return (
-    <ThemeProvider theme={theme}>
+    <ThemeProvider theme={theme[userTheme]}>
       <GlobalStyle />
-      {coordinatesVisible && <CoordinateTracker coordinates />}
+      {coordinatesVisible && <CoordinateTracker />}
       <EmbedFrame
         files={memoizedFiles}
         isPlaying={isPlaying}

client/utils/dispatcher.js

@@ -12,7 +12,8 @@ export const MessageTypes = {
   SKETCH: 'SKETCH',
   REGISTER: 'REGISTER',
   EXECUTE: 'EXECUTE',
-  COORDINATES: 'COORDINATES'
+  COORDINATES: 'COORDINATES',
+  COORDINATES_VISIBILITY: 'COORDINATES_VISIBILITY'
 };
 
 export function registerFrame(newFrame, newOrigin) {