Stylus dark theme for Qlik Sense

Qlik Sense Dark Theme

/* Dark Theme for Qlik Sense with the Monokai color theme
   Based on the Dracula Theme by kuroikyu (https://userstyles.org/users/677889)
   Elby Martin - elbymartin@gmail.com
*/

@font-feature-values Cascadia Code {
  @styleset {
    cursive: 1;
  }
}
   

:root {
    --black: #111;
    --grey: #808080;
    --grey-light: #aaa;
    --white: #f2f2f2;
    --bg: #282a36;

    --red: #ff6188;
    --pink: hsl(331, 100%, 61%);
    --orange: hsl(20, 80%, 70%);
    --yellow: #ffd866;
    --green: #a9dc76;
    --blue: #78dce8;
    --mauve: #ad85d2;

    --red-dark: #BF4966;
    --organe-dark: #BD724D;
    --yellow-dark: #BFA34D;
    --green-dark: #789C54;
    --blue-dark: #58A0A8;
    --mauve-dark: #7E74B3;
}
#menu-tab-nav-data ul,
.MuiGrid-root,
.sprout-toolbar-enabled .qs-toolbar header {
	color: var(--white);
	background-color: var(--bg);
}
.sprout-toolbar-enabled .qs-toolbar header span {
	color: var(--white);
}
.sprout-toolbar-enabled .qs-toolbar header p {
	color: var(--blue-dark);
}
.sprout-toolbar-enabled .qs-toolbar header button span {
	color: var(--green);
}
#menu-tab-nav-data ul li:hover {
	background-color: var(--grey);
}

.codearea-tabs .vtabs .tab-list .tabrow-container div.tabrow div.search-matches {
	background: var(--red);
	color: var(--white);
	font-weight: 600;
  border-radius: .2rem;
	padding-left: .25rem;
	padding-right: .25rem;
}

.lui-search__input,
.qs-header,
.scripteditor-right,
.bottom-pane,
li .datasource {
    background: var(--bg);
}
.bottom-pane {
    border-top-color: var(--grey);
}
.lui-icon--search,
.lui-button {
    background: var(--bg);
    color: var(--white);
}
.lui-button {
    border: 1px solid var(--black);
}
.lui-search .lui-search__clear-icon, .lui-search .lui-search__search-icon,
.lui-icon--folder .name,
.lui-icon,
.lui-button__icon,
.lui-button__icon::before {
    color: var(--grey-light);
}
.qv-client .qv-codearea .cm-s-default
  {
    color: var(--mauve);
  }

  .qv-client .qv-codearea .cm-s-default span
  {
    font-weight: 400;
  }

  .qv-client .qv-codearea .cm-s-default span.cm-string
  {
    color: var(--yellow);
	  font-weight: 300;
    font-family: 'Cascadia Code', monospace;
		font-style: italic;
		font-variant-alternates: styleset(cursive);
  }

  .qv-client .qv-codearea .cm-s-default span.cm-field, 
  .qv-datamodelviewer .qv-codearea .cm-s-default span.cm-field
  {
    color: var(--orange);
  }

  .qv-client .qv-codearea .cm-s-default span.cm-keyword
  {
    font-weight: normal;
    color: var(--blue);
  }

  .qv-client .qv-codearea .cm-s-default span.cm-table
  {
    color: var(--red);
  }

  .qv-client .qv-codearea .cm-s-default span.cm-number
  {
    color: var(--mauve);
  }

  .qv-client .qv-codearea .cm-s-default span.cm-variable
  {
    color: var(--mauve);
  }

  .qv-client .qv-codearea .cm-s-default span.cm-operator
  {
    color: var(--mauve);
  }

  .qv-client .qv-codearea .cm-s-default span.cm-comment
  {
    color: var(--grey);
    font-weight: 600;
    font-family: 'Cascadia Code', monospace;
		font-style: italic;
		font-variant-alternates: styleset(cursive);
  }

  .qv-client .qv-codearea .cm-s-default span.cm-normalText,
  .qv-client .qv-codearea .cm-s-default span.cm-normaltext
  {
    color: var(--white);
  }

  .qv-client .qv-codearea .cm-s-default span.cm-function
  {
    font-weight: 400;
    font-family: 'Cascadia Code', monospace;
    color: var(--green);
    font-style: italic;
		font-variant-alternates: styleset(cursive);
		font-variant-ligatures: common-ligatures;
  }

  .qv-client .qv-codearea .cm-s-default span.cm-posterror
  {
    color: var(--white);
  }

  .qv-client .qv-codearea .cm-s-default span.cm-operator.CodeMirror-matchingbracket, 
  .qv-datamodelviewer .qv-codearea .cm-s-default span.cm-operator.CodeMirror-matchingbracket
  {
    font-family: 'Cascadia Code', monospace;
		font-variant-alternates: styleset(cursive);
		font-style: italic;
    color: var(--red);
    font-weight: bold;
		outline: 1px dotted var(--yellow);
		text-shadow: 0 0 5px var(--yellow);
  }

  .qv-client .qv-codearea .cm-s-default .cm-searching
  {
    background: var(--mauve);
    color: var(--white) !important;
  }

  .qv-client .qv-codearea .cm-s-default .cm-searching.cm-current
  {
    background: var(--red);
  }

  #scripteditor-editorToolbarContainer .qui-toolbar
  {
    background-color: var(--bg);
    height: 36px;
  }

  #scripteditor-editorToolbarContainer .qui-toolbar .qui-buttonset-left button:after,
  #scripteditor-editorToolbarContainer .qui-toolbar .qui-buttonset-right button:after
  {
    border-right: 1px solid hsla(0,0%,100%,.1);
  }
