fix: var() 적용

KERT-core · Nov 5, 2024 · 11d0346 · 11d0346
1 parent 612b9a5
commit 11d0346
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 16 deletions.
diff --git a/src/pages/Login.jsx b/src/pages/Login.jsx
@@ -10,7 +10,7 @@ import { API } from '@/utils/api';
 import '@/styles/font.css';
 
 const Container = styled.div`
-  background-color: #080f17;
+  background-color: var(--background-color);
   margin: 0;
   padding: 0;
   display: flex;
@@ -31,7 +31,7 @@ const LoginContainer = styled.div`
 `;
 
 const LoginBox = styled.div`
-  background-color: #1b1e27;
+  background-color: var(--container-secondary-background);
   padding: 50px;
   border-radius: 10px;
   width: 450px;
@@ -48,14 +48,14 @@ const LoginHeader = styled.div`
     margin: 0;
     font-size: 20px;
     font-weight: 300;
-    color: #ffffff;
+    color: var(--primary-text-color);
   }
 
   h2 {
     margin: 10px 0 20px 0;
     font-size: 28px;
     font-weight: 700;
-    color: #ffffff;
+    color: var(--primary-text-color);
   }
 `;
 
@@ -79,7 +79,7 @@ const InputGroup = styled.div`
     display: block;
     margin-bottom: 5px;
     font-size: 18px;
-    color: #ffffff;
+    color: var(--primary-text-color);
   }
 
   input {

diff --git a/src/pages/MyPage.jsx b/src/pages/MyPage.jsx
@@ -15,7 +15,8 @@ import defaultProfilePic from '@/assets/icons/menu/User.png';
 import { API } from '@/utils/api';
 
 const Container = styled.div`
-  background-color: #0d0e14;
+  // background-color: #0d0e14;
+  background-color: var(--background-color);
   color: #ffffff;
   margin: 0;
   padding-top: 100px;
@@ -31,7 +32,7 @@ const MyPageContainer = styled.div`
 `;
 
 const Section = styled.div`
-  background-color: #1b1e27;
+  background-color: var(--container-secondary-background);
   padding: 40px;
   border-radius: 20px;
   margin-bottom: 30px;
@@ -68,7 +69,7 @@ const PicButtons = styled.div`
 
   .change-pic-btn {
     background-color: #3b82f6;
-    color: white;
+    color: var(--primary-text-color);
     padding: 10px 20px;
     border: none;
     border-radius: 8px;
@@ -77,7 +78,7 @@ const PicButtons = styled.div`
 
   .delete-pic-btn {
     background-color: #ff4d4d;
-    color: white;
+    color: var(--primary-text-color);
     padding: 10px 20px;
     border: none;
     border-radius: 8px;
@@ -90,7 +91,6 @@ const Form = styled.form`
   margin-top: 20px;
   margin-left: auto;
   margin-right: auto;
-  // margin-right: 20px;
   display: flex;
   flex-direction: column;
 `;
@@ -117,7 +117,7 @@ const InputGroup = styled.div`
     background-color: #2c2f3e;
     border: none;
     border-radius: 10px;
-    color: #ffffff;
+    color: var(--primary-text-color);
     outline: none;
 
     &:read-only {

diff --git a/src/pages/SignUp.jsx b/src/pages/SignUp.jsx
@@ -11,7 +11,7 @@ import { API } from '@/utils/api';
 import '@/font/main_font.css';
 
 const Container = styled.div`
-  background-color: #080f17;
+  background-color: var(--background-color);
   display: flex;
   justify-content: center;
   width: 100vw;
@@ -33,7 +33,7 @@ const SignUpContainer = styled.div`
 `;
 
 const SignUpBox = styled.div`
-  background-color: #1b1e27;
+  background-color: var(--container-secondary-background);
   padding: 50px;
   border-radius: 10px;
   width: 500px;
@@ -68,7 +68,7 @@ const SignUpForm = styled.form`
       display: block;
       margin-bottom: 5px;
       font-size: 18px;
-      color: #ffffff;
+      color: var(--primary-text-color);
     }
 
     input {
@@ -77,7 +77,7 @@ const SignUpForm = styled.form`
       border: 1px solid #ccc;
       border-radius: 5px;
       background-color: #1c1f25;
-      color: white;
+      color: var(--primary-text-color);
       outline: none;
     }
 
@@ -105,7 +105,7 @@ const SignUpButton = styled.button`
   background-color: #4a90e2;
   border: none;
   border-radius: 5px;
-  color: white;
+  color: var(--primary-text-color);
   font-size: 20px;
   cursor: pointer;
   margin-top: 20px;