adding darkmode to identity component

net/web/src/App.js

@@ -1,6 +1,6 @@
 
 import 'antd/dist/reset.css';
-import Colors from 'constants/Colors';
+import { Colors } from 'constants/Colors';
 import { HashRouter as Router, Routes, Route } from "react-router-dom";
 
 import { AppContextProvider } from 'context/AppContext';

net/web/src/access/Access.styled.js

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import Colors from 'constants/Colors';
+import { Colors } from 'constants/Colors';
 
 export const AccessWrapper = styled.div`
   height: 100%;

net/web/src/access/admin/Admin.styled.js

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import Colors from 'constants/Colors';
+import { Colors } from 'constants/Colors';
 
 export const AdminWrapper = styled.div`
   max-width: 400px;

net/web/src/access/createAccount/CreateAccount.styled.js

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import Colors from 'constants/Colors';
+import { Colors } from 'constants/Colors';
 
 export const CreateAccountWrapper = styled.div`
   max-width: 400px;

net/web/src/access/login/Login.styled.js

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import Colors from 'constants/Colors';
+import { Colors } from 'constants/Colors';
 
 export const LoginWrapper = styled.div`
   max-width: 400px;

net/web/src/carousel/Carousel.styled.js

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import Colors from 'constants/Colors';
+import { Colors } from 'constants/Colors';
 
 export const CarouselWrapper = styled.div`
   position: relative;

net/web/src/constants/Colors.js

@@ -1,4 +1,4 @@
-const Colors = {
+export const Colors = {
   background: '#8fbea7',
   primary: '#448866',
   formBackground: '#f2f2f2',
@@ -37,4 +37,45 @@ const Colors = {
   selectHover: '#fafafa',
 };
 
-export default Colors;
+export const LightTheme = {
+  headerArea: '#f2f2f2',
+  footerArea: '#f2f2f2',
+  itemArea: '#f8f8f8',
+  hoverArea: '#efefef',
+  selectedArea: '#e8e8e8',
+  enabledArea: '#448866',
+  disabledArea: '#cccccc',
+  mainText: '#444444',
+  hintText: '#777777',
+  activeText: '#ffffff',
+  idleText: '#aaaaaa',
+  placeholderText: '#777777',
+  linkText: '#448866',
+  labelText: '#888888',
+  alertText: '#ff8888',
+  itemLine: '#eeeeee',
+  sectionLine: '#dddddd',
+  headerLine: '#aaaaaa',
+};
+
+export const DarkTheme = {
+  headerArea: '#111111',
+  footerArea: '#111111',
+  itemArea: '#222222',
+  hoverArea: '#444444',
+  selectedArea: '#333333',
+  enabledArea: '#448866',
+  disabledArea: '#888888',
+  mainText: '#ffffff',
+  hintText: '#aaaaaa',
+  activeText: '#ffffff',
+  idleText: '#aaaaaa',
+  placeholderText: '#cccccc',
+  linkText: '#448866',
+  labelText: '#dddddd',
+  alertText: '#ff8888',
+  itemLine: '#555555',
+  sectionLine: '#777777',
+  headerLine: '#aaaaaa',
+};
+

net/web/src/context/useSettingsContext.hook.js

@@ -1,75 +1,5 @@
 import { useEffect, useState } from 'react';
-
-const LightTheme = {
-  background: '#8fbea7',
-  primary: '#448866',
-  formBackground: '#f2f2f2',
-  darkBackground: '#222222',
-  formFocus: '#f8f8f8',
-  formHover: '#efefef',
-  grey: '#888888',
-  white: '#ffffff',
-  black: '#000000',
-  divider: '#dddddd',
-  mask: '#dddddd',
-  encircle: '#cccccc',
-  alert: '#ff8888',
-  warn: '#dd4444',
-  enabled: '#444444',
-  disabled: '#aaaaaa',
-  text: '#444444',
-  link: '#0077CC',
-  itemDivider: '#eeeeee',
-  connected: '#44cc44',
-  connecting: '#dd88ff',
-  requested: '#4488ff',
-  pending: '#22aaaa',
-  confirmed: '#aaaaaa',
-  error: '#ff4444',
-  profileForm: '#e8e8e8',
-  profileDivider: '#aaaaaa',
-  statsForm: '#ededed',
-  statsDivider: '#afafaf',
-  channel: '#f2f2f2',
-  card: '#eeeeee',
-  selectHover: '#fafafa',
-};
-
-const DarkTheme = {
-  background: '#8fbea7',
-  primary: '#448866',
-  formBackground: '#f2f2f2',
-  darkBackground: '#222222',
-  formFocus: '#f8f8f8',
-  formHover: '#efefef',
-  grey: '#888888',
-  white: '#ffffff',
-  black: '#000000',
-  divider: '#dddddd',
-  mask: '#dddddd',
-  encircle: '#cccccc',
-  alert: '#ff8888',
-  warn: '#dd4444',
-  enabled: '#444444',
-  disabled: '#aaaaaa',
-  text: '#444444',
-  link: '#0077CC',
-  itemDivider: '#eeeeee',
-  connected: '#44cc44',
-  connecting: '#dd88ff',
-  requested: '#4488ff',
-  pending: '#22aaaa',
-  confirmed: '#aaaaaa',
-  error: '#ff4444',
-  profileForm: '#e8e8e8',
-  profileDivider: '#aaaaaa',
-  statsForm: '#ededed',
-  statsDivider: '#afafaf',
-  channel: '#f2f2f2',
-  card: '#eeeeee',
-  selectHover: '#fafafa',
-};
-
+import { LightTheme, DarkTheme } from 'constants/Colors';
 
 export function useSettingsContext() {
 

net/web/src/dashboard/Dashboard.styled.js

@@ -1,6 +1,6 @@
 import { Button, Space } from 'antd';
 import styled from 'styled-components';
-import Colors from 'constants/Colors';
+import { Colors } from 'constants/Colors';
 
 export const DashboardWrapper = styled.div`
   display: flex;

