Last active
April 25, 2023 13:31
-
-
Save bkeating/cfe0d5e72bd3f9f1f77e1a2ff2309972 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; | |
| } | |
| </style> |
This is nice! But error messages are black on black and the cursor is hard to see.
You can change the cursor to a nice green like:
.CodeMirror div.CodeMirror-cursor {
border-left: 2px solid #97BE7B;
}
Take a look at my fork, I added some improvements to the top tabs and cursor.
hi @ben! How to use this?
Hi @alexdobsom do you fond out how to add this theme to GraphiQL app?
Hi! How shall I add it? I added this line "<script src="https://gist.github.com/bkeating/cfe0d5e72bd3f9f1f77e1a2ff2309972.js"></script>" into the head tag at the very end, but it doesn't seem to work though
Thanks a lot for this, the light theme was killing my eyes !
I enabled it with the stylish plugin for Firefox :
- Install the plugin stylish or an alternative https://addons.mozilla.org/fr/firefox/addon/stylish/
- Click 'create a new style' from the plugin
- Paste the css of this gist (all except <style> and </style>)
- Configure the url of your custom style with the url of graphiql, for example http://localhost:8080/graphql
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
You are missing a color value on line 176! :)
And the
'sdfsd'part on line 105 is weird:fill: #c9ccd2; 'sdfsd'