Jake.codes

Tomorrow Light Color Scheme, for Chrome

Tuesday, April 23, 2013

The light and clean Tomorrow theme for the Chrome Developer Tool. Forked from bentruyman.

/*
  Tomorrow Light (Day) Color Scheme and Theme (Chrome WebInspector)
  modified by Jake Bilbrey (http://jakebilbrey.com) for readability

  Reworking of the Tozmorrow Night color scheme for Chrome by
  2012 Lior Hakim (www.liorhakim.com)

  https://github.com/ChrisKempson/Tomorrow-Theme

  http://darcyclarke.me/design/skin-your-chrome-inspector/

  if you want to create your own color scheme just select the color name 
  with the comment than search and replace
*/

ignore{
  
  /* HSL */

  color:/*tomorrow-Background*/hsl(0, 0%, 100%)!important;
  color:/*tomorrow-CurrentLine*/hsl(0, 0%, 93.7%)!important;
  color:/*tomorrow-Selection*/hsl(0, 0%, 83.9%)!important;
  color:/*tomorrow-Foreground*/hsl(60, 0.7%, 30%)!important;
  color:/*tomorrow-Comment*/hsl(90, 1.8%, 55.7%)!important;
  color:/*tomorrow-Red*/hsl(360, 66.7%, 47.1%)!important;
  color:/*tomorrow-Orange*/hsl(29, 91.5%, 54.1%)!important;
  color:/*tomorrow-Yellow*/hsl(47, 100%, 45.9%)!important;
  color:/*tomorrow-Green*/hsl(72, 100%, 27.5%)!important;
  color:/*tomorrow-Aqua*/hsl(184, 43.9%, 43.3%)!important;
  color:/*tomorrow-Blue*/hsl(214, 45%, 47.1%)!important;
  color:/*tomorrow-Purple*/hsl(276, 31.2%, 50.4%)!important;

  /* HEX */
  color:/*tomorrow-Background*/#ffffff!important;
  color:/*tomorrow-CurrentLine*/#efefef!important;
  color:/*tomorrow-Selection*/#d6d6d6!important;
  color:/*tomorrow-Foreground*/#4d4d4c!important;
  color:/*tomorrow-Comment*/#8e908c!important;
  color:/*tomorrow-Red*/#c82829!important;
  color:/*tomorrow-Orange*/#f5871f!important;
  color:/*tomorrow-Yellow*/#eab700!important;
  color:/*tomorrow-Green*/#718c00!important;
  color:/*tomorrow-Aqua*/#3e999f!important;
  color:/*tomorrow-Blue*/#4271ae!important;
  color:/*tomorrow-Purple*/#8959a8!important;
}
  