net/web/src/dashboard/copyButton/useCopyButton.hook.js

@@ -1,5 +1,5 @@
 import { useState, useRef } from 'react';
-import Colors from 'constants/Colors';
+import { Colors } from 'constants/Colors';
 
 export function useCopyButton() {
 

net/web/src/session/Session.styled.js

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import Colors from 'constants/Colors';
+import { Colors } from 'constants/Colors';
 
 export const RingingWrapper = styled.div`
   .ringing-list {

net/web/src/session/account/Account.styled.js

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import Colors from 'constants/Colors';
+import { Colors } from 'constants/Colors';
 
 export const AccountWrapper = styled.div`
   height: 100%;

net/web/src/session/account/profile/Profile.styled.js

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import Colors from 'constants/Colors';
+import { Colors } from 'constants/Colors';
 
 export const ProfileWrapper = styled.div`
   height: 100%;

net/web/src/session/account/profile/accountAccess/AccountAccess.styled.js

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import Colors from 'constants/Colors';
+import { Colors } from 'constants/Colors';
 
 export const AccountAccessWrapper = styled.div`
   display: flex;

net/web/src/session/bottomNav/BottomNav.styled.js

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import Colors from 'constants/Colors';
+import { Colors } from 'constants/Colors';
 
 export const BottomNavWrapper = styled.div`
   height: 100%;

net/web/src/session/cardSelect/CardSelect.styled.js

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import Colors from 'constants/Colors';
+import { Colors } from 'constants/Colors';
 
 export const CardSelectWrapper = styled.div`
   display: flex;

net/web/src/session/cardSelect/selectItem/SelectItem.styled.js

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import Colors from 'constants/Colors';
+import { Colors } from 'constants/Colors';
 
 export const SelectItemWrapper = styled.div`
   .active {

net/web/src/session/cards/Cards.styled.js

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import Colors from 'constants/Colors';
+import { Colors } from 'constants/Colors';
 
 export const CardsWrapper = styled.div`
   height: 100%;

net/web/src/session/cards/cardItem/CardItem.styled.js

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import Colors from 'constants/Colors';
+import { Colors } from 'constants/Colors';
 
 export const CardItemWrapper = styled.div`
   height: 48px;

net/web/src/session/channels/Channels.styled.js

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import Colors from 'constants/Colors';
+import { Colors } from 'constants/Colors';
 
 export const ChannelsWrapper = styled.div`
   height: 100%;

net/web/src/session/channels/addChannel/AddChannel.styled.js

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import Colors from 'constants/Colors';
+import { Colors } from 'constants/Colors';
 
 export const AddChannelWrapper = styled.div`
   display: flex;

net/web/src/session/channels/channelItem/ChannelItem.styled.js

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import Colors from 'constants/Colors';
+import { Colors } from 'constants/Colors';
 
 export const ChannelItemWrapper = styled.div`
   height: 48px;

net/web/src/session/contact/Contact.styled.js

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import Colors from 'constants/Colors';
+import { Colors } from 'constants/Colors';
 
 export const ContactWrapper = styled.div`
   height: 100%;

net/web/src/session/conversation/Conversation.styled.js

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import Colors from 'constants/Colors';
+import { Colors } from 'constants/Colors';
 
 export const ConversationWrapper = styled.div`
   height: 100%;

net/web/src/session/conversation/addTopic/AddTopic.styled.js

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import Colors from 'constants/Colors';
+import { Colors } from 'constants/Colors';
 
 export const AddTopicWrapper = styled.div`
   width: 100%;

net/web/src/session/conversation/addTopic/binaryFile/BinaryFile.styled.js

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import Colors from 'constants/Colors';
+import { Colors } from 'constants/Colors';
 
 export const BinaryFileWrapper = styled.div`
   position: relative;

net/web/src/session/conversation/channelHeader/ChannelHeader.styled.js

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import Colors from 'constants/Colors';
+import { Colors } from 'constants/Colors';
 
 export const ChannelHeaderWrapper = styled.div`
   margin-left: 16px;

net/web/src/session/conversation/topicItem/TopicItem.styled.js

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import Colors from 'constants/Colors';
+import { Colors } from 'constants/Colors';
 
 export const TopicItemWrapper = styled.div`
   display: flex;

net/web/src/session/conversation/topicItem/audioAsset/AudioAsset.jsx

@@ -4,7 +4,7 @@ import ReactResizeDetector from 'react-resize-detector';
 import { PlayCircleOutlined, MinusCircleOutlined, SoundOutlined } from '@ant-design/icons';
 import { AudioAssetWrapper, AudioModalWrapper } from './AudioAsset.styled';
 import { useAudioAsset } from './useAudioAsset.hook';
-import Colors from 'constants/Colors';
+import { Colors } from 'constants/Colors';
 
 import background from 'images/audio.png';
 

net/web/src/session/conversation/topicItem/audioAsset/AudioAsset.styled.js

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import Colors from 'constants/Colors';
+import { Colors } from 'constants/Colors';
 
 export const AudioAssetWrapper = styled.div`
   position: relative;

net/web/src/session/conversation/topicItem/binaryAsset/BinaryAsset.jsx

@@ -4,7 +4,7 @@ import ReactResizeDetector from 'react-resize-detector';
 import { DownloadOutlined } from '@ant-design/icons';
 import { BinaryAssetWrapper } from './BinaryAsset.styled';
 import { useBinaryAsset } from './useBinaryAsset.hook';
-import Colors from 'constants/Colors';
+import { Colors } from 'constants/Colors';
 
 export function BinaryAsset({ asset }) {
 

net/web/src/session/conversation/topicItem/imageAsset/ImageAsset.jsx

@@ -3,7 +3,7 @@ import { Progress, Modal, Spin } from 'antd';
 import ReactResizeDetector from 'react-resize-detector';
 import { ImageAssetWrapper, ImageModalWrapper } from './ImageAsset.styled';
 import { useImageAsset } from './useImageAsset.hook';
-import Colors from 'constants/Colors';
+import { Colors } from 'constants/Colors';
 
 export function ImageAsset({ asset }) {
 

net/web/src/session/conversation/topicItem/imageAsset/ImageAsset.styled.js

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import Colors from 'constants/Colors';
+import { Colors } from 'constants/Colors';
 
 export const ImageAssetWrapper = styled.div`
   position: relative;

net/web/src/session/conversation/topicItem/videoAsset/VideoAsset.jsx

@@ -3,7 +3,7 @@ import ReactResizeDetector from 'react-resize-detector';
 import { VideoCameraOutlined } from '@ant-design/icons';
 import { VideoAssetWrapper, VideoModalWrapper } from './VideoAsset.styled';
 import { useVideoAsset } from './useVideoAsset.hook';
-import Colors from 'constants/Colors';
+import { Colors } from 'constants/Colors';
 
 export function VideoAsset({ asset }) {
 

net/web/src/session/conversation/topicItem/videoAsset/VideoAsset.styled.js

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import Colors from 'constants/Colors';
+import { Colors } from 'constants/Colors';
 
 export const VideoAssetWrapper = styled.div`
   position: relative;

net/web/src/session/details/Details.styled.js

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import Colors from 'constants/Colors';
+import { Colors } from 'constants/Colors';
 
 export const DetailsWrapper = styled.div`
   height: 100%;

net/web/src/session/details/editMembers/EditMembers.styled.js

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import Colors from 'constants/Colors';
+import { Colors } from 'constants/Colors';
 
 export const EditMembersWrapper = styled.div`
   display: flex;

net/web/src/session/identity/Identity.styled.js

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import Colors from 'constants/Colors';
+import { Colors } from 'constants/Colors';
 
 export const IdentityWrapper = styled.div`
   width: 100%;
@@ -9,18 +9,26 @@ export const IdentityWrapper = styled.div`
   align-items: center;
   padding-left: 16px;
   padding-right: 16px;
-  border-bottom: 1px solid ${Colors.divider};
   @media (prefers-color-scheme: light) {
-    background-color: ${props => props.theme.light.formBackground};
+    background-color: ${props => props.theme.light.headerArea};
+    border-bottom: 1px solid ${props => props.theme.light.sectionLine};
+    color: ${props => props.theme.light.mainText};
   }
   @media (prefers-color-scheme: dark) {
-    background-color: ${props => props.theme.dark.formBackground};
+    background-color: ${props => props.theme.dark.headerArea};
+    border-bottom: 1px solid ${props => props.theme.dark.sectionLine};
+    color: ${props => props.theme.dark.mainText};
   }
   flex-shrink: 0;
 
   &:hover {
     cursor: pointer;
-    background-color: ${Colors.formFocus};
+    @media (prefers-color-scheme: light) {
+      background-color: ${props => props.theme.light.hoverArea};
+    }
+    @media (prefers-color-scheme: dark) {
+      background-color: ${props => props.theme.dark.hoverArea};
+    }
 
     .drop {
       font-weight: bold;
@@ -31,7 +39,14 @@ export const IdentityWrapper = styled.div`
     padding-left: 4px;
     padding-right: 4px;
     border-radius: 8px;
-    border: 1px solid ${Colors.formBackground};
+    @media (prefers-color-scheme: light) {
+      border: 1px solid ${props => props.theme.light.sectionLine};
+      color: ${props => props.theme.light.mainText};
+    }
+    @media (prefers-color-scheme: dark) {
+      border: 1px solid ${props => props.theme.dark.sectionLine};
+      color: ${props => props.theme.dark.mainText};
+    }
   }
 
   .label {
@@ -73,15 +88,30 @@ export const LogoutContent = styled.div`
 
   .logoutMode {
     padding-right: 8px;
-    color: ${Colors.text};
+    @media (prefers-color-scheme: light) {
+      color: ${props => props.theme.light.mainText};
+    }
+    @media (prefers-color-scheme: dark) {
+      color: ${props => props.theme.dark.mainText};
+    }
   }
 `
 
 export const ErrorNotice = styled.div`
-  color: ${Colors.alert};
+  @media (prefers-color-scheme: light) {
+    color: ${props => props.theme.light.alertText};
+  }
+  @media (prefers-color-scheme: dark) {
+    color: ${props => props.theme.dark.alertText};
+  }
 `
 
 export const InfoNotice = styled.div`
-  color: ${Colors.primary};
+  @media (prefers-color-scheme: light) {
+    color: ${props => props.theme.light.linkText};
+  }
+  @media (prefers-color-scheme: dark) {
+    color: ${props => props.theme.dark.linkText};
+  }
 `
 

net/web/src/session/listing/Listing.styled.js

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import Colors from 'constants/Colors';
+import { Colors } from 'constants/Colors';
 
 export const ListingWrapper = styled.div`
   height: 100%;

net/web/src/session/listing/listingItem/ListingItem.styled.js

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import Colors from 'constants/Colors';
+import { Colors } from 'constants/Colors';
 
 export const ListingItemWrapper = styled.div`
   height: 48px;