wip darkmode

packages/webapp/src/components/Dashboard/BigcapitalLoading.tsx

@@ -4,15 +4,28 @@ import classNames from 'classnames';
 import { Icon } from '@/components';
 
 import '@/style/components/BigcapitalLoading.scss';
+import { useIsDarkMode } from '@/hooks/useDarkMode';
 
 /**
  * Bigcapital logo loading.
  */
 export default function BigcapitalLoading({ className }) {
+  const isDarkmode = useIsDarkMode();
+
   return (
     <div className={classNames('bigcapital-loading', className)}>
       <div class="center">
-        <Icon icon="bigcapital" height={37} width={228} />
+        {isDarkmode ? (
+          <Icon
+            icon="bigcapital-alt"
+            height={37}
+            width={228}
+            color="#fff"
+            className="bigcapital-logo"
+          />
+        ) : (
+          <Icon icon="bigcapital" height={37} width={228} />
+        )}
       </div>
     </div>
   );

packages/webapp/src/components/Dashboard/GlobalHotkeys.tsx

@@ -9,6 +9,17 @@ import withUniversalSearchActions from '@/containers/UniversalSearch/withUnivers
 
 import { compose } from '@/utils';
 
+// Toggle dark/light mode by toggling 'bp4-dark' class on body
+const handleToggleDarkMode = () => {
+  const body = document.body;
+
+  if (body.classList.contains('bp4-dark')) {
+    body.classList.remove('bp4-dark');
+  } else {
+    body.classList.add('bp4-dark');
+  }
+};
+
 function GlobalHotkeys({
   // #withDashboardActions
   toggleSidebarExpand,
@@ -55,6 +66,9 @@ function GlobalHotkeys({
       openGlobalSearch();
     }, 0);
   });
+  useHotkeys('shift+h', () => {
+    handleToggleDarkMode();
+  });
 
   return <div></div>;
 }