/**********************************************/
/* Console
/**********************************************/

  /**********************************************/
  /* Messages
  /**********************************************/
  
  #-webkit-web-inspector #console-messages {
    font-family: Menlo, 'ProggyClean', 'DroidSansMono', monospace !important;
    font-size: 12px !important;
    line-height: 18px !important;
    background: /*tomorrow-Background*/hsl(0, 0%, 100%) ;
  }
  
  #-webkit-web-inspector #console-messages a {
    color: /*tomorrow-Yellow*/hsl(47, 100%, 45.9%)!important;
  }
  
  #-webkit-web-inspector #console-messages a:hover {
    color: /*tomorrow-Green*/hsl(72, 100%, 27.5%)  !important;
  }
  
  #-webkit-web-inspector #console-messages .console-message {
    font-family: Menlo, 'ProggyClean', 'DroidSansMono', monospace !important;
    font-size: 12px !important;
    line-height: 18px !important;
    color: /*tomorrow-Foreground*/hsl(60, 0.7%, 30%)!important;
  }
  
  #-webkit-web-inspector #console-messages .console-user-command > .console-message-text {
    color: /*tomorrow-Blue*/hsl(214, 45%, 47.1%) !important;
  }

  #-webkit-web-inspector #console-messages .console-formatted-number,
  #-webkit-web-inspector .popover .console-formatted-number {
    color: /*tomorrow-Orange*/hsl(29, 91.5%, 54.1%) !important;
  }
  
  #-webkit-web-inspector #console-messages .console-formatted-string,
  #-webkit-web-inspector .popover .console-formatted-string {
    color: /*tomorrow-Green*/hsl(72, 100%, 27.5%)  !important;
  }
  
  #-webkit-web-inspector #console-messages .console-formatted-object,
  #-webkit-web-inspector .popover .console-formatted-object {
    color: /*tomorrow-Red*/hsl(360, 66.7%, 47.1%) !important;
  }
  
  #-webkit-web-inspector #console-messages .console-formatted-function,
  #-webkit-web-inspector .popover .console-formatted-function {
    color: /*tomorrow-Purple*/hsl(276, 31.2%, 50.4%) !important;
  }
  
  #-webkit-web-inspector #console-messages .console-formatted-regexp,
  #-webkit-web-inspector .popover .console-formatted-regexp{
    color: /*tomorrow-Aqua*/hsl(184, 43.9%, 43.3%)!important;
  } 
  #-webkit-web-inspector #console-messages .console-formatted-null,
  #-webkit-web-inspector .popover .console-formatted-null{
    color: /*tomorrow-Red*/hsl(360, 66.7%, 47.1%) !important;
  }
  #-webkit-web-inspector #console-messages .console-formatted-array,
  #-webkit-web-inspector .popover .console-formatted-array{
    color: /*tomorrow-Red*/hsl(360, 66.7%, 47.1%) !important;
  }

  #-webkit-web-inspector .popover .console-formatted-boolean{
    color: /*tomorrow-Orange*/hsl(29, 91.5%, 54.1%) !important;
  }

  #-webkit-web-inspector #console-messages .console-group-messages .section .header .title {
    color: /*tomorrow-Yellow*/hsl(47, 100%, 45.9%)!important;
  }
  
  #-webkit-web-inspector #console-messages .section .properties .name, .event-properties .name {
    color:  /*tomorrow-Yellow*/hsl(47, 100%, 45.9%)!important;
  }
  
  @-webkit-keyframes webkit-error-level { 
    0%   { color: /*tomorrow-Red*/hsl(360, 66.7%, 47.1%) !important }
    50%  { color: /*tomorrow-Red*/hsl(360, 66.7%, 47.1%) !important }
    100% { color: /*tomorrow-Red*/hsl(360, 66.7%, 47.1%) !important }
  }
  
  #-webkit-web-inspector #console-messages .console-error-level .console-message-text {
    color: /*tomorrow-Red*/hsl(360, 66.7%, 47.1%) !important;
    -webkit-animation-name: webkit-error-level;
    -webkit-animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
    -webkit-timing-function: ease-in-out;
  }
  
  /**********************************************/
  /* Prompt
  /**********************************************/
  
  #-webkit-web-inspector #console-prompt {
    color: /*tomorrow-Foreground*/hsl(60, 0.7%, 30%) !important;
    font-family: Menlo, 'ProggyClean', 'DroidSansMono', monospace !important;
    font-size: 12px !important;
    line-height: 18px !important;
  }
  
/**********************************************/
/* View Source
/**********************************************/

  #-webkit-web-inspector .webkit-line-number {
    background: /*tomorrow-Background*/hsl(0, 0%, 100%)!important;
  }

  #-webkit-web-inspector .webkit-line-content {
    background: /*tomorrow-Background*/hsl(0, 0%, 100%)  !important;
    color: /*tomorrow-Foreground*/hsl(60, 0.7%, 30%)!important;
  }

