mozilla

Revision 486215 of DevToolsColors

  • Revision slug: Tools/DevToolsColors
  • Revision title: DevToolsColors
  • Revision id: 486215
  • Created:
  • Creator: shorlander
  • Is current revision? No
  • Comment
Tags: 

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

Chrome

 
Tab Toolbar: #ebeced ; rgba(235, 236, 237, 1)
 
Toolbars: #f0f1f2 ; rgba(240, 241, 242, 1)
 
Select Highlight Blue: #4c9ed9 ; rgba(76, 158, 217, 1)
 
Foreground (Text) - Dark: #18191a ; rgba(24, 25, 26, 1)
 
Foreground (Text) - Grey: #585959 ; rgba(88, 89, 89, 1)

Code

 
Background - Editor: #fcfcfc ; rgba(252, 252, 252, 1)
 
Background - Sidebar: #f7f7f7 ; rgba(247, 247, 247, 1)
 
Content (Text) - Dark: #292e33 ; rgba(41, 46, 51, 1)
 
Content (Text) - Grey: #8fa1b2 ; rgba(143, 161, 178, 1)
 
Content (Text) - Dark Grey: #667380 ; rgba(102, 115, 128, 1)
 
Blue: #0088cc ; rgba(0, 136, 204, 1)
 
Purple: #5b5fff ; rgba(91, 95, 255, 1)
 
Pink: #b82ee5 ; rgba(184, 46, 229, 1)
 
Red: #ed2655 ; rgba(237, 38, 85, 1)
 
Orange: #f13c00 ; rgba(241, 60, 0, 1)
 
Light Orange: #d97e00 ; rgba(217, 126, 0, 1)
 
Green: #2cbb0f ; rgba(44, 187, 15, 1)
 
Blue-Grey: #5f88b0 ; rgba(95, 136, 176, 1)

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="Dark_Theme">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>
 Blue-Grey: #5e88b0 ; rgba(94, 136, 176, 1)</section>

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

<h2 id="Chrome">Chrome</h2>
<section id="sect1">
 <div style="border-radius:50%;vertical-align:middle;margin:10px;background:#ebeced;width:36px;height:36px;display:inline-block;">
  &nbsp;</div>
 Tab Toolbar: #ebeced ; rgba(235, 236, 237, 1)</section>
<section id="sect2">
 <div style="border-radius:50%;vertical-align:middle;margin:10px;background: #f0f1f2;width:36px;height:36px;display:inline-block;">
  &nbsp;</div>
 Toolbars: #f0f1f2 ; rgba(240, 241, 242, 1)</section>
<section id="sect3">
 <div style="border-radius:50%;vertical-align:middle;margin:10px;background: #4c9ed9;width:36px;height:36px;display:inline-block;">
  &nbsp;</div>
 Select Highlight Blue: #4c9ed9 ; rgba(76, 158, 217, 1)</section>
<section id="sect4">
 <div style="border-radius:50%;vertical-align:middle;margin:10px;background: #18191a;width:36px;height:36px;display:inline-block;">
  &nbsp;</div>
 Foreground (Text) - Dark: #18191a ; rgba(24, 25, 26, 1)</section>
<section id="sect5">
 <div style="border-radius:50%;vertical-align:middle;margin:10px;background: #585959;width:36px;height:36px;display:inline-block;">
  &nbsp;</div>
 Foreground (Text) - Grey: #585959 ; rgba(88, 89, 89, 1)</section>
 
<h2 id="Code">Code</h2>
<section id="sect6">
 <div style="border-radius:50%;vertical-align:middle;margin:10px;background: #fcfcfc;width:36px;height:36px;display:inline-block;">
  &nbsp;</div>
 Background - Editor: #fcfcfc ; rgba(252, 252, 252, 1)</section>
<section id="sect7">
 <div style="border-radius:50%;vertical-align:middle;margin:10px;background: #f7f7f7;width:36px;height:36px;display:inline-block;">
  &nbsp;</div>
 Background - Sidebar: #f7f7f7 ; rgba(247, 247, 247, 1)</section>
<section id="sect8">
 <div style="border-radius:50%;vertical-align:middle;margin:10px;background: #292e33;width:36px;height:36px;display:inline-block;">
  &nbsp;</div>
 Content (Text) - Dark: #292e33 ; rgba(41, 46, 51, 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: #667380;width:36px;height:36px;display:inline-block;">
  &nbsp;</div>
 Content (Text) - Dark Grey: #667380 ; rgba(102, 115, 128, 1)</section>
<section id="sect11">
 <div style="border-radius:50%;vertical-align:middle;margin:10px;background: #0088cc;width:36px;height:36px;display:inline-block;">
  &nbsp;</div>
 Blue: #0088cc ; rgba(0, 136, 204, 1)</section>
<section id="sect12">
 <div style="border-radius:50%;vertical-align:middle;margin:10px;background: #5b5fff;width:36px;height:36px;display:inline-block;">
  &nbsp;</div>
 Purple: #5b5fff ; rgba(91, 95, 255, 1)</section>
<section id="sect13">
 <div style="border-radius:50%;vertical-align:middle;margin:10px;background: #b82ee5;width:36px;height:36px;display:inline-block;">
  &nbsp;</div>
 Pink: #b82ee5 ; rgba(184, 46, 229, 1)</section>
<section id="sect14">
 <div style="border-radius:50%;vertical-align:middle;margin:10px;background: #ed2655;width:36px;height:36px;display:inline-block;">
  &nbsp;</div>
 Red: #ed2655 ; rgba(237, 38, 85, 1)</section>
<section id="sect15">
 <div style="border-radius:50%;vertical-align:middle;margin:10px;background: #f13c00;width:36px;height:36px;display:inline-block;">
  &nbsp;</div>
 Orange: #f13c00 ; rgba(241, 60, 0, 1)</section>
<section id="sect16">
 <div style="border-radius:50%;vertical-align:middle;margin:10px;background: #d97e00;width:36px;height:36px;display:inline-block;">
  &nbsp;</div>
 Light Orange: #d97e00 ; rgba(217, 126, 0, 1)</section>
<section id="sect17">
 <div style="border-radius:50%;vertical-align:middle;margin:10px;background: #2cbb0f;width:36px;height:36px;display:inline-block;">
  &nbsp;</div>
 Green: #2cbb0f ; rgba(44, 187, 15, 1)</section>
<section id="sect18">
 <div style="border-radius:50%;vertical-align:middle;margin:10px;background: #5f88b0;width:36px;height:36px;display:inline-block;">
  &nbsp;</div>
 Blue-Grey: #5f88b0 ; rgba(95, 136, 176, 1)</section>


<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>
<p>&nbsp;</p>
Revert to this revision