search

Infragistics / livewire

A simple web content editor built with Electron
https://waffle.io/infragistics/livewire
20 stars 9 forks source link

Add option to switch to dark theme #117

Closed HUSSAR-mtrela closed 7 years ago

HUSSAR-mtrela commented 7 years ago

Add option to switch to dark theme, for example by swapping current index.css file with this attached css file which has dark theme applied to most of UI elements in this app:

C:\Program Files (x86)\Infragistics\Livewire 1.1\resources\app\app\index.css

Note this css file is missing dark theme styling for:

.no-show {
  display: none;
}
.push-down-top-sm {
  margin-top: 15px;
}
#editor {
  position: absolute;
  background-color: #303030 !important;
  color: #D0D6D9 !important;
  top: 74px;
  left: 0px;
  bottom: 40px;
  padding: 10px;
}

.highlights .highlight-selected.background .region {
    background-color: #6A6969 !important;
}
code {
    padding: 2px 4px;
    font-size: 90%;
    color: #fdec67;
    background-color: #525252;
    border-radius: 4px;
}
pre-code {
    font-size: 15px;
    background-color: transparent;
    color: #AF25C7;
    border-radius:0px; 
  /*font-family: Menlo, c7254e Monaco, Consolas, "Courier New", monospace;*/
}
pre {
    display: block;
    padding: 9.5px;
    margin: 0 0 10px;
    font-size: 15px;
    line-height: 1.42857143;
    color: #fbfd92;
    word-break: break-all;
    word-wrap: break-word;
    background-color: #3e3e3e;
    border: 1px solid #ccc;
    border-radius: 4px;
}
a {
    color: #86c6fd;
    text-decoration: none;
}
* {
    -webkit-tap-highlight-color: #303030;
}
.ace_layer {
    z-index: 1;
    position: absolute;
    overflow: hidden;
    word-wrap: normal;
    white-space: pre;
    height: 100%;
    width: 100%;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    pointer-events: none;
    margin-left: 10px;
}
#result-container {
  background-color: #303030;
  color: #D0D6D9;
  display: flex;
}
#result-container img {
  margin: 20px;
}
#result-pane,
#result-button {
  display: flex;
  flex-direction: column;
}
#result-pane {
  width: 50%;
  margin-left: 50.5%;
  overflow: auto;
  height: 100%;
  padding-right: 20px;
}
#result-button {
  width: 22px;
  background-color: #303030;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  color: #ccc;
}
#result-button:hover {
  background-color: #444748;
  color: #888;
}
#rendering-label {
  position: absolute;
  top: 74px;
  right: 38px;
  font-size: .8em;
  background-color: #303030;
  color: #888;
  padding: 4px;
  opacity: .75;
  display: none;
}
#footer {
  position: absolute;
  background-color: #303030;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40px;
  padding: 10px;
  border-top: solid 1px #eee;
  color: #ccc;
  z-index: 1000;
}
#footer:hover {
  background-color: #303030;
}
#footer select {
  max-height: 24px;
  font-size: 0.9em;
  padding: 0;
  display: none;
}
#flags-container {
  display: inline-block;
}
#flags-container i,
#flags-container span {
  margin-left: 5px;
  margin-right: 5px;
}
#config-container {
  margin-left: 50%;
}
#file-name-button {
  border: 0;
  box-shadow: none;
  padding: 0;
  height: auto;
  color: #888;
  background-color: transparent;
}
#formatting-toolbar {
  top: 0;
  padding: 10px;
  height: 45px;
  width: 100%;
  color: #888;
  min-width: 660px;
  border-bottom: solid 1px #eee;
  background-color: #303030;
}
#formatting-toolbar button {
  background-color: transparent;
  border: 0;
  margin-left: 10px;
  margin-right: 10px;
  padding: 6px;
}
#formatting-toolbar button:hover {
  background-color: #5C5B5B;
}
#formatting-toolbar .separator {
  color: #f1f1f1;
}
#formatting-toolbar .separator:after {
  content: "|";
}
#lw-tab-container {
  position: relative;
  background: url(images/diagonal-lines.png);
}
#lw-tab-container .lw-tabs {
  width: 98.5%;
  height: 34px;  
  overflow: hidden;
  background-color: #303030;
  z-index: 200;
}
#lw-tab-container .lw-tabs .lw-tab {
  position: relative;
  display: inline;
  border: solid 1px #eee;
  border-bottom: 0;
  padding: 4px;
  margin: 0 2px 0 2px;
  font-size: 14px;
  background-color: #303030;
  color: #888;
  cursor: pointer;
  line-height: 3em;
  font-weight: normal;
}
#lw-tab-container .lw-tabs .lw-tab:hover {
  background-color: #303030;
}
#lw-tab-container .lw-tabs .lw-tab button {
  border: 0;
  padding: 2px;
  margin: 0;
  background-color: transparent;
  font-size: 15px;
}
#lw-tab-container .lw-tabs .lw-tab button:hover {
  color: #c03;
}
#lw-tab-container .lw-tabs .active {
  border-bottom: 3px solid #fff;
  background-color: #303030;
  z-index: 300;
  color: #4BB3F4;
  /* font-weight: bold; */
}
#lw-tab-container .lw-tabs .active:hover {
  /* background-color: #fff; */
  border-bottom: inherit;
  color: #449ED6;
}
#lw-tab-container .lw-separator {
  position: relative;
  display: block;
  border-top: 1px solid #eee;
  width: 100%;
  height: 1px;
  z-index: 100;
  top: 28px;
}
.admonitionblock {
  margin: 20px 0 20px 0;
}
.admonitionblock .icon .title {
  display: none;
}
.admonitionblock .content {
  border-left: 8px solid #eee;
  padding-left: 10px;
}
.admonitionblock .content .title {
  font-weight: bold;
}
.misspelled {
  border-bottom: 1px solid #c03;
  margin-bottom: -1px;
}
.ace_marker-layer .misspelled {
  position: absolute;
  z-index: -2;
  border-bottom: 0px solid #c03 !important;
  margin-bottom: -1px;
}
.ace_content { 
    margin: 10px;
}
.ace-github .ace_keyword {
    color: #55c4fb !important;
    font-weight: normal !important; 
    /*border-bottom: 1px solid #41DC65 !important;*/
}
/*.ace-github .ace_keyword .misspelled {
    color: #DCC241;
    font-weight: normal;
    position: absolute;
    z-index: -2;
    border-bottom: 1px solid #41DC65 !important;
    margin-bottom: -1px;
}*/
.ace_search_field {
    background-color: #646363 !important;
    color: #DFE0E1 !important;
    border-right: 1px solid #cbcbcb;
    border: 0 none;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    float: left;
    height: 22px;
    outline: 0;
    padding: 0 7px;
    width: 214px;
    margin: 0;
}
.ace_search {
    background-color: #646363 !important;
    border: 1px solid #646363 !important;
    border-top: 0 none;
    max-width: 325px;
    overflow: hidden;
    margin: 0;
    padding: 4px;
    padding-right: 6px;
    padding-bottom: 0;
    position: absolute;
    top: 0px;
    z-index: 99;
    white-space: normal;
}

