From 865428a16fe1b41d970ad56466078528d6f08efe Mon Sep 17 00:00:00 2001
From: siwolee <siwolee@student.42seoul.kr>
Date: Mon, 8 Jul 2024 17:12:41 +0900
Subject: [PATCH 1/3] fix: scss cannot set html[dataset], move it to global.css

---
 styles/agenda/common.scss | 48 ---------------------------------------
 styles/color-theme.css    | 48 +++++++++++++++++++++++++++++++++++++++
 styles/globals.css        |  2 ++
 3 files changed, 50 insertions(+), 48 deletions(-)
 create mode 100644 styles/color-theme.css

diff --git a/styles/agenda/common.scss b/styles/agenda/common.scss
index 4c3dfc363..2b65709e6 100644
--- a/styles/agenda/common.scss
+++ b/styles/agenda/common.scss
@@ -17,51 +17,3 @@ $color-coalition-lee: #ff8a85;
 
 // font-family
 $font-family-menu: 'Cafe24 Simplehae';
-
-// color
-$bg-light: linear-gradient(180deg, #c9c9c9 0%, #6d5b93 100%);
-$bg-dark: linear-gradient(180deg, #38253a 0%, #604ecd 73%, #999772 100%);
-
-$text-light: black;
-$text-dark: white;
-$border-light: 1px solid black;
-$border-dark: 1px solid white;
-
-$box-shadow-light: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
-$box-shadow-dark: 0px 4px 4px 0px rgba(255, 255, 255, 0.25);
-
-$highlight-yellow-light: #f8df85;
-$highlight-violet-light: #af71ff;
-$highlight-yellow-dark: #ff8534;
-$highlight-violet-dark: #af71ff; // 나중에 수정 - 다크모드 색상 변경 필요
-
-$box-bg-1-light: #f8f8f8;
-$box-bg-2-light: #c8c8c8;
-$box-bg-3-light: #b0b0b0;
-$box-bg-1-dark: #666666;
-$box-bg-2-dark: #888888;
-$box-bg-3-dark: #a7a7a7;
-
-html[data-theme='light'] {
-  --color-bg: #{$bg-light};
-  --color-text: #{$text-light};
-  --default-border: #{$border-light};
-  --default-box-shadow: #{$border-light};
-  --highlight-yellow: #{$highlight-yellow-light};
-  --highlight-violet: #{$highlight-violet-light};
-  --box-bg-1: #{$box-bg-1-light};
-  --box-bg-2: #{$box-bg-2-light};
-  --box-bg-3: #{$box-bg-3-light};
-}
-
-html[data-theme='dark'] {
-  --color-bg: #{$bg-dark};
-  --color-text: #{$text-dark};
-  --default-border: #{$border-dark};
-  --default-box-shadow: #{$border-dark};
-  --highlight-yellow: #{$highlight-yellow-dark};
-  --highlight-violet: #{$highlight-violet-dark};
-  --box-bg-1: #{$box-bg-1-dark};
-  --box-bg-2: #{$box-bg-2-dark};
-  --box-bg-3: #{$box-bg-3-dark};
-}
diff --git a/styles/color-theme.css b/styles/color-theme.css
new file mode 100644
index 000000000..7e9795739
--- /dev/null
+++ b/styles/color-theme.css
@@ -0,0 +1,48 @@
+/* dark - light mode */
+:root {
+  --bg-light: linear-gradient(180deg, #c9c9c9 0%, #6d5b93 100%);
+  --bg-dark: linear-gradient(180deg, #38253a 0%, #604ecd 73%, #999772 100%);
+  --text-light: #000000;
+  --text-dark: #ffffff;
+  --border-light: 1px solid black;
+  --border-dark: 1px solid white;
+
+  --box-shadow-light: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
+  --box-shadow-dark: 0px 4px 4px 0px rgba(255, 255, 255, 0.25);
+
+  --highlight-yellow-light: #f8df85;
+  --highlight-violet-light: #af71ff;
+  --highlight-yellow-dark: #ff8534;
+  --highlight-violet-dark: #af71ff;
+
+  --box-bg-1-light: #f8f8f8;
+  --box-bg-2-light: #c8c8c8;
+  --box-bg-3-light: #b0b0b0;
+  --box-bg-1-dark: #666666;
+  --box-bg-2-dark: #888888;
+  --box-bg-3-dark: #a7a7a7;
+}
+
+html[data-theme='light'] {
+  --color-bg: #{linear-gradient(180deg, #c9c9c9 0%, #6d5b93 100%)};
+  --color-text: #{$text-light};
+  --default-border: #{$border-light};
+  --default-box-shadow: #{$border-light};
+  --highlight-yellow: #{$highlight-yellow-light};
+  --highlight-violet: #{$highlight-violet-light};
+  --box-bg-1: #{$box-bg-1-light};
+  --box-bg-2: #{$box-bg-2-light};
+  --box-bg-3: #{$box-bg-3-light};
+}
+
+html[data-theme='dark'] {
+  --color-bg: #{linear-gradient(180deg, #38253a 0%, #604ecd 73%, #999772 100%)};
+  --color-text: #{$text-dark};
+  --default-border: #{$border-dark};
+  --default-box-shadow: #{$border-dark};
+  --highlight-yellow: #{$highlight-yellow-dark};
+  --highlight-violet: #{$highlight-violet-dark};
+  --box-bg-1: #{$box-bg-1-dark};
+  --box-bg-2: #{$box-bg-2-dark};
+  --box-bg-3: #{$box-bg-3-dark};
+}
diff --git a/styles/globals.css b/styles/globals.css
index e73867385..32171d567 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -1,3 +1,5 @@
+@import url('./color-theme.css');
+
 html,
 body {
   padding: 0;

From c55a3d7ed4bba5fa40a67bf3350a039ae404fa2a Mon Sep 17 00:00:00 2001
From: siwolee <siwolee@student.42seoul.kr>
Date: Mon, 8 Jul 2024 17:12:41 +0900
Subject: [PATCH 2/3] fix: scss cannot set html[dataset], move it to global.css

---
 styles/agenda/common.scss | 48 ---------------------------------------
 styles/color-theme.css    | 48 +++++++++++++++++++++++++++++++++++++++
 styles/globals.css        |  2 ++
 3 files changed, 50 insertions(+), 48 deletions(-)
 create mode 100644 styles/color-theme.css

diff --git a/styles/agenda/common.scss b/styles/agenda/common.scss
index 4c3dfc363..2b65709e6 100644
--- a/styles/agenda/common.scss
+++ b/styles/agenda/common.scss
@@ -17,51 +17,3 @@ $color-coalition-lee: #ff8a85;
 
 // font-family
 $font-family-menu: 'Cafe24 Simplehae';
-
-// color
-$bg-light: linear-gradient(180deg, #c9c9c9 0%, #6d5b93 100%);
-$bg-dark: linear-gradient(180deg, #38253a 0%, #604ecd 73%, #999772 100%);
-
-$text-light: black;
-$text-dark: white;
-$border-light: 1px solid black;
-$border-dark: 1px solid white;
-
-$box-shadow-light: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
-$box-shadow-dark: 0px 4px 4px 0px rgba(255, 255, 255, 0.25);
-
-$highlight-yellow-light: #f8df85;
-$highlight-violet-light: #af71ff;
-$highlight-yellow-dark: #ff8534;
-$highlight-violet-dark: #af71ff; // 나중에 수정 - 다크모드 색상 변경 필요
-
-$box-bg-1-light: #f8f8f8;
-$box-bg-2-light: #c8c8c8;
-$box-bg-3-light: #b0b0b0;
-$box-bg-1-dark: #666666;
-$box-bg-2-dark: #888888;
-$box-bg-3-dark: #a7a7a7;
-
-html[data-theme='light'] {
-  --color-bg: #{$bg-light};
-  --color-text: #{$text-light};
-  --default-border: #{$border-light};
-  --default-box-shadow: #{$border-light};
-  --highlight-yellow: #{$highlight-yellow-light};
-  --highlight-violet: #{$highlight-violet-light};
-  --box-bg-1: #{$box-bg-1-light};
-  --box-bg-2: #{$box-bg-2-light};
-  --box-bg-3: #{$box-bg-3-light};
-}
-
-html[data-theme='dark'] {
-  --color-bg: #{$bg-dark};
-  --color-text: #{$text-dark};
-  --default-border: #{$border-dark};
-  --default-box-shadow: #{$border-dark};
-  --highlight-yellow: #{$highlight-yellow-dark};
-  --highlight-violet: #{$highlight-violet-dark};
-  --box-bg-1: #{$box-bg-1-dark};
-  --box-bg-2: #{$box-bg-2-dark};
-  --box-bg-3: #{$box-bg-3-dark};
-}
diff --git a/styles/color-theme.css b/styles/color-theme.css
new file mode 100644
index 000000000..7e9795739
--- /dev/null
+++ b/styles/color-theme.css
@@ -0,0 +1,48 @@
+/* dark - light mode */
+:root {
+  --bg-light: linear-gradient(180deg, #c9c9c9 0%, #6d5b93 100%);
+  --bg-dark: linear-gradient(180deg, #38253a 0%, #604ecd 73%, #999772 100%);
+  --text-light: #000000;
+  --text-dark: #ffffff;
+  --border-light: 1px solid black;
+  --border-dark: 1px solid white;
+
+  --box-shadow-light: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
+  --box-shadow-dark: 0px 4px 4px 0px rgba(255, 255, 255, 0.25);
+
+  --highlight-yellow-light: #f8df85;
+  --highlight-violet-light: #af71ff;
+  --highlight-yellow-dark: #ff8534;
+  --highlight-violet-dark: #af71ff;
+
+  --box-bg-1-light: #f8f8f8;
+  --box-bg-2-light: #c8c8c8;
+  --box-bg-3-light: #b0b0b0;
+  --box-bg-1-dark: #666666;
+  --box-bg-2-dark: #888888;
+  --box-bg-3-dark: #a7a7a7;
+}
+
+html[data-theme='light'] {
+  --color-bg: #{linear-gradient(180deg, #c9c9c9 0%, #6d5b93 100%)};
+  --color-text: #{$text-light};
+  --default-border: #{$border-light};
+  --default-box-shadow: #{$border-light};
+  --highlight-yellow: #{$highlight-yellow-light};
+  --highlight-violet: #{$highlight-violet-light};
+  --box-bg-1: #{$box-bg-1-light};
+  --box-bg-2: #{$box-bg-2-light};
+  --box-bg-3: #{$box-bg-3-light};
+}
+
+html[data-theme='dark'] {
+  --color-bg: #{linear-gradient(180deg, #38253a 0%, #604ecd 73%, #999772 100%)};
+  --color-text: #{$text-dark};
+  --default-border: #{$border-dark};
+  --default-box-shadow: #{$border-dark};
+  --highlight-yellow: #{$highlight-yellow-dark};
+  --highlight-violet: #{$highlight-violet-dark};
+  --box-bg-1: #{$box-bg-1-dark};
+  --box-bg-2: #{$box-bg-2-dark};
+  --box-bg-3: #{$box-bg-3-dark};
+}
diff --git a/styles/globals.css b/styles/globals.css
index e73867385..32171d567 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -1,3 +1,5 @@
+@import url('./color-theme.css');
+
 html,
 body {
   padding: 0;

From 3ee1325f1a1488a367d693dbc2fedc78308174be Mon Sep 17 00:00:00 2001
From: siwolee <siwolee@student.42seoul.kr>
Date: Tue, 9 Jul 2024 11:55:53 +0900
Subject: [PATCH 3/3] fix: css variavle type

---
 styles/color-theme.css | 36 ++++++++++++++++++------------------
 1 file changed, 18 insertions(+), 18 deletions(-)

diff --git a/styles/color-theme.css b/styles/color-theme.css
index 7e9795739..4bf0031a0 100644
--- a/styles/color-theme.css
+++ b/styles/color-theme.css
@@ -24,25 +24,25 @@
 }
 
 html[data-theme='light'] {
-  --color-bg: #{linear-gradient(180deg, #c9c9c9 0%, #6d5b93 100%)};
-  --color-text: #{$text-light};
-  --default-border: #{$border-light};
-  --default-box-shadow: #{$border-light};
-  --highlight-yellow: #{$highlight-yellow-light};
-  --highlight-violet: #{$highlight-violet-light};
-  --box-bg-1: #{$box-bg-1-light};
-  --box-bg-2: #{$box-bg-2-light};
-  --box-bg-3: #{$box-bg-3-light};
+  --color-bg: var(--bg-light);
+  --color-text: var(--text-light);
+  --default-border: var(--border-light);
+  --default-box-shadow: var(--border-light);
+  --highlight-yellow: var(--highlight-yellow-light);
+  --highlight-violet: var(--highlight-violet-light);
+  --box-bg-1: var(--box-bg-1-light);
+  --box-bg-2: var(--box-bg-2-light);
+  --box-bg-3: var(--box-bg-3-light);
 }
 
 html[data-theme='dark'] {
-  --color-bg: #{linear-gradient(180deg, #38253a 0%, #604ecd 73%, #999772 100%)};
-  --color-text: #{$text-dark};
-  --default-border: #{$border-dark};
-  --default-box-shadow: #{$border-dark};
-  --highlight-yellow: #{$highlight-yellow-dark};
-  --highlight-violet: #{$highlight-violet-dark};
-  --box-bg-1: #{$box-bg-1-dark};
-  --box-bg-2: #{$box-bg-2-dark};
-  --box-bg-3: #{$box-bg-3-dark};
+  --color-bg: var(--bg-dark);
+  --color-text: var(--text-dark);
+  --default-border: var(--border-dark);
+  --default-box-shadow: var(--border-dark);
+  --highlight-yellow: var(--highlight-yellow-dark);
+  --highlight-violet: var(--highlight-violet-dark);
+  --box-bg-1: var(--box-bg-1-dark);
+  --box-bg-2: var(--box-bg-2-dark);
+  --box-bg-3: var(--box-bg-3-dark);
 }