Features/dark mode (#37)

* Added use local storage hook
* Added theme
* Added theme support
* Added theme provider
* Added dark theme for sidebar
* Added dark theme for main content area
* Added theme
* Added theme support
* Added theme provider
* Added dark theme for sidebar
* Added dark theme for main content area
This commit is contained in:
Sean
2022-10-21 03:14:09 +08:00
committed by GitHub
parent 3c3c9a6026
commit cbdfabb4db
16 changed files with 248 additions and 50 deletions

View File

@@ -25,4 +25,8 @@ const StyledWrapper = styled.div`
}
`;
export const SiteTitle = styled.div`
color: ${(props) => props.theme.theme['primary-text']};
`;
export default StyledWrapper;

View File

@@ -1,19 +1,20 @@
import React, { useState, forwardRef, useRef } from 'react';
import toast from 'react-hot-toast';
import Dropdown from 'components/Dropdown';
import Bruno from 'components/Bruno';
import Dropdown from 'components/Dropdown';
import CreateCollection from '../CreateCollection';
import importCollection from 'utils/collections/import';
import SelectCollection from 'components/Sidebar/Collections/SelectCollection';
import { IconDots } from '@tabler/icons';
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 { showHomePage } from 'providers/ReduxStore/slices/app';
import { IconDots } from '@tabler/icons';
import CreateCollection from '../CreateCollection';
import SelectCollection from 'components/Sidebar/Collections/SelectCollection';
import importCollection from 'utils/collections/import';
import { isElectron } from 'utils/common/platform';
import StyledWrapper from './StyledWrapper';
const TitleBar = () => {
const [createCollectionModalOpen, setCreateCollectionModalOpen] = useState(false);
@@ -68,13 +69,13 @@ const TitleBar = () => {
<div className="flex items-center cursor-pointer" onClick={handleTitleClick}>
<Bruno width={30} />
</div>
<div
<SiteTitle
onClick={handleTitleClick}
className=" flex items-center font-medium select-none cursor-pointer"
style={{ fontSize: 14, paddingLeft: 6, position: 'relative', top: -1 }}
>
bruno
</div>
</SiteTitle>
<div className="collection-dropdown flex flex-grow items-center justify-end">
<Dropdown onCreate={onMenuDropdownCreate} icon={<MenuIcon />} placement="bottom-start">
<div