Merge pull request #91 from SWM-FIRE/theme

Theme

src/components/room/ChattingItem.tsx

@@ -116,8 +116,8 @@ const Message = styled.div<userInterface>`
   overflow: hidden;
   border-radius: ${({ isMe }) =>
     isMe ? '0.8rem 0 0.8rem 0.8rem' : '0 0.8rem 0.8rem 0.8rem'};
-  background-color: ${({ isMe }) =>
-    isMe ? 'rgb(53, 55, 65)' : 'rgb(31, 35, 49)'};
+  background-color: ${({ isMe, theme }) =>
+    isMe ? theme.myChat : theme.otherChat};
 `;
 
 const Time = styled.div`

src/components/room/Header.tsx

@@ -53,7 +53,7 @@ const Component = styled.div`
   justify-content: space-between;
   align-items: center;
   /* background-color: rgba(30, 39, 69); */
-  background-color: #29292e;
+  background-color: ${({ theme }) => theme.header};
   width: 100%;
   height: 10rem;
   font-family: IBMPlexSansKRRegular;

src/components/room/Sidebar.tsx

@@ -13,7 +13,7 @@ export default function Sidebar() {
 
 const Component = styled.div`
   position: absolute;
-  background-color: #29292e;
+  background-color: ${({ theme }) => theme.chatBackground};
   margin: 2rem 2rem 2rem 2rem;
   border-radius: 1rem;
   padding: 3rem 2rem;

src/index.tsx

@@ -1,18 +1,16 @@
 // import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
-import { ThemeProvider } from 'styled-components';
 import App from './App';
 import GlobalStyle from './styles/global';
-import { defaultTheme } from './styles/theme';
 
 const rootElement = document.getElementById('root');
 if (!rootElement) throw new Error('Failed to find the root element');
 const root = createRoot(rootElement);
 root.render(
   // <StrictMode>
-  <ThemeProvider theme={defaultTheme}>
+  <>
     <GlobalStyle />
     <App />
-  </ThemeProvider>,
+  </>,
   // </StrictMode>,
 );

src/pages/Room.tsx

@@ -1,11 +1,19 @@
-import styled from 'styled-components';
+import styled, { ThemeProvider } from 'styled-components';
 import { useEffect } from 'react';
 import { useParams } from 'react-router-dom';
+import {
+  themeOcean,
+  themeCamping,
+  themeCosmos,
+  themeFire,
+  themeTravel,
+} from '../styles/theme';
 import Header from '../components/room/Header';
 import ScreenShare from '../components/room/ScreenShare';
 import Sidebar from '../components/room/Sidebar';
 import connectedUsersStore from '../stores/connectedUsersStore';
 import usePreventLeave from '../hooks/usePreventLeave';
+import useRoom from '../hooks/useRoom';
 import { roomConnection } from '../adapters/roomConnection';
 import controlModal from '../stores/controlModal';
 import ScreenShareModal from '../components/room/ScreenModal';
@@ -20,6 +28,27 @@ export default function Room() {
   const { isOpen } = controlModal();
   const { setUsers } = connectedUsersStore();
   const { stopMediaStream } = useCreateMediaStream();
+  const { data } = useRoom(roomId);
+  let theme;
+  switch (data.theme) {
+    case 'ocean':
+      theme = themeOcean;
+      break;
+    case 'fire':
+      theme = themeFire;
+      break;
+    case 'camping':
+      theme = themeCamping;
+      break;
+    case 'cosmos':
+      theme = themeCosmos;
+      break;
+    case 'travel':
+      theme = themeTravel;
+      break;
+    default:
+      theme = themeFire;
+  }
   roomConnection(roomId);
   onChatMessage();
   usePeerConnection();
@@ -41,7 +70,7 @@ export default function Room() {
   }, [history]);
 
   return (
-    <>
+    <ThemeProvider theme={theme}>
       <Component>
         <Header />
         <Contents>
@@ -50,7 +79,7 @@ export default function Room() {
         </Contents>
       </Component>
       {isOpen && <ScreenShareModal />}
-    </>
+    </ThemeProvider>
   );
 }
 
@@ -59,7 +88,7 @@ const Component = styled.div`
 `;
 
 const Contents = styled.div`
-  background-color: #18181b;
+  background-color: ${({ theme }) => theme.main};
   height: calc(100% - 10rem);
   display: flex;
   position: relative;

src/styles/styled.d.ts

@@ -22,5 +22,10 @@ declare module 'styled-components' {
     };
     activated: string;
     grayColor: string;
+    header: string;
+    main: string;
+    chatBackground: string;
+    myChat: string;
+    otherChat: string;
   }
 }

src/styles/theme.ts

@@ -1,6 +1,6 @@
 import { DefaultTheme } from 'styled-components';
 
-const defaultTheme: DefaultTheme = {
+const defaultTheme = {
   shadow: {
     defaultShadow:
       'rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px',
@@ -24,4 +24,56 @@ const defaultTheme: DefaultTheme = {
   grayColor: '#727272',
 };
 
-export { defaultTheme };
+const themeFire: DefaultTheme = {
+  ...defaultTheme,
+  header: '#0D0E13',
+  main: '#0A0A14',
+  chatBackground: '#1E1E22',
+  otherChat: '#1F2331',
+  myChat: '#353741',
+};
+
+const themeOcean: DefaultTheme = {
+  ...defaultTheme,
+  header: '#265B60',
+  main: '#387A81',
+  chatBackground: '#1A464A',
+  otherChat: '#1E3A41',
+  myChat: '#4B6163',
+};
+
+const themeCamping: DefaultTheme = {
+  ...defaultTheme,
+  header: '#1E0E2B',
+  main: '#251236',
+  chatBackground: '#190B24',
+  otherChat: '#3F3046',
+  myChat: '#453A4B',
+};
+
+const themeTravel: DefaultTheme = {
+  ...defaultTheme,
+  header: '#5F96B6',
+  main: '#517C95',
+  chatBackground: '#466B80',
+  otherChat: '#2B4651',
+  myChat: '#3A5A6B',
+};
+
+const themeCosmos: DefaultTheme = {
+  ...defaultTheme,
+  header: '#010102',
+  main: '#000000',
+  chatBackground: '#06070A',
+  otherChat: '#1F2331',
+  myChat: '#353741',
+};
+
+export {
+  defaultTheme,
+  themeFire,
+  themeOcean,
+  themeCamping,
+  themeTravel,
+  themeCosmos,
+};