/**********************************************/
/* Elements/Network
/**********************************************/

  /**********************************************/
  /* Layout
  /**********************************************/
  #-webkit-web-inspector #storage-views .script-view,
  #-webkit-web-inspector #network-views .script-view,
  #-webkit-web-inspector #script-resource-views .script-view {
    color: /*tomorrow-Foreground*/hsl(60, 0.7%, 30%)!important;
  }
  
  #-webkit-web-inspector #storage-views .script-view,
  #-webkit-web-inspector #elements-content,
  #-webkit-web-inspector #network-views .text-editor-contents,
  #-webkit-web-inspector#script-resource-views .script-view {
    background: /*tomorrow-Background*/hsl(0, 0%, 100%)  !important;
    font-size: 12px !important;
    line-height: 18px !important;
  }
  
  #-webkit-web-inspector #elements-content .highlight { 
    color: /*tomorrow-Foreground*/hsl(60, 0.7%, 30%);
  }
  
  #-webkit-web-inspector #elements-content li.hovered:not(.selected) .selection {
    background: rgba(0,0,0,.1) !important;
  }

  #-webkit-web-inspector #elements-content .selection.selected {
    z-index: 0 !important;
  }

  #-webkit-web-inspector #elements-content ol:focus li.selected .selection {
    background: /*tomorrow-CurrentLine*/hsl(0, 0%, 93.7%) !important;
  }

  #-webkit-web-inspector .outline-disclosure li.selected .selection {
    background: /*tomorrow-CurrentLine*/hsl(0, 0%, 93.7%) !important;
  }

  #-webkit-web-inspector #elements-content .selected .highlight {
    color: #000000 !important;
    position: relative;
    z-index: 2;
  }
  
  #-webkit-web-inspector #elements-content .selected {
    background-color: /*tomorrow-CurrentLine*/hsl(0, 0%, 93.7%)  !important;
  }

  /**********************************************/
  /* HTML
  /**********************************************/
  #-webkit-web-inspector .webkit-html-comment {
    color: /*tomorrow-Comment*/hsl(90, 1.8%, 55.7%) !important;
  }
  
  #-webkit-web-inspector .webkit-html-tag {
    color: /*tomorrow-Blue*/hsl(214, 45%, 47.1%) !important;
  }
  
  #-webkit-web-inspector .webkit-html-attribute-name{
    color: /*tomorrow-Yellow*/hsl(47, 100%, 45.9%)!important;
  }
  
  #-webkit-web-inspector .webkit-html-attribute-value {
    color: /*tomorrow-Green*/hsl(72, 100%, 27.5%) !important;
  }
  
  #-webkit-web-inspector .webkit-html-css-node {
    color: /*tomorrow-Foreground*/hsl(60, 0.7%, 30%)!important;
  }
  
  #-webkit-web-inspector .webkit-html-js-node {
    color: /*tomorrow-Foreground*/hsl(60, 0.7%, 30%)!important;
  }
  
  #-webkit-web-inspector .webkit-html-external-link {
    color: /*tomorrow-Green*/hsl(72, 100%, 27.5%) !important;
  }
 
  
  /**********************************************/
  /* CSS
  /**********************************************/
  
  #-webkit-web-inspector .webkit-css-comment {
    color: /*tomorrow-Comment*/hsl(90, 1.8%, 55.7%) !important;
  }
  
  #-webkit-web-inspector .webkit-css-selector,.styles-selector {
    color: /*tomorrow-Yellow*/hsl(47, 100%, 45.9%)!important;
  }

  #-webkit-web-inspector .webkit-css-property,.styles-section.read-only {
    color: /*tomorrow-Foreground*/hsl(60, 0.7%, 30%)!important;
  }
  
  #-webkit-web-inspector .webkit-css-keyword, #-webkit-web-inspector .value{
    color: /*tomorrow-Red*/hsl(360, 66.7%, 47.1%) !important;
  }
  
  #-webkit-web-inspector .webkit-css-number {
    color: /*tomorrow-Orange*/hsl(29, 91.5%, 54.1%) !important;
  }
  
  #-webkit-web-inspector .webkit-css-at-rule {
    color: /*tomorrow-Purple*/hsl(276, 31.2%, 50.4%)  !important;
  }
  
  #-webkit-web-inspector .webkit-css-string {
    color: /*tomorrow-Green*/hsl(72, 100%, 27.5%)  !important;
  }
  
  #-webkit-web-inspector .webkit-css-url {
    color: /*tomorrow-Blue*/hsl(214, 45%, 47.1%) !important;
  }
  
  /**********************************************/
  /* JavaScript
  /**********************************************/
  
  #-webkit-web-inspector .webkit-javascript-ident {
    color: /*tomorrow-Foreground*/hsl(60, 0.7%, 30%)!important;
  }
  
  #-webkit-web-inspector .webkit-javascript-keyword {
    color: /*tomorrow-Purple*/hsl(276, 31.2%, 50.4%) !important;
  }
  
  #-webkit-web-inspector .webkit-javascript-comment {
    color: /*tomorrow-Comment*/hsl(90, 1.8%, 55.7%) !important;
  }
  
  #-webkit-web-inspector .webkit-javascript-string {
    color: /*tomorrow-Green*/hsl(72, 100%, 27.5%) !important;
  }
  
  #-webkit-web-inspector .webkit-javascript-number {
    color: /*tomorrow-Orange*/hsl(29, 91.5%, 54.1%) !important;
  }
  
  #-webkit-web-inspector .webkit-javascript-regexp {
    color: /*tomorrow-Aqua*/hsl(184, 43.9%, 43.3%)!important;
  }
 
/* ToolBars*/

#-webkit-web-inspector #toolbar{
}

#-webkit-web-inspector .toolbar-label{
    color:/*tomorrow-Foreground*/hsl(60, 0.7%, 30%)!important;
}

#-webkit-web-inspector .crumbs .crumb.selected{
}

select.status-bar-item {
    background: /*tomorrow-Background*/hsl(0, 0%, 100%)!important;
}

/* SideBar */

