mirror of
https://github.com/usebruno/bruno.git
synced 2024-11-24 17:03:47 +01:00
feat: darkmode (sidebar, menubar and welcome page #23)
This commit is contained in:
Anoop M D
parent
cbdfabb4db
commit
8e70e191e1
@ -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/*"],
|
||||
|
||||
@ -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};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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};
|
||||
}
|
||||
`;
|
||||
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -25,8 +25,4 @@ const StyledWrapper = styled.div`
|
||||
}
|
||||
`;
|
||||
|
||||
export const SiteTitle = styled.div`
|
||||
color: ${(props) => props.theme.theme['primary-text']};
|
||||
`;
|
||||
|
||||
export default StyledWrapper;
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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}
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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>
|
||||
|
||||
8
packages/bruno-app/src/providers/App/StyledWrapper.js
Normal file
8
packages/bruno-app/src/providers/App/StyledWrapper.js
Normal file
@ -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;
|
||||
@ -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>
|
||||
);
|
||||
};
|
||||
|
||||
@ -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>
|
||||
);
|
||||
};
|
||||
|
||||
@ -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);
|
||||
|
||||
79
packages/bruno-app/src/themes/dark.js
Normal file
79
packages/bruno-app/src/themes/dark.js
Normal file
@ -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;
|
||||
7
packages/bruno-app/src/themes/index.js
Normal file
7
packages/bruno-app/src/themes/index.js
Normal file
@ -0,0 +1,7 @@
|
||||
import light from './light';
|
||||
import dark from './dark';
|
||||
|
||||
export default {
|
||||
light,
|
||||
dark
|
||||
};
|
||||
80
packages/bruno-app/src/themes/light.js
Normal file
80
packages/bruno-app/src/themes/light.js
Normal file
@ -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;
|
||||
Loading…
Reference in New Issue
Block a user