getStyleSheets helper for components
The `getStyleSheets` helper provides an API for new components to read CSS from
the runtime cache and get back a stylesheet (or multiple in the case of theme
patching) that they can then adopt into the shadow root.
Long term we don't want to tie ourselves to this way of doing CSS, but at least
by providing an API for it we can swap out the implementation without requiring
large rewrites for any of the components we build.
Change-Id: Id72dcb449701f11a524e91742bc095721e62d0db
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2339557
Commit-Queue: Jack Franklin <[email protected]>
Reviewed-by: Paul Lewis <[email protected]>
diff --git a/front_end/elements/ElementsBreadcrumbs.ts b/front_end/elements/ElementsBreadcrumbs.ts
index 9a333a6..3fd618d2 100644
--- a/front_end/elements/ElementsBreadcrumbs.ts
+++ b/front_end/elements/ElementsBreadcrumbs.ts
@@ -2,6 +2,7 @@
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
+import * as ComponentHelpers from '../component_helpers/component_helpers.js';
import * as LitHtml from '../third_party/lit-html/lit-html.js';
import {crumbsToRender, CrumbTitle, DOMNode, NodeSelectedEvent, UserScrollPosition} from './ElementsBreadcrumbsUtils.js';
@@ -254,7 +255,6 @@
background-color: var(--toolbar-bg-color);
}
-
.overflow:not(:disabled):hover {
background-color: var(--toolbar-hover-bg-color);
cursor: pointer;
@@ -273,14 +273,12 @@
color: inherit;
}
- @media(prefers-color-scheme: dark) {
- .overflow:not(:disabled) {
- color: #fff;
- }
+ ${ComponentHelpers.GetStylesheet.DARK_MODE_CLASS} .overflow:not(:disabled) {
+ color: #fff;
}
</style>
- <nav class="crumbs">
+ <nav class=${`crumbs ${ComponentHelpers.GetStylesheet.applyDarkModeClassIfNeeded()}`}>
${this.renderOverflowButton('left', this.userScrollPosition === 'start')}
<div class="crumbs-window" @scroll=${this.onCrumbsWindowScroll}>
