Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
GraphiQL One Dark Alt (Dark Mode) theme by Ben Keating
<style>
/* GraphiQL One Dark Alt (Dark Mode) theme by Ben Keating[1]
* Colors taken from Atom's One Dark theme[2]. Add this file to the end of
* your <head> block to override built-in default styling.
*
* [1]. https://twitter.com/flowpoke
* [2]. https://github.com/atom/atom/tree/master/packages/one-dark-ui
*/
.CodeMirror {
background: #282D34 !important;
}
.graphiql-container .doc-explorer-contents, .graphiql-container .history-contents {
background-color: #21262B;
border-top: 1px solid #181A1F;
}
.graphiql-container .toolbar-button {
background: #1c2125 !important;
box-shadow: none !important;
color: #5c626d !important;
border: 1px solid #181a1f !important;
}
.graphiql-container .result-window .CodeMirror-gutters {
background: #282D33;
border: none !important;
}
.graphiql-container .resultWrap {
border-left: solid 1px #181a1f;
}
.graphiql-container .variable-editor-title {
background: #21262b;
border-bottom: 1px solid #181a1f;
border-top: 1px solid #181a1f;
color: #cacdd3;
}
.graphiql-container .topBar {
background: #21262B;
border-color: #181A1F;
}
.graphiql-container .docExplorerHide {
color: #606671;
}
.graphiql-container .doc-explorer-title, .graphiql-container .history-title, .doc-explorer-back {
color: #CACDD3 !important;
}
.graphiql-container .doc-explorer {
background: #21262b;
}
.graphiql-container .docExplorerWrap, .graphiql-container .historyPaneWrap {
box-shadow: none;
}
.graphiql-container .docExplorerShow {
border-left: none;
}
.graphiql-container .docExplorerShow, .graphiql-container .historyShow {
background: #21262b;
border-bottom: 1px solid #181A1E;
color: #CACDD3;
}
.graphiql-container .docExplorerShow:before, .graphiql-container .doc-explorer-back:before {
border-color: #CACDD3;
}
.graphiql-container .search-box {
margin: auto auto 10px auto;
border: none;
}
.graphiql-container .search-box input {
background: #1E2127;
padding-left: 28px;
}
.graphiql-container .search-box:before {
color: #c1c4ca;
font-size: 21px;
left: 8px;
}
.graphiql-container, .graphiql-container button, .graphiql-container input {
color: #9299A7;
}
.CodeMirror-gutters {
border: none !important;
background-color: #282d33;
}
.graphiql-container .execute-button {
background: #21262b;
border: 1px solid rgb(91, 98, 107);
box-shadow: none !important;
fill: #c9ccd2; 'sdfsd'
}
.graphiql-container .history-contents p {
border: none;
}
.graphiql-container .historyPaneWrap {
background: #21262b;
}
.graphiql-container .execute-options > li.selected, .graphiql-container .toolbar-menu-items > li.hover, .graphiql-container .toolbar-menu-items > li:active, .graphiql-container .toolbar-menu-items > li:hover, .graphiql-container .toolbar-select-options > li.hover, .graphiql-container .toolbar-select-options > li:active, .graphiql-container .toolbar-select-options > li:hover, .graphiql-container .history-contents > p:hover, .graphiql-container .history-contents > p:active {
background: #383C41;
}
.graphiql-container .doc-category-title {
border-bottom: 1px solid #181a1f;
color: #cacdd3;
}
.graphiql-container .field-name {
color: #9CA3AC;
}
.graphiql-container .type-name {
color: #95be76;
}
.cm-property {
color: #A5ACB8;
}
.cm-string {
color: #97BE7B;
}
.cm-variable {
color: #a87f5b;
}
.cm-attribute {
color: #B58860;
}
.cm-def {
color: #CC3932;
}
.cm-keyword {
color: #7cf3ff;
}
.graphiql-container .keyword {
color: #9ea5b0;
}
.graphiql-container .arg-name {
color: #b5875d;
}
.graphiql-container .doc-category-item {
color: #BC6069;
}
a {
color: #7b9ad4;
}
.CodeMirror-lint-tooltip {
background: #1a1e22 !important;
color:
}
</style>
@draperunner

This comment has been minimized.

Copy link

commented Feb 6, 2019

You are missing a color value on line 176! :)

And the 'sdfsd' part on line 105 is weird: fill: #c9ccd2; 'sdfsd'

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.