zzos/react-native-devtools-frontend
1
0
Fork 0
mirror of https://github.com/react/react-native-devtools-frontend.git synced 2026-10-12 17:45:49 +08:00
Code Issues Packages Projects Releases Wiki Activity

[Dark mode] make changesSidebar.css consistent with sources sidebar

Browse Source 
Bug: chromium:1152736, chromium:1210894
Change-Id: I6b3b9af30fbe0b0e1fdddb6c10a4bc4647909093
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2910103
Commit-Queue: Jack Franklin <jacktfranklin@chromium.org>
Commit-Queue: Paul Lewis <aerotwist@chromium.org>
Auto-Submit: Jack Franklin <jacktfranklin@chromium.org>
Reviewed-by: Paul Lewis <aerotwist@chromium.org>
This commit is contained in:
Jack Franklin
2021-05-21 21:24:12 +00:00
committed by Devtools-frontend LUCI CQ
parent a02517d351
commit 453a2ba7ca
1 changed files with 21 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
front_end/panels/changes/changesSidebar.css
+21 -3
View File
@@ -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) {