Handles code theme and change default thumbnail img

Author: velopert

src/components/base/hooks/useToggleTheme.ts

@@ -1,16 +1,11 @@
-import { useDispatch, useSelector } from 'react-redux';
+import { useDispatch } from 'react-redux';
+import { useTheme } from '../../../lib/hooks/useTheme';
 import storage from '../../../lib/storage';
-import { RootState } from '../../../modules';
 import darkMode from '../../../modules/darkMode';
 
 export function useToggleTheme() {
   const dispatch = useDispatch();
-  const darkModeState = useSelector((state: RootState) => state.darkMode);
-  const theme = (() => {
-    if (darkModeState.systemTheme === 'not-ready') return 'light';
-    if (darkModeState.theme !== 'default') return darkModeState.theme;
-    return darkModeState.systemTheme;
-  })();
+  const theme = useTheme();
 
   const saveToStorage = (value: 'light' | 'dark') => {
     storage.setItem('theme', value); // For CSR

src/components/common/MarkdownEditor.tsx

@@ -8,6 +8,7 @@ import { themedPalette } from '../../lib/styles/themes';
 
 import 'codemirror/mode/markdown/markdown';
 import 'codemirror/addon/display/placeholder';
+import { useTheme } from '../../lib/hooks/useTheme';
 
 const MarkdownEditorBlock = styled.div`
   .CodeMirror {
@@ -69,12 +70,14 @@ const MarkdownEditor = ({
     [onChangeMarkdown],
   );
 
+  const theme = useTheme();
+
   // initialize editor
   useEffect(() => {
     if (!textArea.current) return;
     const cm = CodeMirror.fromTextArea(textArea.current, {
       mode: 'markdown',
-      theme: 'one-dark',
+      theme: `one-${theme}`,
       placeholder: '당신은 어떤 사람인가요? 당신에 대해서 알려주세요.',
       lineWrapping: true,
     });

src/components/common/MarkdownRender.tsx

@@ -31,11 +31,8 @@ export interface MarkdownRenderProps {
 }
 
 const MarkdownRenderBlock = styled.div`
-  &.atom-one-dark {
-    ${prismThemes['atom-one-dark']}
-  }
-  &.atom-one-light {
-    ${prismThemes['atom-one-light']}
+  &.atom-one {
+    ${prismThemes['atom-one']}
   }
   &.github {
     ${prismThemes['github']}
@@ -203,7 +200,7 @@ type RenderedElement =
 
 const MarkdownRender: React.FC<MarkdownRenderProps> = ({
   markdown,
-  codeTheme = 'atom-one-dark',
+  codeTheme = 'atom-one',
   onConvertFinish,
   editing,
 }) => {

src/components/write/WriteMarkdownEditor.tsx

@@ -33,6 +33,7 @@ export interface MarkdownEditorProps {
   onUpload: () => void;
   lastUploadedImage: string | null;
   initialBody: string;
+  theme: 'light' | 'dark';
 }
 
 type MarkdownEditorState = {
@@ -124,7 +125,7 @@ export default class WriteMarkdownEditor extends React.Component<
     if (!this.editorElement.current) return;
     this.codemirror = CodeMirror.fromTextArea(this.editorElement.current, {
       mode: 'markdown',
-      theme: 'one-dark',
+      theme: `one-${this.props.theme}`,
       placeholder: '당신의 이야기를 적어보세요...',
       // viewportMargin: Infinity,
       lineWrapping: true,

src/containers/write/MarkdownEditorContainer.tsx

@@ -41,6 +41,7 @@ import embedPlugin from '../../lib/remark/embedPlugin';
 import { Helmet } from 'react-helmet-async';
 import { toast } from 'react-toastify';
 import { usePrevious } from 'react-use';
+import { useTheme } from '../../lib/hooks/useTheme';
 
 export type MarkdownEditorContainerProps = {};
 
@@ -59,9 +60,8 @@ const MarkdownEditorContainer: React.FC<MarkdownEditorContainerProps> = () => {
     tags,
   } = useSelector((state: RootState) => state.write);
   const [writePost] = useMutation<WritePostResponse>(WRITE_POST);
-  const [createPostHistory] = useMutation<CreatePostHistoryResponse>(
-    CREATE_POST_HISTORY,
-  );
+  const [createPostHistory] =
+    useMutation<CreatePostHistoryResponse>(CREATE_POST_HISTORY);
   const [editPost] = useMutation<EditPostResult>(EDIT_POST);
 
   const [lastSavedData, setLastSavedData] = useState({
@@ -256,6 +256,8 @@ const MarkdownEditorContainer: React.FC<MarkdownEditorContainerProps> = () => {
 
   useSaveHotKey(() => onTempSave(true));
 
+  const theme = useTheme();
+
   return (
     <>
       <Helmet>
@@ -279,6 +281,7 @@ const MarkdownEditorContainer: React.FC<MarkdownEditorContainerProps> = () => {
             edit={!!postId && !isTemp}
           />
         }
+        theme={theme}
       />
       <DragDropUpload onUpload={onDragDropUpload} />
       <PasteUpload onUpload={onDragDropUpload} />

src/lib/hooks/useTheme.ts

@@ -0,0 +1,13 @@
+import { useSelector } from 'react-redux';
+import { RootState } from '../../modules';
+
+export function useTheme() {
+  const darkModeState = useSelector((state: RootState) => state.darkMode);
+  const theme = (() => {
+    if (darkModeState.systemTheme === 'not-ready') return 'light';
+    if (darkModeState.theme !== 'default') return darkModeState.theme;
+    return darkModeState.systemTheme;
+  })();
+
+  return theme;
+}

src/lib/styles/prismThemes.ts

@@ -1,9 +1,11 @@
 import { css } from 'styled-components';
 
+import { themedPalette } from './themes';
+
 const prismThemes = {
-  'atom-one-dark': css`
+  'atom-one': css`
     pre {
-      background: #313440;
+      background: ${themedPalette.prism_bg};
     }
     /**
  * prism.js default theme for JavaScript, CSS and HTML
@@ -12,7 +14,7 @@ const prismThemes = {
  */
     code[class*='language-'],
     pre[class*='language-'] {
-      color: #e0e6f1;
+      color: ${themedPalette.prism_default_text};
       background: none;
       text-align: left;
       white-space: pre;
@@ -34,15 +36,15 @@ const prismThemes = {
     code[class*='language-']::-moz-selection,
     code[class*='language-'] ::-moz-selection {
       text-shadow: none;
-      background: #383e49;
+      background: ${themedPalette.prism_selection_bg};
     }
 
     pre[class*='language-']::selection,
     pre[class*='language-'] ::selection,
     code[class*='language-']::selection,
     code[class*='language-'] ::selection {
       text-shadow: none;
-      background: #9aa2b1;
+      background: ${themedPalette.prism_selection_bg};
     }
 
     @media print {
@@ -60,7 +62,7 @@ const prismThemes = {
 
     :not(pre) > code[class*='language-'],
     pre[class*='language-'] {
-      background: #282c34;
+      background: ${themedPalette.prism_code_block_bg};
     }
 
     /* Inline code */
@@ -74,16 +76,16 @@ const prismThemes = {
     .token.prolog,
     .token.doctype,
     .token.cdata {
-      color: #5c6370;
+      color: ${themedPalette.prism_code_1};
     }
 
     .token.punctuation {
-      color: #abb2bf;
+      color: ${themedPalette.prism_code_2};
     }
 
     .token.selector,
     .token.tag {
-      color: #e06c75;
+      color: ${themedPalette.prism_code_3};
     }
 
     .token.property,
@@ -93,38 +95,38 @@ const prismThemes = {
     .token.symbol,
     .token.attr-name,
     .token.deleted {
-      color: #d19a66;
+      color: ${themedPalette.prism_code_4};
     }
 
     .token.string,
     .token.char,
     .token.attr-value,
     .token.builtin,
     .token.inserted {
-      color: #98c379;
+      color: ${themedPalette.prism_code_6};
     }
 
     .token.operator,
     .token.entity,
     .token.url,
     .language-css .token.string,
     .style .token.string {
-      color: #56b6c2;
+      color: ${themedPalette.prism_code_5};
     }
 
     .token.atrule,
     .token.keyword {
-      color: #c678dd;
+      color: ${themedPalette.prism_code_7};
     }
 
     .token.function {
-      color: #61afef;
+      color: ${themedPalette.prism_code_8};
     }
 
     .token.regex,
     .token.important,
     .token.variable {
-      color: #c678dd;
+      color: ${themedPalette.prism_code_9};
     }
 
     .token.important,
@@ -174,7 +176,7 @@ const prismThemes = {
 
     .line-numbers-rows > span:before {
       content: counter(linenumber);
-      color: #5c6370;
+      color: ${themedPalette.prism_line_number};
       display: block;
       padding-right: 0.8em;
       text-align: right;

src/lib/styles/themes.ts

@@ -28,6 +28,21 @@ type ThemeVariables = {
   slight_layer: string;
   opaque_layer: string;
   editor_footer: string;
+
+  prism_bg: string;
+  prism_default_text: string;
+  prism_selection_bg: string;
+  prism_code_block_bg: string;
+  prism_code_1: string;
+  prism_code_2: string;
+  prism_code_3: string;
+  prism_code_4: string;
+  prism_code_5: string;
+  prism_code_6: string;
+  prism_code_7: string;
+  prism_code_8: string;
+  prism_code_9: string;
+  prism_line_number: string;
 };
 
 type Theme = 'light' | 'dark';
@@ -65,6 +80,21 @@ const themeVariableSets: Record<Theme, ThemeVariables> = {
     slight_layer: 'rgba(0,0,0,0.05)',
     opaque_layer: 'rgba(249,249,249,0.85)',
     editor_footer: '#FFFFFF',
+
+    prism_bg: '#fbfcfd',
+    prism_default_text: '#24292e',
+    prism_selection_bg: 'rgba(0,0,0,0.15)',
+    prism_code_block_bg: '#fbfcfd',
+    prism_code_1: '#969896',
+    prism_code_2: '#24292e',
+    prism_code_3: '#a626a4',
+    prism_code_4: '#63a35c',
+    prism_code_5: '#0184bc',
+    prism_code_6: '#50a14f',
+    prism_code_7: '#a626a4',
+    prism_code_8: '#005cc5',
+    prism_code_9: '#a626a4',
+    prism_line_number: '#585c63',
   },
   dark: {
     bg_page1: '#121212',
@@ -96,10 +126,25 @@ const themeVariableSets: Record<Theme, ThemeVariables> = {
     slight_layer: 'rgba(255,255,255,0.1)',
     opaque_layer: 'rgba(0, 0, 0, 0.85)',
     editor_footer: '#2E2E2E',
+
+    prism_bg: '#313440',
+    prism_default_text: '#e0e6f1',
+    prism_selection_bg: '#383e49',
+    prism_code_block_bg: '#282c34',
+    prism_code_1: '#5c6370',
+    prism_code_2: '#abb2bf',
+    prism_code_3: '#e06c75',
+    prism_code_4: '#d19a66',
+    prism_code_5: '#98c379',
+    prism_code_6: '#56b6c2',
+    prism_code_7: '#c678dd',
+    prism_code_8: '#61afef',
+    prism_code_9: '#c678dd',
+    prism_line_number: '#5c6370',
   },
 };
 
-const buildCssVariables = (variables: ThemeVariables) => {
+const buildCssVariables = <T>(variables: ThemeVariables) => {
   const keys = Object.keys(variables) as (keyof ThemeVariables)[];
   return keys.reduce(
     (acc, key) =>