Improve Theme + Color Settings

Completed

Follow

Enteleform

• September 10, 2017 19:58
• Edited

[1] Display Chosen Code Theme On Main UI

Currently, the code theme is shown while in the "Edit Snippet" view:

but not in the main UI view:

 

[2] Move Code-Style Settings To A Global Settings Panel

As shown in the first image, each code snippet in the "Edit Snippet" view has a gear icon which displays the global code settings. Since these settings are global, and not per code snippet, there is no reason to show the gear icon in its current location(s). The gear icon would be better situated in the upper right icon cluster on the main UI.  This will provide accurate context as to the scope of these settings, as opposed to inferring that each code snippet has its own settings.

 

[3] Add a "Dark" Theme In Addition To The Current "Light" Theme

Most programming software offers dark & light themes.  The dark theme is a great way to reduce eye strain for those of us who spend a majority of our day programming.  This option would fit nicely with the current settings as mentioned in suggestion #2.

7

• Official comment

  

  Rui Jiang

  • April 17, 2018 14:29
  • Edited

  Theme support has been added:

  https://support.cacher.io/hc/en-us/articles/360002743332-Themes

  Comment actions Permalink
• 

  Wes Smith

  • September 14, 2017 20:57

  Dark theme would be great. I've found the white on white of the main content area all blends together making it hard to focus. 

  2

  Comment actions Permalink
• 

  Wes Smith

  • September 15, 2017 00:57

  In the meantime, while Rui looks into this as a possible feature, if you use the web app in Chrome and want a darker theme, you could use the Stylebot Chrome Extension  to add your own CSS to the Cacher app page. For example, I just set mine up to look like this: 
  
  
  

   

  If it helps anyone, the css I used was:
  
  
  

   

  div.snippet-scrollable {
  background-color: #99aebf;
  }

  section.section-description h3 {
  color: #faf7fa;
  }

  snippet-files section h3 {
  color: #faf7fa;
  }

  section.snippet-comments h3 {
  color: #fcf9fc;
  }

  div.snippet-header {
  background-color: #667a8a;
  color: #faf7fa;
  }

  div.created {
  color: #faf7fa;
  }

  span.created-by strong {
  color: #faf7fa;
  }

  span.created-time {
  color: #e0dde0;
  }

  li.snippet {
  background-color: #344a5c;
  border-color: #667a8a;
  color: #faf7fa;
  }

  div.controls {
  background-color: #142F43;
  }

  div.list-sort {
  background-color: #142F43;
  color: #fafafa;
  }

  div.dropdown span {
  color: #fcfcfc;
  }

  span.label {
  color: #fafafa;
  }

  button.btn.btn-icon.toggle-edit-snippet-labels {
  color: #fafafa;
  }

  .snippet-main .controls {
  background-color: #667a8a;
  }

  div.comment-meta {
  background-color: #dbdbdb;
  }

  div.comment-controls {
  background-color: #dbdbdb;
  }

  div.comment-body {
  background-color: #edeaed;
  }

  textarea.comment-text.input-static.mousetrap.ng-pristine.ng-invalid.ng-touched {
  background-color: #fafafa;
  }

   

  1

  Comment actions Permalink
• 

  Sudipto Chandra (Dipu)

  • October 28, 2017 13:46

   "Dark" Theme would be a great addition

  0

  Comment actions Permalink

Please sign in to leave a comment.