.lui-tab.lui-active, .lui-tab.lui-focused, .lui-tab:focus {
    background: var(--bg);
}

  #scripteditor-editorToolbarContainer .qui-toolbar .lui-fade-button
  {
    color: rgba(248, 248, 242, 0.7);
    transition: background-color 0.1s ease-in-out;
  }

  #scripteditor-editorToolbarContainer .qui-toolbar .lui-fade-button[disabled],
  #scripteditor-editorToolbarContainer .qui-toolbar .lui-fade-button.qui-disabled
  {
    color: rgba(248, 248, 242, 0.2);
  }

  #scripteditor-editorToolbarContainer .qui-toolbar .lui-fade-button:active:not([disabled]):not(.qui-disabled)
  {
    background-color: var(--red);
  }

  .scripteditor-divider
  {
    background: var(--bg);
    border-color: var(--bg);
  }

  .codearea-search-view
  {
    padding: 15px 10px;
    background: var(--bg);
  }

  .codearea-search-view .lui-search
  {
    background: var(--bg);
  }

  .codearea-search-view .lui-search input::placeholder
  {
    color: rgba(248, 248, 242, 0.5);
  }

  .codearea-search-view.lui-search,
  .codearea-search-view .lui-search .lui-search__input
  {
    color: var(--white);
  }

  .codearea-search-view .lui-button
  {
    background: var(--bg);
    color: var(--white);
    border-color: #17181f;
  }

  .codearea-search-view .lui-button:hover
  {
    border-color: var(--blue-dark);
  }

  .codearea-search-view .lui-icon
  {
    color: var(--white);
  }

  .codearea-search-view .lui-checkbox .lui-checkbox__check
  {
    background: unset;
    border-color: rgba(248, 248, 242, 0.25);
  }

  .codearea-search-view .lui-checkbox .lui-checkbox__check-text
  {
    color: rgba(248, 248, 242, 0.5);
  }

  .codearea-search-view .lui-checkbox .lui-checkbox__input:checked + .lui-checkbox__check-wrap .lui-checkbox__check,
  .codearea-search-view .lui-checkbox .lui-checkbox .lui-checkbox__input:indeterminate + .lui-checkbox__check-wrap .lui-checkbox__check
  {
    background: var(--blue);
    color: var(--bg);
  }

  .scripteditor-main .scripteditor-stage
  {
    background: var(--bg);
  }

  .CodeMirror-gutters
  {
    border-right: 1px solid #17181f;
    background-color: var(--bg);
  }

  .CodeMirror-linenumber
  {
    color: #44475a;
  }
  .accordion-dataconnectors .datasource { 
    background: var(--bg);
  }
  /* Datalaod Log Message*/ 
  .qv-progressindicator
  {
    background: var(--bg);
    color: var(--black);
    font-family: 'Fira Code', 'Cascadia Code', monospace !important;
    font-size: 12px;
    line-height: 1.4;
  }
.qv-progressindicator .headline.undefined {
    color: var(--mauve);
}  
  .qv-progressindicator .headline
  {
    color: var(--black);
  }

  .qv-progressindicator .headline.summary_headline
  {
    color: var(--blue);
  }

  .qv-progressindicator .summary
  {
    color: var(--organe);
  }

  .qv-progressindicator .synthetic_key
  {
    color: var(--yellow);
  }

  .qv-progressindicator .edc_error
  {
    color: var(--black);
  }

  .qv-progressindicator .edc_error.headline
  {
    color: var(--red);
  }

  .codearea-tabs
  {
    background: var(--bg);
  }

  .codearea-tabs .vtabs .tab-list .included-tab-list .included-tab-row.selected,
  .codearea-tabs .vtabs .tab-list .selected
  {
    background: var(--black);
    color: var(--white);
    outline: 1px dashed var(--grey);
  }

  .codearea-tabs .vtabs-top-buttonset
  {
    background: var(--bg);
    color: var(--white);
    border-color: #17181f;
  }

  .codearea-tabs .qui-editbarflat button:not([disabled]):hover
  {
    background: #3e4153;
  }
	
  .codearea-tabs .vtabs .tab-list .tabrow .vtabs-title
  {
    color: var(--white);
  }

	.codearea-tabs .vtabs .tab-list .tabrow-container .tabrow.selected .vtabs-title input
  {
    color: var(--green);
		font-weight: 600;
		
  }

  .CodeMirror-selected
  {
    background: #44475a;
  }

  .CodeMirror-focused .CodeMirror-selected
  {
    background: #44475a;
  }

  .CodeMirror-line::selection,
  .CodeMirror-line > span::selection,
  .CodeMirror-line > span > span::selection
  {
    background: #44475a;
  }

  .CodeMirror-scroll
  {
    font-size: 1.1em;
		font-weight: 200;
    background-color: var(--bg);
    font-family: 'Fira Code', monospace !important;
  }

  .CodeMirror-cursor
  {
    border-left: 1px solid var(--white);
  }