Handle dark theme exceptions

Author: velopert

src/components/auth/AuthEmailForm.tsx

@@ -17,6 +17,10 @@ const AuthEmailFormBlock = styled.form`
     border: 1px solid ${themedPalette.border3};
     color: ${themedPalette.text1};
     border-right: none;
+    outline: none;
+    &:focus {
+      border: 1px solid ${themedPalette.primary1};
+    }
     &::placeholder {
       color: ${themedPalette.text3};
     }
@@ -26,7 +30,7 @@ const AuthEmailFormBlock = styled.form`
   }
   button {
     background: ${themedPalette.primary1};
-    color: white;
+    color: ${themedPalette.button_text};
     font-size: 1rem;
     font-weight: bold;
     outline: none;

src/components/auth/AuthEmailSuccess.tsx

@@ -12,7 +12,7 @@ const AuthEmailSuccessBlock = styled.div`
   padding-left: 0.75rem;
   padding-right: 0.75rem;
   height: 3rem;
-  color: ${themedPalette.primary1};
+  color: ${palette.teal9};
   .icon {
     font-size: 1.5rem;
   }

src/components/common/LabelInput.tsx

@@ -24,6 +24,7 @@ const LabelInputBlock = styled.div<{ focus: boolean }>`
   }
 
   input {
+    background: transparent;
     font-size: 1.5rem;
     border: none;
     outline: none;

src/components/common/MarkdownEditor.tsx

@@ -5,7 +5,7 @@ import './atom-one-light.css';
 import './atom-one-dark.css';
 import 'codemirror/lib/codemirror.css';
 import { themedPalette } from '../../lib/styles/themes';
-import palette from '../../lib/styles/palette';
+
 import 'codemirror/mode/markdown/markdown';
 import 'codemirror/addon/display/placeholder';
 
@@ -74,7 +74,7 @@ const MarkdownEditor = ({
     if (!textArea.current) return;
     const cm = CodeMirror.fromTextArea(textArea.current, {
       mode: 'markdown',
-      theme: 'one-light',
+      theme: 'one-dark',
       placeholder: '당신은 어떤 사람인가요? 당신에 대해서 알려주세요.',
       lineWrapping: true,
     });

src/components/common/atom-one-dark.css

@@ -10,9 +10,9 @@
   font-weight: 350;
   font-size: 18px;
   color: #abb2bf;
-  background-color: #121212;
+  background-color: #121212!important;
 }
-.cm-s-one-dark .CodeMirror-selected {background-color: #3e4451;}
+.cm-s-one-dark .CodeMirror-selected {background-color: rgba(255,255,255,0.15)!important;}
 .cm-s-one-dark .CodeMirror-gutter,
 .cm-s-one-dark .CodeMirror-gutters {
   border: none;

src/components/post/PostCommentsWrite.tsx

@@ -33,6 +33,7 @@ const StyledTextarea = styled(TextareaAutosize)`
   ${media.small} {
     margin-bottom: 1rem;
   }
+  background: ${themedPalette.bg_element1};
 `;
 
 export interface PostCommentsWriteProps {

src/components/write/TagInput.tsx

@@ -186,6 +186,7 @@ const StyledInput = styled.input`
   margin-bottom: 0.75rem;
   min-width: 8rem;
   border: none;
+  color: ${themedPalette.text1};
 `;
 
 const Tag = styled.div`

src/components/write/WriteFooter.tsx

@@ -11,7 +11,7 @@ const WriteFooterBlock = styled.div`
   height: 4rem;
   width: 100%;
   box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.1);
-  background: ${themedPalette.bg_element9};
+  background: ${themedPalette.editor_footer};
   display: flex;
   justify-content: space-between;
   align-items: center;

src/lib/styles/palette.ts

@@ -60,7 +60,7 @@ export const buttonColorMap: {
   },
   darkGray: {
     background: themedPalette.bg_element5,
-    color: 'white',
+    color: themedPalette.button_text,
     hoverBackground: themedPalette.bg_element6,
   },
   transparent: {

src/lib/styles/themes.ts

@@ -27,6 +27,7 @@ type ThemeVariables = {
 
   slight_layer: string;
   opaque_layer: string;
+  editor_footer: string;
 };
 
 type Theme = 'light' | 'dark';
@@ -63,6 +64,7 @@ const themeVariableSets: Record<Theme, ThemeVariables> = {
 
     slight_layer: 'rgba(0,0,0,0.05)',
     opaque_layer: 'rgba(249,249,249,0.85)',
+    editor_footer: '#FFFFFF',
   },
   dark: {
     bg_page1: '#121212',
@@ -93,6 +95,7 @@ const themeVariableSets: Record<Theme, ThemeVariables> = {
 
     slight_layer: 'rgba(255,255,255,0.1)',
     opaque_layer: 'rgba(0, 0, 0, 0.85)',
+    editor_footer: '#2E2E2E',
   },
 };
 

src/static/svg/index.ts

@@ -20,3 +20,6 @@ export { ReactComponent as SearchIcon } from './icon-search.svg'; // iconmonstr-
 export { ReactComponent as SearchIcon2 } from './icon-search-2.svg';
 export { ReactComponent as VelogIcon } from './velog-icon.svg';
 export { ReactComponent as CheckIcon } from './icon-check.svg';
+
+export { ReactComponent as MoonIcon } from './icon-moon.svg';
+export { ReactComponent as SunIcon } from './icon-sun.svg';