feat: darkmode (sidebar, menubar and welcome page #23)

2024-12-25 08:09:17 +01:00 · 2022-10-21 04:20:23 +05:30 · 2022-10-21 04:20:23 +05:30 · 8e70e191e1
commit 8e70e191e1
parent cbdfabb4db
23 changed files with 252 additions and 86 deletions
--- a/packages/bruno-app/jsconfig.json
+++ b/packages/bruno-app/jsconfig.json
@ -6,6 +6,8 @@
    "paths": {
      "assets/*": ["src/assets/*"],
      "components/*": ["src/components/*"],
+      "hooks/*": ["src/hooks/*"],
+      "themes/*": ["src/themes/*"],
      "api/*": ["src/api/*"],
      "pageComponents/*": ["src/pageComponents/*"],
      "providers/*": ["src/providers/*"],
--- a/packages/bruno-app/src/components/Dropdown/StyledWrapper.js
+++ b/packages/bruno-app/src/components/Dropdown/StyledWrapper.js
@ -9,11 +9,11 @@ const Wrapper = styled.div`

  .tippy-box {
    min-width: 135px;
-    background-color: white;
    font-size: 0.8125rem;
-    color: rgb(48 48 48);
-    background: #fff;
-    box-shadow: rgb(50 50 93 / 25%) 0px 6px 12px -2px, rgb(0 0 0 / 30%) 0px 3px 7px -3px;
+    color: ${(props) => props.theme.dropdown.color};
+    background-color: ${(props) => props.theme.dropdown.bg};
+    box-shadow: ${(props) => props.theme.dropdown.shadow};
+    border-radius: 3px;

    .tippy-content {
      padding-left: 0;
@ -34,7 +34,7 @@ const Wrapper = styled.div`
        cursor: pointer;

        &:hover {
-          background-color: #e9e9e9;
+          background-color: ${(props) => props.theme.dropdown.hoverBg};
        }
      }
    }
--- a/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/RequestMethod/StyledWrapper.js
+++ b/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/RequestMethod/StyledWrapper.js
@ -13,25 +13,25 @@ const Wrapper = styled.div`
  }

  .method-get {
-    color: var(--color-method-get);
+    color: ${(props) => props.theme.request.methods.get};
  }
  .method-post {
-    color: var(--color-method-post);
+    color: ${(props) => props.theme.request.methods.post};
  }
  .method-put {
-    color: var(--color-method-put);
+    color: ${(props) => props.theme.request.methods.put};
  }
  .method-delete {
-    color: var(--color-method-delete);
+    color: ${(props) => props.theme.request.methods.delete};
  }
  .method-patch {
-    color: var(--color-method-patch);
+    color: ${(props) => props.theme.request.methods.put};
  }
  .method-options {
-    color: var(--color-method-options);
+    color: ${(props) => props.theme.request.methods.put};
  }
  .method-head {
-    color: var(--color-method-head);
+    color: ${(props) => props.theme.request.methods.put};
  }
 `;

