-
-
Save andriy-rudyk/69ce4cc72511f2c6b1751af8c00b0c79 to your computer and use it in GitHub Desktop.
GraphiQL One Dark Alt (Dark Mode) theme by Ben Keating
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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[3] to override built-in default styling. | |
| * | |
| * [1]. https://twitter.com/flowpoke | |
| * [2]. https://github.com/atom/atom/tree/master/packages/one-dark-ui | |
| * [3]. e.g. `.../site-packages/graphene_django/templates/graphene/graphiql.html` | |
| */ | |
| .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 .search-box-clear, | |
| .graphiql-container .search-box .search-box-clear:hover { | |
| background: #1d2126; | |
| } | |
| .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; | |
| } | |
| .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: red; | |
| } | |
| .cm-atom { | |
| color: #d27caf; | |
| } | |
| .CodeMirror-hints { | |
| background: #21262a; | |
| box-shadow: 0 16px 13px -10px rgba(0, 0, 0, 0.3); | |
| } | |
| .CodeMirror-hint { | |
| border-top: solid 1px #212629; | |
| color: #8ab16f; | |
| } | |
| .CodeMirror-hint-information { | |
| border-top: solid 1px #181a1e; | |
| } | |
| li.CodeMirror-hint-active { | |
| background-color: #262c2f; | |
| border-top-color: #212629; | |
| color: #b8ff87; | |
| } | |
| .CodeMirror-hint-information .content { | |
| color: #a4abb7; | |
| } | |
| .CodeMirror-lint-message-error { | |
| color: #cacdd3; | |
| } | |
| </style> |
.CodeMirror-lint-message-error {
color: white;
}
Added it as a light grey, thanks!
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Error messages are still black on black