theme basic

packages/web/src/theme/_theme.bak.js

@@ -0,0 +1,33 @@
+// export default {
+//   widgetMenu: {
+//     iconSize: 60,
+//     background: '#222',
+//     iconFontSize: '23pt',
+//     iconFontColor: '#eee',
+//     backgroundHover: '#555',
+//     backgroundSelected: '#4CAF50',
+//   },
+//   leftPanel: {
+//     // width: 300,
+//     background: '#ccc',
+//   },
+//   tabsPanel: {
+//     height: 53,
+//     background: '#ddd',
+//     hoverFont: '#338',
+//   },
+//   statusBar: {
+//     height: 20,
+//     background: '#00c',
+//   },
+//   toolBar: {
+//     height: 30,
+//     background: '#eee',
+//   },
+//   mainArea: {
+//     background: '#eee',
+//   },
+//   splitter: {
+//     thickness: 3,
+//   },
+// };

packages/web/src/theme/dark.js

@@ -0,0 +1,20 @@
+export default {
+  background: '#000',
+  iconFontColor: '#eee',
+  backgroundHover: '#555',
+  backgroundSelected: '#4CAF50',
+
+  leftPanelBackground: '#ccc',
+
+  widgetBackground: '#222',
+  widgetIconFontColor: '#eee',
+  widgetBackgroundHover: '#555',
+  widgetBackgroundSelected: '#4CAF50',
+
+  tabsPanelBackground: '#ccc',
+  tabsPanelHoverFont: '#338',
+
+  statusBarBackground: '#00c',
+  toolBarBackground: '#eee',
+  mainAreaBackground: '#333',
+};

packages/web/src/theme/dimensions.js

@@ -0,0 +1,18 @@
+export default {
+  widgetMenu: {
+    iconSize: 60,
+    iconFontSize: '23pt',
+  },
+  tabsPanel: {
+    height: 53,
+  },
+  statusBar: {
+    height: 20,
+  },
+  toolBar: {
+    height: 30,
+  },
+  splitter: {
+    thickness: 3,
+  },
+};

packages/web/src/theme/light.js

@@ -0,0 +1,20 @@
+export default {
+  background: '#222',
+  iconFontColor: '#eee',
+  backgroundHover: '#555',
+  backgroundSelected: '#4CAF50',
+
+  leftPanelBackground: '#ccc',
+
+  widgetBackground: '#222',
+  widgetIconFontColor: '#eee',
+  widgetBackgroundHover: '#555',
+  widgetBackgroundSelected: '#4CAF50',
+
+  tabsPanelBackground: '#ccc',
+  tabsPanelHoverFont: '#338',
+
+  statusBarBackground: '#00c',
+  toolBarBackground: '#eee',
+  mainAreaBackground: '#eee',
+};

packages/web/src/theme/useTheme.js

@@ -0,0 +1,10 @@
+import { useCurrentTheme } from '../utility/globalState';
+import light from './light';
+import dark from './dark';
+
+const themes = { light, dark };
+
+export default function useTheme() {
+  const currentTheme = useCurrentTheme();
+  return themes[currentTheme];
+}