Add solarized dark to editor themes

src/components/CodeMirrorStyle.tsx

@@ -10,6 +10,9 @@ const ThemeLink = ({ theme }: ThemeLinkProps) => {
   if (theme == null || theme === 'default') {
     return null
   }
+  if (theme === 'solarized-dark') {
+    theme = 'solarized'
+  }
   return (
     <link
       href={

src/components/atoms/CodeEditor.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import CodeMirror from '../../lib/CodeMirror'
+import CodeMirror, { getCodeMirrorTheme } from '../../lib/CodeMirror'
 import styled from '../../lib/styled'
 import {
   EditorIndentTypeOptions,
@@ -48,7 +48,7 @@ class CodeEditor extends React.Component<CodeEditorProps> {
         : this.props.keyMap
     this.codeMirror = CodeMirror.fromTextArea(this.textAreaRef.current!, {
       ...defaultCodeMirrorOptions,
-      theme: this.props.theme == null ? 'default' : this.props.theme,
+      theme: getCodeMirrorTheme(this.props.theme),
       indentWithTabs: this.props.indentType === 'tab',
       indentUnit: indentSize,
       tabSize: indentSize,
@@ -77,7 +77,7 @@ class CodeEditor extends React.Component<CodeEditorProps> {
       this.codeMirror.setValue(this.props.value)
     }
     if (this.props.theme !== prevProps.theme) {
-      this.codeMirror.setOption('theme', this.props.theme)
+      this.codeMirror.setOption('theme', getCodeMirrorTheme(this.props.theme))
     }
     if (
       this.props.fontSize !== prevProps.fontSize ||

src/components/atoms/MarkdownPreviewer.tsx

@@ -45,10 +45,7 @@ function isElement(node: Node, tagName: string): node is Element {
   if (node == null) {
     return false
   }
-  if (node.tagName !== tagName) {
-    return false
-  }
-  return true
+  return node.tagName === tagName
 }
 
 function rehypeCodeMirrorAttacher(options: Partial<RehypeCodeMirrorOptions>) {
@@ -72,7 +69,11 @@ function rehypeCodeMirrorAttacher(options: Partial<RehypeCodeMirrorOptions>) {
         parent.properties.className != null
           ? [...parent.properties.className]
           : []
-      classNames.push(`cm-s-${theme}`, 'CodeMirror')
+      if (theme === 'solarized-dark') {
+        classNames.push(`cm-s-solarized`, `cm-s-dark`, 'CodeMirror')
+      } else {
+        classNames.push(`cm-s-${theme}`, 'CodeMirror')
+      }
       if (lang != null) {
         classNames.push('language-' + lang)
       }

src/lib/CodeMirror.ts

@@ -19,6 +19,12 @@ export async function requireMode(mode: string) {
   dispatchModeLoad()
 }
 
+export function getCodeMirrorTheme(theme?: string) {
+  if (theme == null) return 'default'
+  if (theme === 'solarized-dark') return 'solarized dark'
+  return theme
+}
+
 function loadMode(_CodeMirror: any) {
   const memoizedModeResult = new Map<string, CodeMirror.ModeInfo | null>()
   function findModeByMIME(mime: string) {
@@ -57,6 +63,7 @@ export const themes = [
   'neo',
   'paraiso-light',
   'solarized',
+  'solarized-dark',
   'twilight',
   'zenburn',
   '3024-night',