feat: initial theming support

1 files changed, 11 insertions, 0 deletions

diff --git a/src/components/SideBar.js b/src/components/SideBar.js
index cee0960..8a38a46 100644
--- a/src/components/SideBar.js
+++ b/src/components/SideBar.js
@@ -2,6 +2,9 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { NavLink } from 'react-router-dom';
 
+import { useActions } from 'm/store';
+import { switchTheme } from 'd/app';
+
 import Icon from 'c/Icon';
 
 import activity from 's/activity.svg';
@@ -9,6 +12,7 @@ import settings from 's/settings.svg';
 import globe from 's/globe.svg';
 import file from 's/file.svg';
 import yacd from 's/yacd.svg';
+import moon from 's/moon.svg';
 
 import s from 'c/SideBar.module.scss';
 
@@ -27,7 +31,10 @@ SideBarRow.propTypes = {
   labelText: PropTypes.string
 };
 
+const actions = { switchTheme };
+
 function SideBar() {
+  const { switchTheme } = useActions(actions);
   return (
     <div className={s.root}>
       <div className={s.logo}>
@@ -40,6 +47,10 @@ function SideBar() {
         <SideBarRow to="/configs" iconId={settings.id} labelText="Config" />
         <SideBarRow to="/logs" iconId={file.id} labelText="Logs" />
       </div>
+
+      <div className={s.themeSwitchContainer} onClick={switchTheme}>
+        <Icon id={moon.id} width={20} height={20} />
+      </div>
     </div>
   );
 }