#-webkit-web-inspector #main-panels{
  background:/*tomorrow-Background*/hsl(0, 0%, 100%);
}

#-webkit-web-inspector .styles-section.read-only,.styles-section.read-only .webkit-css-property{
  color:/*tomorrow-Foreground*/hsl(60, 0.7%, 30%)!important;
}

#-webkit-web-inspector .styles-section .header .subtitle {
  color:/*tomorrow-Foreground*/hsl(60, 0.7%, 30%)!important;
}

.panel-enabler-view{
    background-color:/*tomorrow-Background*/hsl(0, 0%, 100%) !important;
}
 /* Foreground*/
#-webkit-web-inspector #main-panels
,#-webkit-web-inspector .placard:nth-of-type(2n-1) .title
,#-webkit-web-inspector .breakpoint-list li 
,#-webkit-web-inspector .section .header
,#-webkit-web-inspector .pane > .body .info
,#-webkit-web-inspector .placard:nth-of-type(2n-1)  .subtitle
,#-webkit-web-inspector .webkit-javascript-ident{
}

#-webkit-web-inspector .text-editor-lines {
  background:/*tomorrow-Background*/hsl(0, 0%, 100%) !important;
}

#-webkit-web-inspector .split-view-sidebar-left {
  border-right: 1px solid /*tomorrow-Comment*/hsl(90, 1.8%, 55.7%)!important;
}

/*Side Bar*/

.pane > .title{
  color: /*tomorrow-Foreground*/hsl(60, 0.7%, 30%)!important;
  border-top: 1px solid #222!important;
  border-bottom: 1px solid #111!important;
}

#-webkit-web-inspector .sidebar {
    font-family: Menlo, 'ProggyClean', 'DroidSansMono', monospace !important;
    font-size: 12px!important;
    line-height: 18px !important;
    background-color: /*tomorrow-Background*/hsl(0, 0%, 100%)!important;
}

#-webkit-web-inspector .section .properties .value.error{
    color: /*tomorrow-Red*/hsl(360, 66.7%, 47.1%) !important;
}

#-webkit-web-inspector .sidebar-tree-section {
  color: /*tomorrow-Comment*/hsl(90, 1.8%, 55.7%) !important;
}

#-webkit-web-inspector .webkit-html-external-link, .webkit-html-resource-link {
  color: /*tomorrow-Blue*/hsl(214, 45%, 47.1%) !important;
}

#-webkit-web-inspector .webkit-html-attribute-value.webkit-html-resource-link{
  color: /*tomorrow-Aqua*/hsl(184, 43.9%, 43.3%) !important;
}

#-webkit-web-inspector .base-storage-tree-element-subtitle {
  color: /*tomorrow-Comment*/hsl(90, 1.8%, 55.7%) !important ;
}

#-webkit-web-inspector .pane > .body .placard + .info {
  color:/*tomorrow-Background*/hsl(0, 0%, 100%) !important ;
  
}

#-webkit-web-inspector .breakpoint-list li.breakpoint-hit {
color:/*tomorrow-Background*/hsl(0, 0%, 100%) !important;
}

#-webkit-web-inspector .editing, #-webkit-web-inspector .editing * {
    outline: 1px solid /*tomorrow-Foreground*/hsl(60, 0.7%, 30%)!important;
    background-color: /*tomorrow-Background*/hsl(0, 0%, 100%)!important;
    color: /*tomorrow-Foreground*/hsl(60, 0.7%, 30%)!important;
    font-size: 12px !important;
    line-height: 18px !important;
    font-family: Menlo, 'ProggyClean', 'DroidSansMono', monospace !important;
    line-height: 18px;
    padding: 2px 2px 1px 2px;
    margin: 1px 2px 2px 2px;
    display: inline-block;
}

#-webkit-web-inspector .section .properties .name, 
#-webkit-web-inspector .event-properties .name {
  color:/*tomorrow-Yellow*/hsl(47, 100%, 45.9%)!important;
}

#-webkit-web-inspector .section .properties .name.editing
,#-webkit-web-inspector .webkit-css-property.editing{
  color:/*tomorrow-Foreground*/hsl(60, 0.7%, 30%)!important;
}
#-webkit-web-inspector .child-editing
,#-webkit-web-inspector #elements-content .editing,
,#-webkit-web-inspector .editing{
    color: /*tomorrow-Foreground*/hsl(60, 0.7%, 30%)!important;
    background-color: /*tomorrow-Background*/hsl(0, 0%, 100%)!important;
}

#-webkit-web-inspector .text-editor-lines {
  border-right: 1px solid hsl(210, 4%, 20%)!important;
}