Feature/dark theme

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,42 +146,44 @@ 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: '',
-
+
+      // OPTIONAL 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:
       // (https://github.com/graphql/graphiql/blob/master/src/utility/fillLeafs.js#L75)
       getDefaultFieldNames: null
     };
   }
-  
+
   _onClickToolbarButton(event) {
     alert('Clicked toolbar button!');
   }
-  
+
   render() {
     return (
       <GraphiQL ...this.state>

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%);
+}

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">