From 453a2ba7ca4c8f0b2e41d905acb5e3fb93bcd9db Mon Sep 17 00:00:00 2001 From: Jack Franklin Date: Thu, 20 May 2021 13:33:10 +0000 Subject: [PATCH] [Dark mode] make changesSidebar.css consistent with sources sidebar Bug: chromium:1152736, chromium:1210894 Change-Id: I6b3b9af30fbe0b0e1fdddb6c10a4bc4647909093 Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2910103 Commit-Queue: Jack Franklin Commit-Queue: Paul Lewis Auto-Submit: Jack Franklin Reviewed-by: Paul Lewis --- front_end/panels/changes/changesSidebar.css | 24 ++++++++++++++++++--- 1 file changed, 21 insertions(+), 3 deletions(-) diff --git a/front_end/panels/changes/changesSidebar.css b/front_end/panels/changes/changesSidebar.css index afdf5a6415..f219884b32 100644 --- a/front_end/panels/changes/changesSidebar.css +++ b/front_end/panels/changes/changesSidebar.css @@ -1,3 +1,21 @@ +.tree-outline { + /** + * These variables (and the dark mode variants) are duplicated from + * navigatorTree.css. They will be de-duped and tidied up as part of + * crbug.com/1210894 + */ + --override-script-snippet-tree-item-color: hsl(48deg 70% 50%); + --override-stylesheet-tree-item-color: hsl(256deg 50% 50%); + --override-image-font-tree-item-color: hsl(109deg 33% 50%); +} + +.-theme-with-dark-background .tree-outline, +:host-context(.-theme-with-dark-background) .tree-outline { + --override-script-snippet-tree-item-color: rgb(217 181 38); + --override-stylesheet-tree-item-color: rgb(98 64 191); + --override-image-font-tree-item-color: rgb(101 170 85); +} + li .icon { margin: -3px -5px -3px -5px; background: var(--color-background-elevation-2); @@ -15,17 +33,17 @@ li .icon { .navigator-sm-script-tree-item .icon, .navigator-script-tree-item .icon, .navigator-snippet-tree-item .icon { - background: var(--color-syntax-4); + background: var(--override-script-snippet-tree-item-color); } .navigator-sm-stylesheet-tree-item .icon, .navigator-stylesheet-tree-item .icon { - background: var(--color-syntax-2); + background: var(--override-stylesheet-tree-item-color); } .navigator-image-tree-item .icon, .navigator-font-tree-item .icon { - background: var(--color-syntax-6); + background: var(--override-image-font-tree-item-color); } @media (forced-colors: active) {