Enable dark mode and fix theme

front/src/modules/ui/layout/AppLayout.tsx

@@ -1,10 +1,8 @@
-import { ThemeProvider } from '@emotion/react';
 import styled from '@emotion/styled';
 
 import { User } from '@/users/interfaces/user.interface';
 
 import { Navbar } from './navbar/Navbar';
-import { lightTheme } from './styles/themes';
 
 const StyledLayout = styled.div`
   display: flex;
@@ -31,17 +29,15 @@ type OwnProps = {
 export function AppLayout({ children, user }: OwnProps) {
   const userIsAuthenticated = !!user;
   return (
-    <ThemeProvider theme={lightTheme}>
-      <StyledLayout>
-        {userIsAuthenticated ? (
-          <>
-            <Navbar user={user} workspace={user?.workspaceMember?.workspace} />
-            <MainContainer>{children}</MainContainer>
-          </>
-        ) : (
-          children
-        )}
-      </StyledLayout>
-    </ThemeProvider>
+    <StyledLayout>
+      {userIsAuthenticated ? (
+        <>
+          <Navbar user={user} workspace={user?.workspaceMember?.workspace} />
+          <MainContainer>{children}</MainContainer>
+        </>
+      ) : (
+        children
+      )}
+    </StyledLayout>
   );
 }

front/src/modules/ui/layout/navbar/WorkspaceContainer.tsx

@@ -36,6 +36,7 @@ const StyledName = styled.div`
   font-family: 'Inter';
   font-weight: 500;
   font-size: ${(props) => props.theme.fontSizeLarge};
+  color: ${(props) => props.theme.text80};
 `;
 
 function WorkspaceContainer({ workspace }: OwnProps) {

front/src/modules/ui/layout/styles/themes.ts

@@ -27,10 +27,11 @@ const commonTheme = {
 
 const lightThemeSpecific = {
   noisyBackground: `url(${LightNoise.toString()});`,
+
   primaryBackground: '#fff',
   secondaryBackground: '#fcfcfc',
   tertiaryBackground: '#f5f5f5',
-  quadraryBackground: '#ebebeb',
+  quaternaryBackground: '#ebebeb',
 
   pinkBackground: '#ffe5f4',
   greenBackground: '#e6fff2',
@@ -68,8 +69,8 @@ const darkThemeSpecific: typeof lightThemeSpecific = {
   noisyBackground: `url(${DarkNoise.toString()});`,
   primaryBackground: '#141414',
   secondaryBackground: '#171717',
-  tertiaryBackground: '#333333',
-  quadraryBackground: '#444444',
+  tertiaryBackground: '#1B1B1B',
+  quaternaryBackground: '#1D1D1D',
 
   pinkBackground: '#cc0078',
   greenBackground: '#1e7e50',
@@ -115,6 +116,7 @@ export const textInputStyle = (props: any) =>
     border: none;
     outline: none;
     background-color: transparent;
+    color: ${props.theme.text80};
 
     &::placeholder,
     &::-webkit-input-placeholder {