Added dark theme

outline · Jul 28, 2018 · f5bc1c5 · f5bc1c5
1 parent 3c1d577
commit f5bc1c5
Show file tree

Hide file tree

Showing 8 changed files with 103 additions and 42 deletions.
diff --git a/README.md b/README.md
@@ -51,6 +51,11 @@ Allows additional Slate schema to be passed to the underlying Slate editor.
 
 Allows overriding the inbuilt theme to brand the editor, for example use your own font face and brand colors to have the editor fit within your application. See the [inbuilt theme](/src/theme.js) for an example of the keys that should be provided.
 
+#### `dark`
+
+With `dark` set to `true` the editor will use a default dark theme that's included. See the [source here](/src/theme.js).
+
+
 ### Callbacks
 
 #### `uploadImage`

diff --git a/example/dist/index.html b/example/dist/index.html
@@ -4,8 +4,8 @@
      <title>Example</title>
      <style>
        body {
-        margin: 0;
-        padding: 0;
+         margin: 0;
+         padding: 0;
        }
 
        #main {

diff --git a/example/src/index.js b/example/src/index.js
@@ -11,22 +11,30 @@ const exampleText = `
 This is example content. It is persisted between reloads in localStorage.
 `;
 const defaultValue = savedText || exampleText;
-class Example extends React.Component<*, { readOnly: boolean }> {
+class Example extends React.Component<*, { readOnly: boolean, dark: boolean }> {
   state = {
     readOnly: false,
+    dark: false,
   };
 
-  handleToggle = () => {
+  handleToggleReadOnly = () => {
     this.setState({ readOnly: !this.state.readOnly });
   };
 
+  handleToggleDark = () => {
+    this.setState({ dark: !this.state.dark });
+  };
+
   render() {
     return (
       <div style={{ marginTop: "60px" }}>
         <p>
-          <button type="button" onClick={this.handleToggle}>
+          <button type="button" onClick={this.handleToggleReadOnly}>
             {this.state.readOnly ? "Editable" : "Read Only"}
           </button>
+          <button type="button" onClick={this.handleToggleDark}>
+            {this.state.dark ? "Light Theme" : "Dark Theme"}
+          </button>
         </p>
         <Editor
           readOnly={this.state.readOnly}
@@ -48,6 +56,8 @@ class Example extends React.Component<*, { readOnly: boolean }> {
             console.log("File upload triggered: ", file);
             return "";
           }}
+          dark={this.state.dark}
+          toc
         />
       </div>
     );

diff --git a/src/components/Toolbar/BlockToolbar.js b/src/components/Toolbar/BlockToolbar.js
@@ -144,7 +144,7 @@ class BlockToolbar extends React.Component<Props> {
   renderBlockButton = (type: string, IconClass: Function) => {
     return (
       <ToolbarButton onMouseDown={ev => this.handleClickBlock(ev, type)}>
-        <IconClass color={this.props.theme.text} />
+        <IconClass color={this.props.theme.toolbarItem} />
       </ToolbarButton>
     );
   };

diff --git a/src/components/Toolbar/FormattingToolbar.js b/src/components/Toolbar/FormattingToolbar.js
@@ -1,6 +1,6 @@
 // @flow
 import * as React from "react";
-import styled from "styled-components";
+import styled, { withTheme } from "styled-components";
 import { Editor } from "slate-react";
 import {
   BoldIcon,
@@ -17,6 +17,7 @@ import ToolbarButton from "./ToolbarButton";
 type Props = {
   editor: Editor,
   onCreateLink: (SyntheticEvent<*>) => *,
+  theme: *,
 };
 
 class FormattingToolbar extends React.Component<Props> {
@@ -76,7 +77,7 @@ class FormattingToolbar extends React.Component<Props> {
 
     return (
       <ToolbarButton onMouseDown={onMouseDown} active={isActive}>
-        <IconClass light />
+        <IconClass color={this.props.theme.toolbarItem} />
       </ToolbarButton>
     );
   };
@@ -88,7 +89,7 @@ class FormattingToolbar extends React.Component<Props> {
 
     return (
       <ToolbarButton onMouseDown={onMouseDown} active={isActive}>
-        <IconClass light />
+        <IconClass color={this.props.theme.toolbarItem} />
       </ToolbarButton>
     );
   };
@@ -106,7 +107,7 @@ class FormattingToolbar extends React.Component<Props> {
         {this.renderBlockButton("block-quote", BlockQuoteIcon)}
         <Separator />
         <ToolbarButton onMouseDown={this.handleCreateLink}>
-          <LinkIcon light />
+          <LinkIcon color={this.props.theme.toolbarItem} />
         </ToolbarButton>
       </span>
     );
@@ -116,10 +117,10 @@ class FormattingToolbar extends React.Component<Props> {
 const Separator = styled.div`
   height: 100%;
   width: 1px;
-  background: #fff;
+  background: ${props => props.theme.toolbarItem};
   opacity: 0.2;
   display: inline-block;
   margin-left: 10px;
 `;
 
-export default FormattingToolbar;
+export default withTheme(FormattingToolbar);
diff --git a/src/components/Toolbar/LinkToolbar.js b/src/components/Toolbar/LinkToolbar.js
@@ -4,7 +4,7 @@ import { findDOMNode } from "react-dom";
 import { Node } from "slate";
 import { Editor, findDOMNode as slateFindDOMNode } from "slate-react";
 import ArrowKeyNavigation from "boundless-arrow-key-navigation/build";
-import styled from "styled-components";
+import styled, { withTheme } from "styled-components";
 import keydown from "react-keydown";
 import { CloseIcon, OpenIcon, TrashIcon } from "outline-icons";
 import type { SearchResult } from "../../types";
@@ -22,6 +22,7 @@ type Props = {
   link: Node,
   suggestions?: Suggestion[],
   onBlur: () => *,
+  theme: *,
 };
 
 type State = {
@@ -31,7 +32,7 @@ type State = {
 };
 
 @keydown
-export default class LinkToolbar extends React.Component<Props, State> {
+class LinkToolbar extends React.Component<Props, State> {
   wrapper: ?HTMLElement;
   input: HTMLInputElement;
   firstDocument: HTMLElement;
@@ -206,11 +207,15 @@ export default class LinkToolbar extends React.Component<Props, State> {
           />
           {this.state.isEditing && (
             <ToolbarButton onMouseDown={this.openLink}>
-              <OpenIcon light />
+              <OpenIcon color={this.props.theme.toolbarItem} />
             </ToolbarButton>
           )}
           <ToolbarButton onMouseDown={this.removeLink}>
-            {this.state.isEditing ? <TrashIcon light /> : <CloseIcon light />}
+            {this.state.isEditing ? (
+              <TrashIcon color={this.props.theme.toolbarItem} />
+            ) : (
+              <CloseIcon color={this.props.theme.toolbarItem} />
+            )}
           </ToolbarButton>
         </LinkEditor>
         {hasResults && (
@@ -257,11 +262,13 @@ const LinkEditor = styled(Flex)`
 const Input = styled.input`
   font-size: 15px;
   background: ${props => props.theme.toolbarInput};
+  color: ${props => props.theme.toolbarItem};
   border-radius: 2px;
   padding: 4px 8px;
   border: 0;
   margin: 0;
   outline: none;
-  color: ${props => props.theme.toolbarItem};
   flex-grow: 1;
 `;
+
+export default withTheme(LinkToolbar);
diff --git a/src/index.js b/src/index.js
@@ -4,7 +4,7 @@ import { Value, Change, Schema, Text } from "slate";
 import { Editor } from "slate-react";
 import styled, { ThemeProvider } from "styled-components";
 import type { SlateNodeProps, Plugin, SearchResult } from "./types";
-import defaultTheme from "./theme";
+import { light as lightTheme, dark as darkTheme } from "./theme";
 import defaultSchema from "./schema";
 import getDataTransferFiles from "./lib/getDataTransferFiles";
 import isModKey from "./lib/isModKey";
@@ -19,7 +19,7 @@ import { insertImageFile } from "./changes";
 import renderMark from "./marks";
 import renderNode from "./nodes";
 
-export const theme = defaultTheme;
+export const theme = lightTheme;
 export const schema = defaultSchema;
 export const Placeholder = InternalPlaceholder;
 
@@ -30,8 +30,9 @@ type Props = {
   plugins?: Plugin[],
   readOnly?: boolean,
   toc?: boolean,
+  dark?: boolean,
   schema?: Schema,
-  theme: Object,
+  theme?: Object,
   uploadImage?: (file: File) => Promise<string>,
   onSave: ({ done?: boolean }) => *,
   onCancel: () => *,
@@ -54,7 +55,6 @@ type State = {
 
 class RichMarkdownEditor extends React.PureComponent<Props, State> {
   static defaultProps = {
-    theme: defaultTheme,
     defaultValue: "",
     placeholder: "Write something nice…",
     onImageUploadStart: () => {},
@@ -237,7 +237,6 @@ class RichMarkdownEditor extends React.PureComponent<Props, State> {
     const {
       readOnly,
       toc,
-      theme,
       pretitle,
       placeholder,
       onSave,
@@ -248,8 +247,11 @@ class RichMarkdownEditor extends React.PureComponent<Props, State> {
       onImageUploadStop,
       className,
       style,
+      dark,
     } = this.props;
 
+    const theme = this.props.theme || (dark ? darkTheme : lightTheme);
+
     return (
       <Flex
         style={style}
@@ -308,6 +310,7 @@ class RichMarkdownEditor extends React.PureComponent<Props, State> {
 }
 
 const StyledEditor = styled(Editor)`
+  background: ${props => props.theme.background};
   font-family: ${props => props.theme.fontFamily};
   font-weight: ${props => props.theme.fontWeight};
   font-size: 1em;

diff --git a/src/theme.js b/src/theme.js
@@ -1,30 +1,65 @@
 // @flow
-const theme = {
+const colors = {
+  almostBlack: "#181A1B",
+  lightBlack: "#2F3336",
+  almostWhite: "#E6E6E6",
+  white: "#FFF",
+  white10: "rgba(255, 255, 255, 0.1)",
+  black: "#000",
+  black10: "rgba(0, 0, 0, 0.1)",
+  primary: "#1AB6FF",
+  greyLight: "#F4F7FA",
+  grey: "#E8EBED",
+  greyMid: "#9BA6B2",
+  greyDark: "#DAE1E9",
+};
+
+export const base = {
+  ...colors,
   fontFamily:
     "-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen, Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif",
   fontWeight: 400,
-  background: "#FFF",
-
-  text: "#171B35",
+  link: colors.primary,
+  placeholder: "#B1BECC",
   textSecondary: "#4E5C6E",
-  textLight: "#FFF",
-  link: "#1AB6FF",
-  primary: "#1AB6FF",
-  placeholder: "#b1becc",
+  textLight: colors.white,
+  selected: colors.primary,
+};
+
+export const light = {
+  ...base,
+  background: colors.white,
+  text: colors.almostBlack,
+
+  toolbarBackground: colors.lightBlack,
+  toolbarInput: colors.white10,
+  toolbarItem: colors.white,
+
+  blockToolbarBackground: colors.greyLight,
+  blockToolbarTrigger: colors.greyMid,
+  blockToolbarTriggerIcon: colors.white,
+
+  quote: colors.greyDark,
+  codeBackground: colors.greyLight,
+  codeBorder: colors.grey,
+  horizontalRule: colors.grey,
+};
+
+export const dark = {
+  ...base,
+  background: colors.almostBlack,
+  text: colors.almostWhite,
 
-  toolbarBackground: "#2F3336",
-  toolbarInput: "rgba(255, 255, 255, 0.1)",
-  toolbarItem: "#FFF",
+  toolbarBackground: colors.white,
+  toolbarInput: colors.black10,
+  toolbarItem: colors.lightBlack,
 
-  blockToolbarBackground: "#F4F7FA",
-  blockToolbarTrigger: "#9BA6B2",
-  blockToolbarTriggerIcon: "#FFF",
+  blockToolbarBackground: colors.white,
+  blockToolbarTrigger: colors.almostWhite,
+  blockToolbarTriggerIcon: colors.almostBlack,
 
-  quote: "#DAE1E9",
-  selected: "#1AB6FF",
-  codeBackground: "#F4F7FA",
-  codeBorder: "#E8EBED",
-  horizontalRule: "#E8EBED",
+  quote: colors.almostWhite,
+  horizontalRule: colors.almostWhite,
 };
 
-export default theme;
+export default light;