From 06b55c182074ff1847328609de29f1fafb93d27e Mon Sep 17 00:00:00 2001
From: Joel Griffith <jgriffith@appnexus.com>
Date: Tue, 8 Nov 2016 13:45:37 -0800
Subject: [PATCH 1/2] Dark theme for the IDE

---
 README.md                  | 21 +++++++++++++--------
 css/dark-theme.css         |  9 +++++++++
 src/components/GraphiQL.js | 12 ++++++++++--
 3 files changed, 32 insertions(+), 10 deletions(-)
 create mode 100644 css/dark-theme.css

diff --git a/README.md b/README.md
index 59f880abda7..93f4a63a15d 100644
--- a/README.md
+++ b/README.md
@@ -123,6 +123,9 @@ and children.
   Accepts a GraphQLType instance and returns an array of field names.
   If not provided, a default behavior will be used.
 
+- `theme`: an optional string of the theme you'd like to use for GraphiQL. Currently only `dark`
+  is available.
+
 **Children:**
 
 * `<GraphiQL.Logo>`: Replace the GraphiQL logo with your own.
@@ -143,30 +146,32 @@ class CustomGraphiQL extends React.Component {
       // REQUIRED:
       // `fetcher` must be provided in order for GraphiQL to operate
       fetcher: this.props.fetcher,
-      
+
       // OPTIONAL PARAMETERS
       // GraphQL artifacts
       query: '',
       variables: '',
       response: '',
-      
+
+      // Use the dark theme:
+      theme: 'dark',
+
       // GraphQL Schema
       // If `undefined` is provided, an introspection query is executed
       // using the fetcher.
       schema: undefined,
-      
-      
+
       // Useful to determine which operation to run
       // when there are multiple of them.
       operationName: null,
       storage: null,
       defaultQuery: null,
-      
+
       // Custom Event Handlers
       onEditQuery: null,
       onEditVariables: null,
       onEditOperationName: null,
-      
+
       // GraphiQL automatically fills in leaf nodes when the query
       // does not provide them. Change this if your GraphQL Definitions
       // should behave differently than what's defined here:
@@ -174,11 +179,11 @@ class CustomGraphiQL extends React.Component {
       getDefaultFieldNames: null
     };
   }
-  
+
   _onClickToolbarButton(event) {
     alert('Clicked toolbar button!');
   }
-  
+
   render() {
     return (
       <GraphiQL ...this.state>
diff --git a/css/dark-theme.css b/css/dark-theme.css
new file mode 100644
index 00000000000..baaca214d13
--- /dev/null
+++ b/css/dark-theme.css
@@ -0,0 +1,9 @@
+.graphiql-container.dark .topBar,
+.graphiql-container.dark .docExplorerShow,
+.graphiql-container .execute-button {
+  background: linear-gradient(#e2e2e2, #f7f7f7);
+}
+.graphiql-container.dark,
+.CodeMirror-hints-wrapper {
+  filter: invert(90%);
+}
diff --git a/src/components/GraphiQL.js b/src/components/GraphiQL.js
index 15927e10605..ecf1ca1ffa4 100644
--- a/src/components/GraphiQL.js
+++ b/src/components/GraphiQL.js
@@ -89,6 +89,8 @@ import {
  *     Accepts a GraphQLType instance and returns an array of field names.
  *     If not provided, a default behavior will be used.
  *
+ *   - theme: A theme to use for overall UI, currently only dark is available.
+ *
  * Children:
  *
  *   - <GraphiQL.Logo> Replace the GraphiQL logo with your own.
@@ -120,7 +122,9 @@ export class GraphiQL extends React.Component {
     onEditVariables: PropTypes.func,
     onEditOperationName: PropTypes.func,
     onToggleDocs: PropTypes.func,
-    getDefaultFieldNames: PropTypes.func
+    getDefaultFieldNames: PropTypes.func,
+    theme: PropTypes.oneOf([ 'dark' ]),
+    syntaxTheme: PropTypes.string
   }
 
   constructor(props) {
@@ -158,12 +162,16 @@ export class GraphiQL extends React.Component {
         queryFacts && queryFacts.operations
       );
 
+    // Determine the UI theme (dark or light)
+    const theme = props.theme !== undefined ? props.theme : '';
+
     // Initialize state
     this.state = {
       schema: props.schema,
       query,
       variables,
       operationName,
+      theme,
       response: props.response,
       editorFlex: Number(this._storageGet('editorFlex')) || 1,
       variableEditorOpen: Boolean(variables),
@@ -285,7 +293,7 @@ export class GraphiQL extends React.Component {
     };
 
     return (
-      <div className="graphiql-container">
+      <div className={`graphiql-container ${this.state.theme}`}>
         <div className="editorWrap">
           <div className="topBarWrap">
             <div className="topBar">

From 431f760a3c8ac778ad32fef2c9eecab690b2fa9d Mon Sep 17 00:00:00 2001
From: Joel Griffith <jgriffith@appnexus.com>
Date: Tue, 8 Nov 2016 13:53:09 -0800
Subject: [PATCH 2/2] Highlighting the optional prop

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 93f4a63a15d..9e4963fbda9 100644
--- a/README.md
+++ b/README.md
@@ -153,7 +153,7 @@ class CustomGraphiQL extends React.Component {
       variables: '',
       response: '',
 
-      // Use the dark theme:
+      // OPTIONAL DARK THEME
       theme: 'dark',
 
       // GraphQL Schema