--- a/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/StyledWrapper.js
+++ b/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/StyledWrapper.js
@ -15,7 +15,7 @@ const Wrapper = styled.div`
  }

  .indent-block {
-    border-right: solid 1px #e1e1e1;
+    border-right: ${(props) => props.theme.sidebar.collection.item.indentBorder};
  }

  .collection-item-name {
@ -34,7 +34,7 @@ const Wrapper = styled.div`
    }

    &:hover {
-      background: #e7e7e7;
+      background: ${(props) => props.theme.sidebar.collection.item.hoverBg};
      .menu-icon {
        .dropdown {
          div[aria-expanded='false'] {
@ -45,14 +45,14 @@ const Wrapper = styled.div`
    }

    &.item-focused-in-tab {
-      background: var(--color-sidebar-collection-item-active-background);
+      background: ${(props) => props.theme.sidebar.collection.item.bg};

      &:hover {
-        background: var(--color-sidebar-collection-item-active-background) !important;
+        background: ${(props) => props.theme.sidebar.collection.item.bg} !important;
      }

      .indent-block {
-        border-right: solid 1px var(--color-sidebar-collection-item-active-indent-border);
+        border-right: ${(props) => props.theme.sidebar.collection.item.active.indentBorder} !important;
      }
    }

--- a/packages/bruno-app/src/components/Sidebar/LocalCollections/StyledWrapper.js
+++ b/packages/bruno-app/src/components/Sidebar/LocalCollections/StyledWrapper.js
@ -3,7 +3,7 @@ import styled from 'styled-components';
 const Wrapper = styled.div`
  .current-workspace {
    margin-inline: 0.5rem;
-    background: #e1e1e1;
+    background-color: ${(props) => props.theme.sidebar.workspace.bg};
    border-radius: 5px;

    .caret {
--- a/packages/bruno-app/src/components/Sidebar/MenuBar/StyledWrapper.js
+++ b/packages/bruno-app/src/components/Sidebar/MenuBar/StyledWrapper.js
@ -1,8 +1,8 @@
 import styled from 'styled-components';

 const Wrapper = styled.div`
-  background-color: rgb(44, 44, 44);
-  color: rgba(255, 255, 255, 0.5);
+  background-color:  ${(props) => props.theme.menubar.bg};
+  color: rgba(255, 255, 255, 0.4);
  min-height: 100vh;

  .menu-item {
--- a/packages/bruno-app/src/components/Sidebar/StyledWrapper.js
+++ b/packages/bruno-app/src/components/Sidebar/StyledWrapper.js
@ -1,8 +1,10 @@
 import styled from 'styled-components';

 const Wrapper = styled.div`
+  color: ${(props) => props.theme.sidebar.color};
+
  aside {
-    background-color: ${(props) => props.theme.theme['sidebar-background']};
+    background-color: ${(props) => props.theme['sidebar-background']};

    .collection-title {
      line-height: 1.5;
@ -25,6 +27,18 @@ const Wrapper = styled.div`
        top: -0.625rem;
      }
    }
+
+    .collection-filter {
+      input {
+        border: ${(props) => props.theme.sidebar.search.border};
+        border-radius: 2px;
+        background-color:  ${(props) => props.theme.sidebar.search.bg};
+
+        &:focus {
+          outline: none;
+        }
+      }
+    }
  }

  div.drag-sidebar {
@ -45,12 +59,4 @@ const Wrapper = styled.div`
  }
 `;

-export const BottomWrapper = styled.div`
-  background-color: ${(props) => props.theme.theme['sidebar-bottom-bg']};
-`;
-
-export const VersionNumber = styled.div`
-  color: ${(props) => props.theme.theme['primary-text']};
-`;
-
 export default Wrapper;
--- a/packages/bruno-app/src/components/Sidebar/TitleBar/StyledWrapper.js
+++ b/packages/bruno-app/src/components/Sidebar/TitleBar/StyledWrapper.js
@ -25,8 +25,4 @@ const StyledWrapper = styled.div`
  }
 `;

-export const SiteTitle = styled.div`
-  color: ${(props) => props.theme.theme['primary-text']};
-`;
-
 export default StyledWrapper;
--- a/packages/bruno-app/src/components/Sidebar/TitleBar/index.js
+++ b/packages/bruno-app/src/components/Sidebar/TitleBar/index.js
@ -10,11 +10,11 @@ import { IconFolders } from '@tabler/icons';
 import { isElectron } from 'utils/common/platform';
 import { useState, forwardRef, useRef } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
-import StyledWrapper, { SiteTitle } from './StyledWrapper';
 import { showHomePage } from 'providers/ReduxStore/slices/app';
 import { collectionImported } from 'providers/ReduxStore/slices/collections';
 import { openLocalCollection } from 'providers/ReduxStore/slices/collections/actions';
 import { addCollectionToWorkspace } from 'providers/ReduxStore/slices/workspaces/actions';
+import StyledWrapper from './StyledWrapper';

 const TitleBar = () => {
  const [createCollectionModalOpen, setCreateCollectionModalOpen] = useState(false);
@ -69,13 +69,13 @@ const TitleBar = () => {
        <div className="flex items-center cursor-pointer" onClick={handleTitleClick}>
          <Bruno width={30} />
        </div>
-        <SiteTitle
+        <div
          onClick={handleTitleClick}
-          className=" flex items-center font-medium select-none cursor-pointer"
+          className="flex items-center font-medium select-none cursor-pointer"
          style={{ fontSize: 14, paddingLeft: 6, position: 'relative', top: -1 }}
        >
          bruno
-        </SiteTitle>
+        </div>
        <div className="collection-dropdown flex flex-grow items-center justify-end">
          <Dropdown onCreate={onMenuDropdownCreate} icon={<MenuIcon />} placement="bottom-start">
            <div
--- a/packages/bruno-app/src/components/Sidebar/index.js
+++ b/packages/bruno-app/src/components/Sidebar/index.js
@ -108,7 +108,7 @@ const Sidebar = () => {
              <LocalCollections searchText={searchText} />
            </div>

-            <BottomWrapper className="flex px-1 py-2 items-center cursor-pointer text-gray-500 select-none">
+            <div className="footer flex px-1 py-2 items-center cursor-pointer select-none">
              <div className="flex items-center ml-1 text-xs ">
                {!leftMenuBarOpen && <IconChevronsRight size={24} strokeWidth={1.5} className="mr-2  hover:text-gray-700" onClick={() => dispatch(toggleLeftMenuBar())} />}
                {/* <IconLayoutGrid size={20} strokeWidth={1.5} className="mr-2"/> */}
@ -124,8 +124,8 @@ const Sidebar = () => {
                  title="GitHub"
                ></iframe>
              </div>
-              <VersionNumber className="flex flex-grow items-center justify-end text-xs mr-2">v1.25.2</VersionNumber>
-            </BottomWrapper>
+              <div className="flex flex-grow items-center justify-end text-xs mr-2">v0.2.0</div>
+            </div>
          </div>
        </div>
      </aside>
--- a/packages/bruno-app/src/components/ThemeSupport/index.js
+++ b/packages/bruno-app/src/components/ThemeSupport/index.js
@ -1,10 +1,12 @@
 import React from 'react';
 import Modal from 'components/Modal/index';
 import StyledWrapper from './StyledWrapper';
-import { useTheme } from 'styled-components';
+import { useTheme } from 'providers/Theme';

 const ThemeSupport = ({ onClose }) => {
-  const { storedTheme, themeKeys, setStoredTheme } = useTheme();
+  const { storedTheme, themeOptions, setStoredTheme } = useTheme();
+
+  console.log(themeOptions);

  const handleThemeChange = (e) => {
    setStoredTheme(e.target.value);
@ -15,7 +17,7 @@ const ThemeSupport = ({ onClose }) => {
      <Modal size="sm" title={'Support'} handleCancel={onClose} hideFooter={true}>
        <div className="collection-options">
          <select name="theme_switcher" onChange={handleThemeChange} defaultValue={storedTheme}>
-            {themeKeys.map((tk, index) => {
+            {themeOptions.map((tk, index) => {
              return (
                <option value={tk} key={index}>
                  {tk}
--- a/packages/bruno-app/src/components/Welcome/StyledWrapper.js
+++ b/packages/bruno-app/src/components/Welcome/StyledWrapper.js
@ -1,13 +1,15 @@
 import styled from 'styled-components';

 const StyledWrapper = styled.div`
-  color: ${(props) => props.theme.theme['primary-text']};
-
-  .create-request {
-    color: #737373;
+  .heading {
+    color:  ${(props) => props.theme.welcome.heading};
    font-size: 0.75rem;
  }

+  .muted {
+    color:  ${(props) => props.theme.welcome.muted};
+  }
+
  .collection-options {
    svg {
      position: relative;
@ -23,8 +25,4 @@ const StyledWrapper = styled.div`
  }
 `;

-export const SiteTitle = styled.div`
-  color: ${(props) => props.theme.theme['primary-text']};
-`;
-
 export default StyledWrapper;
--- a/packages/bruno-app/src/components/Welcome/index.js
+++ b/packages/bruno-app/src/components/Welcome/index.js
@ -5,14 +5,13 @@ import { useSelector, useDispatch } from 'react-redux';
 import { collectionImported } from 'providers/ReduxStore/slices/collections';
 import { openLocalCollection } from 'providers/ReduxStore/slices/collections/actions';
 import { addCollectionToWorkspace } from 'providers/ReduxStore/slices/workspaces/actions';
-import { IconPlus, IconUpload, IconFiles, IconFolders, IconPlayerPlay, IconBrandChrome, IconSpeakerphone, IconDeviceDesktop } from '@tabler/icons';
+import { IconBrandGithub, IconPlus, IconUpload, IconFiles, IconFolders, IconPlayerPlay, IconBrandChrome, IconSpeakerphone, IconDeviceDesktop } from '@tabler/icons';

 import Bruno from 'components/Bruno';
-import GithubSvg from 'assets/github.svg';
-import StyledWrapper, { SiteTitle } from './StyledWrapper';
 import CreateCollection from 'components/Sidebar/CreateCollection';
 import SelectCollection from 'components/Sidebar/Collections/SelectCollection';
 import importCollection, { importSampleCollection } from 'utils/collections/import';
+import StyledWrapper from './StyledWrapper';

 const Welcome = () => {
  const dispatch = useDispatch();
@ -67,10 +66,10 @@ const Welcome = () => {
      <div className="">
        <Bruno width={50} />
      </div>
-      <SiteTitle className="text-xl font-semibold select-none">bruno</SiteTitle>
+      <div className="text-xl font-semibold select-none">bruno</div>
      <div className="mt-4">Opensource API Client.</div>

-      <div className="uppercase font-semibold create-request mt-10">Collections</div>
+      <div className="uppercase font-semibold heading mt-10">Collections</div>
      <div className="mt-4 flex items-center collection-options select-none">
        <div className="flex items-center">
          <IconPlus size={18} strokeWidth={2} />
@ -94,7 +93,7 @@ const Welcome = () => {
        </div>
      </div>

-      <div className="uppercase font-semibold create-request mt-10 pt-6">Local Collections</div>
+      <div className="uppercase font-semibold heading mt-10 pt-6">Local Collections</div>
      {isPlatformElectron ? (
        <div className="mt-4 flex items-center collection-options select-none">
          <div className="flex items-center">
@ -111,10 +110,10 @@ const Welcome = () => {
          </div>
        </div>
      ) : (
-        <div className="mt-4 flex items-center collection-options select-none text-gray-600 text-xs">Local collections are only available on the desktop app.</div>
+        <div className="muted mt-4 flex items-center collection-options select-none text-gray-600 text-xs">Local collections are only available on the desktop app.</div>
      )}

-      <div className="uppercase font-semibold create-request mt-10 pt-6">Links</div>
+      <div className="uppercase font-semibold heading mt-10 pt-6">Links</div>
      <div className="mt-4 flex flex-col collection-options select-none">
        <div>
          <a href="https://www.usebruno.com/downloads" target="_blank" className="flex items-center">
@ -139,7 +138,7 @@ const Welcome = () => {
        </div> */}
        <div className="mt-2">
          <a href="https://github.com/usebruno/bruno" target="_blank" className="flex items-center">
-            <img src={GithubSvg.src} style={{ width: '18px' }} />
+            <IconBrandGithub size={18} strokeWidth={2} />
            <span className="label ml-2">Github</span>
          </a>
        </div>
--- a/packages/bruno-app/src/components/Workspaces/WorkspaceSelector/StyledWrapper.js
+++ b/packages/bruno-app/src/components/Workspaces/WorkspaceSelector/StyledWrapper.js
@ -3,7 +3,7 @@ import styled from 'styled-components';
 const Wrapper = styled.div`
  .current-workspace {
    margin-inline: 0.5rem;
-    background: #e1e1e1;
+    background-color:  ${(props) => props.theme.sidebar.workspace.bg};
    border-radius: 5px;

    .caret {
--- a/packages/bruno-app/src/pageComponents/Index/StyledWrapper.js
+++ b/packages/bruno-app/src/pageComponents/Index/StyledWrapper.js
@ -6,8 +6,6 @@ const Wrapper = styled.div`
  height: 100%;
  min-height: 100vh;

-  background-color: ${(props) => props.theme.theme['primary-theme']};
-
  &.is-dragging {
    cursor: col-resize !important;
  }
@ -34,17 +32,6 @@ const Wrapper = styled.div`
      }
    }
  }
-
-  .collection-filter {
-    input {
-      border: 1px solid rgb(211 211 211);
-      border-radius: 2px;
-
-      &:focus {
-        outline: none;
-      }
-    }
-  }
 `;

 export default Wrapper;
--- a/packages/bruno-app/src/pages/_app.js
+++ b/packages/bruno-app/src/pages/_app.js
@ -33,14 +33,14 @@ function MyApp({ Component, pageProps }) {
    <SafeHydrate>
      <NoSsr>
        <Provider store={ReduxStore}>
-          <AppProvider>
-            <ThemeProvider>
+          <ThemeProvider>
+            <AppProvider>
              <HotkeysProvider>
                <Toaster toastOptions={{ duration: 2000 }} />
                <Component {...pageProps} />
              </HotkeysProvider>
-            </ThemeProvider>
-          </AppProvider>
+            </AppProvider>
+          </ThemeProvider>
        </Provider>
      </NoSsr>
    </SafeHydrate>
--- a/packages/bruno-app/src/providers/App/StyledWrapper.js
+++ b/packages/bruno-app/src/providers/App/StyledWrapper.js
@ -0,0 +1,8 @@
+import styled from 'styled-components';
+
+const StyledWrapper = styled.div`
+  color:  ${(props) => props.theme.text};
+  background-color: ${(props) => props.theme.bg};
+`;
+
+export default StyledWrapper;
--- a/packages/bruno-app/src/providers/App/index.js
+++ b/packages/bruno-app/src/providers/App/index.js
@ -3,6 +3,7 @@ import useIdb from './useIdb';
 import useLocalCollectionTreeSync from './useLocalCollectionTreeSync';
 import { useDispatch } from 'react-redux';
 import { refreshScreenWidth } from 'providers/ReduxStore/slices/app';
+import StyledWrapper from './StyledWrapper';

 export const AppContext = React.createContext();

@ -28,7 +29,9 @@ export const AppProvider = (props) => {

  return (
    <AppContext.Provider {...props} value="appProvider">
-      {props.children}
+      <StyledWrapper>
+        {props.children}
+      </StyledWrapper>
    </AppContext.Provider>
  );
 };
--- a/packages/bruno-app/src/providers/Theme/index.js
+++ b/packages/bruno-app/src/providers/Theme/index.js
@ -1,4 +1,4 @@
-import ThemeManager from '../../../public/theme/index';
+import themes from 'themes/index';
 import useLocalStorage from 'src/hooks/useLocalStorage/index';

 import { createContext, useContext } from 'react';
@ -6,20 +6,20 @@ import { ThemeProvider as SCThemeProvider } from 'styled-components';

 export const ThemeContext = createContext();
 export const ThemeProvider = (props) => {
-  const [storedTheme, setStoredTheme] = useLocalStorage('bruno.theme', 'Light');
+  const [storedTheme, setStoredTheme] = useLocalStorage('bruno.theme', 'light');

-  const theme = ThemeManager[storedTheme];
-  const themeKeys = Object.keys(ThemeManager);
+  const theme = themes[storedTheme];
+  const themeOptions = Object.keys(themes);
  const value = {
    theme,
-    themeKeys,
+    themeOptions,
    storedTheme,
    setStoredTheme
  };

  return (
    <ThemeContext.Provider value={value}>
-      <SCThemeProvider theme={value} {...props} />
+      <SCThemeProvider theme={theme} {...props} />
    </ThemeContext.Provider>
  );
 };
--- a/packages/bruno-app/src/styles/globals.css
+++ b/packages/bruno-app/src/styles/globals.css
@ -3,7 +3,6 @@
  --color-brand: #546de5;
  --color-text: rgb(52 52 52);
  --color-sidebar-collection-item-active-indent-border: #d0d0d0;
-  --color-sidebar-collection-item-active-background: #e1e1e1;
  --color-sidebar-background: #f3f3f3;
  --color-request-dragbar-background: #efefef;
  --color-request-dragbar-background-active: rgb(200, 200, 200);
--- a/packages/bruno-app/src/themes/dark.js
+++ b/packages/bruno-app/src/themes/dark.js
@ -0,0 +1,79 @@
+const darkTheme = {
+  brand: '#546de5',
+  text: '#d4d4d4',
+  bg: '#1e1e1e',
+
+  menubar: {
+    bg: '#333333',
+  },
+
+  sidebar: {
+    color: '#ccc',
+
+    workspace: {
+      bg: '#3D3D3D'
+    },
+
+    search: {
+      border: '1px solid transparent',
+      bg: '#3D3D3D'
+    },
+
+    collection: {
+      item: {
+        bg: '#37373D',
+        hoverBg: '#2A2D2F',
+        indentBorder: 'solid 1px #585858',
+        active: {
+          indentBorder: 'solid 1px #4c4c4c'
+        }
+      }
+    }
+  },
+
+  welcome: {
+    heading: '#569cd6',
+    muted: '#9d9d9d'
+  },
+
+  dropdown: {
+    color: "rgb(204, 204, 204)",
+    bg: 'rgb(48, 48, 49)',
+    hoverBg: '#0F395E',
+    shadow: 'rgb(0 0 0 / 36%) 0px 2px 8px',
+  },
+
+  request: {
+    methods: {
+      get: '#8cd656',
+      post: '#cd56d6',
+      put: '#d69956',
+      delete: '#f06f57'
+    }
+  },
+
+  'primary-text': '#ffffff',
+  'secondary-text': '#929292',
+  'sidebar-collection-item-active-background': '#e1e1e1',
+  'sidebar-background': '#252526',
+  'sidebar-bottom-bg': '#68217a',
+  'request-dragbar-background': '#efefef',
+  'request-dragbar-background-active': 'rgb(200, 200, 200)',
+  'tab-inactive': 'rgb(155 155 155)',
+  'tab-active-border': '#546de5',
+  'layout-border': '#dedede',
+  'codemirror-border': '#efefef',
+  'codemirror-background': 'rgb(243, 243, 243)',
+  'text-link': '#1663bb',
+  'text-danger': 'rgb(185, 28, 28)',
+  'background-danger': '#dc3545',
+  'method-get': 'rgb(5, 150, 105)',
+  'method-post': '#8e44ad',
+  'method-delete': 'rgb(185, 28, 28)',
+  'method-patch': 'rgb(52 52 52)',
+  'method-options': 'rgb(52 52 52)',
+  'method-head': 'rgb(52 52 52)',
+  'table-stripe': '#f3f3f3'
+};
+
+export default darkTheme;
--- a/packages/bruno-app/src/themes/index.js
+++ b/packages/bruno-app/src/themes/index.js
@ -0,0 +1,7 @@
+import light from './light';
+import dark from './dark';
+
+export default {
+  light,
+  dark
+};
--- a/packages/bruno-app/src/themes/light.js
+++ b/packages/bruno-app/src/themes/light.js
@ -0,0 +1,80 @@
+const lightTheme = {
+  brand: '#546de5',
+  text: 'rgb(52, 52, 52)',
+  bg: '#fff',
+
+  menubar: {
+    bg: 'rgb(44, 44, 44)',
+  },
+
+  sidebar: {
+    color: 'rgb(52, 52, 52)',
+
+    workspace: {
+      bg: '#e1e1e1'
+    },
+
+    search: {
+      border: '1px solid rgb(211 211 211)',
+      bg: '#fff'
+    },
+
+    collection: {
+      item: {
+        bg: '#e1e1e1',
+        hoverBg: '#e7e7e7',
+        indentBorder: 'solid 1px #e1e1e1',
+        active: {
+          indentBorder: 'solid 1px #d0d0d0'
+        }
+      }
+    }
+  },
+
+  welcome: {
+    heading: '#737373',
+    muted: '#4b5563'
+  },
+
+  dropdown: {
+    color: "rgb(48 48 48)",
+    bg: 'rgb(48, 48, 49)',
+    hoverBg: '#e9e9e9',
+    shadow: 'rgb(50 50 93 / 25%) 0px 6px 12px -2px, rgb(0 0 0 / 30%) 0px 3px 7px -3px',
+  },
+
+  request: {
+    methods: {
+      get: 'rgb(5, 150, 105)',
+      post: '#8e44ad',
+      put: '#ca7811',
+      delete: 'rgb(185, 28, 28)'
+    }
+  },
+
+  
+  'primary-text': 'rgb(52 52 52)',
+  'secondary-text': '#929292',
+  'sidebar-collection-item-active-background': '#e1e1e1',
+  'sidebar-background': '#f3f3f3',
+  'sidebar-bottom-bg': '#f3f3f3',
+  'request-dragbar-background': '#efefef',
+  'request-dragbar-background-active': 'rgb(200, 200, 200)',
+  'tab-inactive': 'rgb(155 155 155)',
+  'tab-active-border': '#546de5',
+  'layout-border': '#dedede',
+  'codemirror-border': '#efefef',
+  'codemirror-background': 'rgb(243, 243, 243)',
+  'text-link': '#1663bb',
+  'text-danger': 'rgb(185, 28, 28)',
+  'background-danger': '#dc3545',
+  'method-get': 'rgb(5, 150, 105)',
+  'method-post': '#8e44ad',
+  'method-delete': 'rgb(185, 28, 28)',
+  'method-patch': 'rgb(52 52 52)',
+  'method-options': 'rgb(52 52 52)',
+  'method-head': 'rgb(52 52 52)',
+  'table-stripe': '#f3f3f3'
+};
+
+export default lightTheme;