.ace-github .ace_string {
    color: #B3B3B3 !important;
}
.ace_string.ace_regexp {
    color: #4BB3F4 !important;
    font-weight: normal !important;
}
.ace_support.ace_function {
    color: #C9DC41 !important;
}
#help-container {
  position: fixed;
  background-color: #fff;
  bottom: 0px;
  right: 100px;
  height: 400px;
  width: 400px;
  border: 1px solid #ccc;
  border-radius: 6px 6px 0 0;
  padding: 15px;
  box-shadow: 0px 0px 10px 0px #ccc;
  z-index: 100000;
}
#help-container h1 {
  text-transform: uppercase;
  font-size: 0.85em;
  margin: 0;
  color: #888;
  font-weight: bold;
  text-align: center;
}
#help-container .links {
  margin: 8px 0 8px 0;
}
#help-container .command {
  position: absolute;
  right: 15px;
  top: 5px;
}
#help-container .command button {
  border: 0px;
}
#help {
  overflow: auto;
  height: 335px;
}
.ace_searchbtn,
.ace_replacebtn {
  font-size: 0.7em;
  padding: 4px !important;
}
#build-flags-container {
  text-align: right;
}
button[data-role="build-flag"] {
  margin-left: 10px;
  border-radius: 0;
}
button[data-role="build-flag"].selected {
  border: 2px solid #888;
} 
table, th, td { 
  background-color: #303030;
}
tr { 
  background-color: #303030;
}
tbody {
  /*   display: table-row-group; */
    vertical-align: middle;
    border-color: inherit;
  background-color: #303030;
}
.tt-menu {
  padding: 10px;
  background-color: #303030;
  cursor: pointer;
  line-height: 1.5em;
  border: solid 1px #eee;
  border-radius: 3px;
  margin-top: 3px;
  -webkit-box-shadow: 2px 2px 5px 0px #b5b5b5;
  -moz-box-shadow: 2px 2px 5px 0px #b5b5b5;
  box-shadow: 2px 2px 5px 0px #b5b5b5;
}
#metadata-tags-container {
  margin-top: 10px;
  padding-top: 10px;
  border-top: solid 1px #eee;
  -webkit-column-count: 3;
  column-count: 3;
  -webkit-column-rule: 1px solid #eee;
  column-rule: 1px solid #eee;
  overflow: auto;
  max-height: 550px;
}
#metadata-tags-container label {
  display: inline-block;
  font-weight: normal;
  cursor: pointer;
  margin-left: 5px;
}
#lw-explorer-button {
  position: absolute;
  right: 0px;
  cursor: pointer;
  width: 21px;
  height: 28px;
  display: block;
  background-color: #303030;
  color: #ccc;
  padding-left: 8px;
  padding-top: 3px;
}
#lw-explorer-button:hover {
  background-color: #303030;
  color: #449ED6;
}
#lw-explorer {
  position: absolute;
  right: 2%;
  top: 27px;
  max-height: 400px;
  min-width: 300px;
  border: 1px solid #eee;
  background-color: #303030;
  padding: 10px;
  border-radius: 2px;
  overflow: auto;
  z-index: 1000;
  box-shadow: 0px 0px 10px 0px #ccc;
}
#lw-explorer:active {
  border: 1px solid #eee;
  color: #449ED6;
}
#lw-explorer .fileName {
  padding: 4px;
  font-size: 1.2em;
  border-bottom: 1px solid #fbfbfb;
  background-color: #303030;
  cursor: pointer;
  color: #888;
}
#lw-explorer .fileName:hover {
  background-color: #303030;
  color: #449ED6;
}
#new-version-container {
  position: absolute;
  top: -1px;
  margin-left: 35%;
  width: 350px;
  padding: 10px;
  background-color: #fbfbfb;
  border: solid 1px #eee;
}
craigshoemaker commented 7 years ago

@HUSSAR-mtrela this is just shy of a pull request 😄 and is basically a duplicate of #16, so I am closing this issue, but will look at using your style rules for the dark theme