A Dark Mode Editor for Periscope Data

I like to work on a black screen with a small font size, an option not currently available for Periscope Data. In order to do this for myself, I used the Chrome extension User CSS

User CSS allows you to make arbitrary changes to the CSS of websites and applications.  This CSS applies to your computer only, meaning you can't impact how other people see your dashboards or editor — local changes only. Still, it can be great for your editor or wall-mounted dashboards.

Please modify this post and post your own themes here, and keep in mind that this is not a supported feature — CSS and the editor may change in the future. 

/**Editor Panel **/

.redesign div.CodeMirror {
    color: #F8F8F0; /**plain txt**/
    text-transform: none;
    font-size: 12px;
    line-height: 14px;
}

.body.redesign, .redesign body, .redesign input{color:white}


.CodeMirror {
    background: #282828;
}
.redesign div.CodeMirror .cm-keyword {
    color: #5996f2;
    font-weight: bold;
}
.redesign div.CodeMirror .cm-number {
    color: #FD97fF;
    font-weight: normal;
}
.redesign div.CodeMirror .cm-string {
    color: #06fBd4;
    font-weight: normal;
}
.redesign div.CodeMirror .cm-atom {
    color: #4689fF;
    font-weight: bold;
}
.redesign div.CodeMirror .cm-variable-2 {
    color: #7E81fF;
}
.redesign div.CodeMirror .cm-csv-view {
    color: #A6E2fE;
}
.redesign div.CodeMirror .cm-comment {
    color: #ddd;
}
.redesign div.CodeMirror .cm-sql-view {
    color: #56f25E;
}
.redesign div.CodeMirror .cm-snippet,
.redesign div.CodeMirror .cm-param,
.redesign div.CodeMirror .cm-sql-view,
.redesign div.CodeMirror .cm-csv-view,
.redesign div.CodeMirror .cm-formula,
.redesign div.CodeMirror .cm-dimension,
.redesign div.CodeMirror .cm-formatter,
.redesign div.CodeMirror .cm-magic-join,
.redesign div.CodeMirror .cm-sampler,
.redesign div.CodeMirror .cm-aggregation,
.redesign div.CodeMirror .cm-daterange {
    color: #22dB8F;
}
.CodeMirror div.CodeMirror-cursor {
    border-color: #F8F8F0;
}


/** Text Editor Border **/
.redesign .editron-center .inner-box {
    border: 1px solid #222;
    margin: 15px;
}


.redesign div.CodeMirror .cm-param,
.redesign div.CodeMirror .cm-formula,
.redesign div.CodeMirror .cm-dimension,
.redesign div.CodeMirror .cm-sampler,
.redesign div.CodeMirror .cm-aggregation,
.redesign div.CodeMirror .cm-daterange {
    color: #22dB8F;
}

/**Left Schema Tab**/
.redesign .schema-tab,
/** Editor Window Surrounding **/
.redesign .editor-panel,
/** Bottom Chart Box **/
.redesign .editron-center .bottom-box:not(.sql-alert)[tabName="chart"] .grid-boundary,
/** Right Panel **/
.redesign .editron-right-panel{
    background-color: #777;

}

/**Chart Background in Editor **/
.redesign .widget-container.in-editron {
    background-color: rgba(0, 0, 0, 0.5);
    color: #5353a8;
}

/** Bar Below Text Editor **/
.redesign .editron-center .sql-box .run-box {
    background-color: #222;
}

/** Widget Title in Editor **/
.redesign .widget-container.in-editron .title .widget-title {
    color: #e8e8e8;
}

.redesign .editron-header.starred-item {
    border-bottom: 1px solid #222;
}

/** App Header
.redesign .app-header {
    background: #bbb;
}**/

/** Top Left Corner
.redesign .bar-and-triangle .bar {
    background: rgba(0, 30, 70, 1);
}

.redesign .bar-and-triangle .down-triangle {
    border-top: 17px solid rgba(0, 30, 70, 1);
}**/

/**Left Menu
.redesign .left-navigation {
    background: rgba(0, 0, 20, 1);
}**/

/** Right Panel Text Color **/
.redesign .schema-viewer,
.redesign .editron-right-panel .chart-format-wrapper .settings-area {
    color: #fff;
}

/** Left Panel, Right Border **/
.redesign .schema-tab.open {
    border-right: solid 1px #999;
}

/** Editron Chart Area Border **/
.redesign .editron-center .bottom-box:not(.sql-alert)[tabName="chart"] {
    border-color: #555;
}

/** Right Panel, Left Border **/
.redesign .editron-right-panel.closing .body,
.redesign .editron-right-panel.open .body {
    border-left: 0px solid #555;
}

/** Text Editor Bottom Border **/
.redesign .editron-center .sql-box .codemirror-wrapper {
    border-bottom: 0px solid #222;
}

/** Text Editor Run Button Color
.redesign .button.action-medium {
    background: #2d58c1;
}**/

/** Chart Save Button Color
.redesign .button.action-large{background-color:rgba(30, 170, 250, 1);} **/

/** Indirectly Modifies Top Left Text **/
/**
.heavy-13-eastern-blue-font{
    color: #2d38f1;
}**/

/** Text Color in Editron Area **/
/**.redesign .editron-center .tab-list>.tab.selected,
.redesign .subheader-1>.rotator-title,
.redesign .schema-viewer .results-area .result-header,
.redesign .editron-right-panel .table-series-settings .title,
.redesign .editron-right-panel .body .header-label {
    color: rgba(150, 180, 225, 1);
}**/

/** Right Panel Inner Border Colors **/
/**.redesign .editron-right-panel .border-line,
.redesign .editron-right-panel .icons {
    border: 1px solid #444;
}**/

.redesign .right-controls .button-block .delete-confirm-msg,
.redesign .right-controls .button-block .cancel-confirm-msg {
    background-color: #bbf;
}

.CodeMirror.cm-s-redesign-sql-box .CodeMirror-activeline-background,
.CodeMirror.cm-s-redesign-sql-box .CodeMirror-activeline-background,
.CodeMirror-selected  {
  color: #37376f;
  background: #37376F;
  background-color:#37376F;}

.CodeMirror-linenumbers {
    background-color: #999;
}

Happy Periscoping!
 

3replies Oldest first
  • Oldest first
  • Newest first
  • Active threads
  • Popular
  • This is a great idea, for folks who prefer to work in darker environments. Thanks!

    Reply Like 1
  • Works beautifully. Just a note to new users: install the extension (a button will appear on your chrome toolbar near the three vertical dots top-right); go to the SQL editor on a dashboard; click the button; paste the code above into the side panel that appears.

    Reply Like
  • This is not only useful in the context of the periscope SQL Editor, but it can apply to a myriad of different websites to improve visual appeal/productivity/enjoyment. I had no idea you could create personalized CSS within Chrome. Thanks for sharing!

    Reply Like
Like5 Follow
  • 5 Likes
  • 1 yr agoLast active
  • 3Replies
  • 845Views
  • 4 Following