Commit e1af48d5 authored by Dan Beam's avatar Dan Beam Committed by Commit Bot

WebUI Dark Mode, Extensions: make code sections look dark

Screenshots: https://imgur.com/a/r7vGHp9

R=rdevlin.cronin@chromium.org
BUG=937159

Change-Id: I6c2ed201928cbe9a7974797a1aced1d049387a2e
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1546763
Auto-Submit: Dan Beam <dbeam@chromium.org>
Reviewed-by: default avatarDevlin <rdevlin.cronin@chromium.org>
Commit-Queue: Dan Beam <dbeam@chromium.org>
Cr-Commit-Position: refs/heads/master@{#647080}
parent 5dbd5a7c
<link rel="import" href="chrome://resources/html/polymer.html"> <link rel="import" href="chrome://resources/html/polymer.html">
<link rel="import" href="chrome://resources/cr_elements/hidden_style_css.html"> <link rel="import" href="chrome://resources/cr_elements/hidden_style_css.html">
<link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">
<link rel="import" href="chrome://resources/html/cr.html"> <link rel="import" href="chrome://resources/html/cr.html">
<link rel="import" href="chrome://resources/html/i18n_behavior.html"> <link rel="import" href="chrome://resources/html/i18n_behavior.html">
<link rel="import" href="chrome://resources/html/load_time_data.html"> <link rel="import" href="chrome://resources/html/load_time_data.html">
...@@ -10,36 +11,48 @@ ...@@ -10,36 +11,48 @@
<template> <template>
<style include="cr-hidden-style"> <style include="cr-hidden-style">
:host { :host {
--container-bg: white;
--line-bg: var(--paper-grey-300);
--main-color: var(--paper-grey-800);
display: block; display: block;
} }
:host-context([dark]) {
--container-bg: rgba(0, 0, 0, .4);
--line-bg: var(--google-grey-800);
--main-color: var(--cr-primary-text-color);
}
#scroll-container { #scroll-container {
/* TODO(crbug.com/937159): all of the code themed for "light mode" and background: var(--container-bg);
* needs to be updated to co-exist with "dark mode" when specs are
* available. */
background: white;
border: 1px solid var(--paper-grey-500);
height: 100%; height: 100%;
overflow: auto; overflow: auto;
position: relative; position: relative;
} }
:host-context(html:not([dark])) #scroll-container {
border: 1px solid var(--paper-grey-500);
}
#main { #main {
color: var(--paper-grey-800); color: var(--main-color);
display: flex; display: flex;
font-family: monospace; font-family: monospace;
min-height: 100%; min-height: 100%;
} }
#line-numbers { #line-numbers {
background: var(--paper-grey-300); background: var(--line-bg);
border-inline-end: 1px solid var(--paper-grey-500);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 0 8px; padding: 0 8px;
text-align: end; text-align: end;
} }
:host-context(html:not([dark])) #line-numbers {
border-inline-end: 1px solid var(--paper-grey-500);
}
#source { #source {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
...@@ -59,7 +72,7 @@ ...@@ -59,7 +72,7 @@
color: var(--paper-grey-800); color: var(--paper-grey-800);
} }
.more-code { :host-context(html:not([dark])) .more-code {
color: var(--paper-grey-500); color: var(--paper-grey-500);
} }
...@@ -67,6 +80,11 @@ ...@@ -67,6 +80,11 @@
height: 0; height: 0;
overflow: hidden; overflow: hidden;
} }
:host-context([dark]) mark {
background-color: var(--google-yellow-refresh-300);
color: var(--google-grey-900);
}
</style> </style>
<div id="scroll-container" hidden="[[!highlighted_]]" dir="ltr"> <div id="scroll-container" hidden="[[!highlighted_]]" dir="ltr">
<div id="main"> <div id="main">
......
...@@ -51,6 +51,9 @@ ...@@ -51,6 +51,9 @@
--google-red-refresh-300-rgb: 242, 139, 130; /* #f28b82 */ --google-red-refresh-300-rgb: 242, 139, 130; /* #f28b82 */
--google-red-refresh-300: rgb(var(--google-red-refresh-300-rgb)); --google-red-refresh-300: rgb(var(--google-red-refresh-300-rgb));
--google-yellow-refresh-300-rgb: 253, 214, 51; /* #fdd633 */
--google-yellow-refresh-300: rgb(var(--google-yellow-refresh-300-rgb));
--cr-primary-text-color: var(--google-grey-900); --cr-primary-text-color: var(--google-grey-900);
--cr-secondary-text-color: var(--google-grey-refresh-700); --cr-secondary-text-color: var(--google-grey-refresh-700);
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment