Merge pull request #323 from joelgriffith/feature/code-mirror-theme-e…

…xposed

Feature/code mirror theme exposed

README.md

@@ -96,6 +96,8 @@ GraphiQL supports customization in UI and behavior by accepting React props and
 
 - `getDefaultFieldNames`: an optional function used to provide default fields to non-leaf fields which invalidly lack a selection set. Accepts a GraphQLType instance and returns an array of field names. If not provided, a default behavior will be used.
 
+- `editorTheme`: an optional string naming a CodeMirror theme to be applied to the `QueryEditor`, `ResultViewer`, and `Variables` panes. Defaults to the `graphiql` theme. See below for full usage.
+
 **Children:**
 
 * `<GraphiQL.Logo>`: Replace the GraphiQL logo with your own.
@@ -203,6 +205,20 @@ class CustomGraphiQL extends React.Component {
 }
 ```
 
+### Applying an Editor Theme
+
+In order to theme the editor portions of the interface, you can supply a `editorTheme` prop. You'll also need to load the appropriate CSS for the theme (similar to loading the CSS for this project). [See the themes available here](https://codemirror.net/demo/theme.html).
+
+
+```js
+// In your html
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.23.0/theme/solarized.css" />
+
+// In your GraphiQL JSX
+<GraphiQL
+  editorTheme="solarized"
+/>
+```
 
 ### Query Samples
 

css/app.css

@@ -190,7 +190,8 @@
   width: 12px;
 }
 
-.graphiql-container .result-window .CodeMirror {
+/* No `.graphiql-container` here so themes can overwrite */
+.result-window .CodeMirror {
   background: #f6f7f8;
 }
 

src/components/GraphiQL.js

@@ -60,7 +60,8 @@ export class GraphiQL extends React.Component {
     onEditVariables: PropTypes.func,
     onEditOperationName: PropTypes.func,
     onToggleDocs: PropTypes.func,
-    getDefaultFieldNames: PropTypes.func
+    getDefaultFieldNames: PropTypes.func,
+    editorTheme: PropTypes.string,
   }
 
   constructor(props) {
@@ -283,6 +284,7 @@ export class GraphiQL extends React.Component {
                 onHintInformationRender={this.handleHintInformationRender}
                 onClickReference={this.handleClickReference}
                 onRunQuery={this.handleEditorRunQuery}
+                editorTheme={this.props.editorTheme}
               />
               <div className="variable-editor" style={variableStyle}>
                 <div
@@ -298,6 +300,7 @@ export class GraphiQL extends React.Component {
                   onEdit={this.handleEditVariables}
                   onHintInformationRender={this.handleHintInformationRender}
                   onRunQuery={this.handleEditorRunQuery}
+                  editorTheme={this.props.editorTheme}
                 />
               </div>
             </div>
@@ -311,6 +314,7 @@ export class GraphiQL extends React.Component {
               <ResultViewer
                 ref={c => { this.resultComponent = c; }}
                 value={this.state.response}
+                editorTheme={this.props.editorTheme}
               />
               {footer}
             </div>

src/components/QueryEditor.js

@@ -33,6 +33,7 @@ export class QueryEditor extends React.Component {
     onHintInformationRender: PropTypes.func,
     onClickReference: PropTypes.func,
     onRunQuery: PropTypes.func,
+    editorTheme: PropTypes.string,
   }
 
   constructor(props) {
@@ -67,7 +68,7 @@ export class QueryEditor extends React.Component {
       lineNumbers: true,
       tabSize: 2,
       mode: 'graphql',
-      theme: 'graphiql',
+      theme: this.props.editorTheme || 'graphiql',
       keyMap: 'sublime',
       autoCloseBrackets: true,
       matchBrackets: true,

src/components/ResultViewer.js

@@ -20,7 +20,8 @@ import React, { PropTypes } from 'react';
  */
 export class ResultViewer extends React.Component {
   static propTypes = {
-    value: PropTypes.string
+    value: PropTypes.string,
+    editorTheme: PropTypes.string,
   }
 
   componentDidMount() {
@@ -38,7 +39,7 @@ export class ResultViewer extends React.Component {
       lineWrapping: true,
       value: this.props.value || '',
       readOnly: true,
-      theme: 'graphiql',
+      theme: this.props.editorTheme || 'graphiql',
       mode: 'graphql-results',
       keyMap: 'sublime',
       foldGutter: {

src/components/VariableEditor.js

@@ -30,6 +30,7 @@ export class VariableEditor extends React.Component {
     onEdit: PropTypes.func,
     onHintInformationRender: PropTypes.func,
     onRunQuery: PropTypes.func,
+    editorTheme: PropTypes.string,
   }
 
   constructor(props) {
@@ -61,7 +62,7 @@ export class VariableEditor extends React.Component {
       lineNumbers: true,
       tabSize: 2,
       mode: 'graphql-variables',
-      theme: 'graphiql',
+      theme: this.props.editorTheme || 'graphiql',
       keyMap: 'sublime',
       autoCloseBrackets: true,
       matchBrackets: true,

test/server.js

@@ -9,7 +9,6 @@
  /* eslint-disable no-console */
 import express from 'express';
 import path from 'path';
-import fs from 'fs';
 import browserify from 'browserify';
 import browserifyShim from 'browserify-shim';
 import watchify from 'watchify';