DevToolsColors

  • Revision slug: Tools/DevToolsColors
  • Revision title: DevToolsColors
  • Revision id: 484579
  • Created:
  • Creator: bgrins
  • Is current revision? No
  • Comment

Revision Content

Don't change any of these values without UX' approval. If any of these values need to be changed, you will need to change some CSS code in /browser/themes/*/devtools/ - File bug according.

Dark Theme

Chrome

 
Tab Toolbar: #252c33 ; rgba(37, 44, 51, 1)
 
Toolbars: #343c45 ; rgba(52, 60, 69, 1)
 
Select Highlight Blue: #1d4f73 ; rgba(29, 79, 115, 1)
 
Foreground (Text) - Light: #f5f7fa ; rgba(245, 247, 250, 1)
 
Foreground (Text) - Grey: #b6babf ; rgba(182, 186, 191, 1)

Code

 
Background - Editor: #14171a ; rgba(17, 19, 21, 1)
 
Background - Sidebar: #181d20 ; rgba(24, 29, 32, 1)
 
Content (Text) - Light: #b8c8d9 ; rgba(184, 200, 217, 1)
 
Content (Text) - Grey: #8fa1b2 ; rgba(143, 161, 178, 1)
 
Content (Text) - Dark Grey: #5f7387 ; rgba(95, 115, 135, 1)
 
Blue: #46afe3 ; rgba(70, 175, 227, 1)
 
Purple: #6b7abb ; rgba(107, 122, 187, 1)
 
Pink: #df80ff ; rgba(223, 128, 255, 1)
 
Red: #eb5368 ; rgba(235, 83, 104, 1)
 
Orange: #d96629 ; rgba(217, 102, 41, 1)
 
Light Orange: #d99b28 ; rgba(217, 155, 40, 1)
 
Green: #70bf53 ; rgba(112, 191, 83, 1)
 

Blue-Grey: #5e88b0 ; rgba(94, 136, 176, 1)

Light Theme

Not yet finalized. See bug 916766 for progress.

Revision Source

<div class="warning">
 <p>Don't change any of these values without UX' approval. If any of these values need to be changed, you will need to change some CSS code in <code>/browser/themes/*/devtools/</code> - File bug according.</p>
</div>
<h1 id="DarkTheme">Dark Theme</h1>
<h2 id="Chrome">Chrome</h2>
<section id="sect1">
 <div style="border-radius:50%;vertical-align:middle;margin:10px;background:#252c33;width:36px;height:36px;display:inline-block;">
  &nbsp;</div>
 Tab Toolbar: #252c33 ; rgba(37, 44, 51, 1)</section>
<section id="sect2">
 <div style="border-radius:50%;vertical-align:middle;margin:10px;background: #343c45;width:36px;height:36px;display:inline-block;">
  &nbsp;</div>
 Toolbars: #343c45 ; rgba(52, 60, 69, 1)</section>
<section id="sect3">
 <div style="border-radius:50%;vertical-align:middle;margin:10px;background: #1d4f73;width:36px;height:36px;display:inline-block;">
  &nbsp;</div>
 Select Highlight Blue: #1d4f73 ; rgba(29, 79, 115, 1)</section>
<section id="sect4">
 <div style="border-radius:50%;vertical-align:middle;margin:10px;background: #f5f7fa;width:36px;height:36px;display:inline-block;">
  &nbsp;</div>
 Foreground (Text) - Light: #f5f7fa ; rgba(245, 247, 250, 1)</section>
<section id="sect5">
 <div style="border-radius:50%;vertical-align:middle;margin:10px;background: #b6babf;width:36px;height:36px;display:inline-block;">
  &nbsp;</div>
 Foreground (Text) - Grey: #b6babf ; rgba(182, 186, 191, 1)</section>
<h2 id="Code">Code</h2>
<section id="sect6">
 <div style="border-radius:50%;vertical-align:middle;margin:10px;background: #14171a;width:36px;height:36px;display:inline-block;">
  &nbsp;</div>
 Background - Editor: #14171a ; rgba(17, 19, 21, 1)</section>
<section id="sect7">
 <div style="border-radius:50%;vertical-align:middle;margin:10px;background: #181d20;width:36px;height:36px;display:inline-block;">
  &nbsp;</div>
 Background - Sidebar: #181d20 ; rgba(24, 29, 32, 1)</section>
<section id="sect8">
 <div style="border-radius:50%;vertical-align:middle;margin:10px;background: #b8c8d9;width:36px;height:36px;display:inline-block;">
  &nbsp;</div>
 Content (Text) - Light: #b8c8d9 ; rgba(184, 200, 217, 1)</section>
<section id="sect9">
 <div style="border-radius:50%;vertical-align:middle;margin:10px;background: #8fa1b2;width:36px;height:36px;display:inline-block;">
  &nbsp;</div>
 Content (Text) - Grey: #8fa1b2 ; rgba(143, 161, 178, 1)</section>
<section id="sect10">
 <div style="border-radius:50%;vertical-align:middle;margin:10px;background: #5f7387;width:36px;height:36px;display:inline-block;">
  &nbsp;</div>
 Content (Text) - Dark Grey: #5f7387 ; rgba(95, 115, 135, 1)</section>
<section id="sect11">
 <div style="border-radius:50%;vertical-align:middle;margin:10px;background: #46afe3;width:36px;height:36px;display:inline-block;">
  &nbsp;</div>
 Blue: #46afe3 ; rgba(70, 175, 227, 1)</section>
<section id="sect12">
 <div style="border-radius:50%;vertical-align:middle;margin:10px;background: #6b7abb;width:36px;height:36px;display:inline-block;">
  &nbsp;</div>
 Purple: #6b7abb ; rgba(107, 122, 187, 1)</section>
<section id="sect13">
 <div style="border-radius:50%;vertical-align:middle;margin:10px;background: #df80ff;width:36px;height:36px;display:inline-block;">
  &nbsp;</div>
 Pink: #df80ff ; rgba(223, 128, 255, 1)</section>
<section id="sect14">
 <div style="border-radius:50%;vertical-align:middle;margin:10px;background: #eb5368;width:36px;height:36px;display:inline-block;">
  &nbsp;</div>
 Red: #eb5368 ; rgba(235, 83, 104, 1)</section>
<section id="sect15">
 <div style="border-radius:50%;vertical-align:middle;margin:10px;background: #d96629;width:36px;height:36px;display:inline-block;">
  &nbsp;</div>
 Orange: #d96629 ; rgba(217, 102, 41, 1)</section>
<section id="sect16">
 <div style="border-radius:50%;vertical-align:middle;margin:10px;background: #d99b28;width:36px;height:36px;display:inline-block;">
  &nbsp;</div>
 Light Orange: #d99b28 ; rgba(217, 155, 40, 1)</section>
<section id="sect17">
 <div style="border-radius:50%;vertical-align:middle;margin:10px;background: #70bf53;width:36px;height:36px;display:inline-block;">
  &nbsp;</div>
 Green: #70bf53 ; rgba(112, 191, 83, 1)</section>
<section id="sect18">
 <div style="border-radius:50%;vertical-align:middle;margin:10px;background: #5e88b0;width:36px;height:36px;display:inline-block;">
  &nbsp;</div>
 <p>Blue-Grey: #5e88b0 ; rgba(94, 136, 176, 1)</p>
</section>


<h1 id="LightTheme">Light Theme</h1>

<div class="warning">
 <p>Not yet finalized.  See <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=916766">bug 916766</a> for progress.</p>
</div>
Revert to this revision