ui/src/frontend/theme_provider.scss

// Copyright (C) 2025 The Android Open Source Project
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
//      http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.

.pf-theme-provider {
  display: contents;

  // Set color at the root level as it's inherited by children.
  color: var(--pf-color-text);

  // Set background at the root level so that it applies to the entire app.
  background-color: var(--pf-color-background);

  // Theme scroll bars across the entire app.
  scrollbar-color: var(--pf-color-border) var(--pf-color-background); /* thumb color track color */

  &--light {
    --pf-color-void: white;
    --pf-color-background: white;
    --pf-color-background-secondary: #edf0f1;
    --pf-color-background-tertiary: #e3e9eb;
    --pf-color-interactive-base: rgb(4, 33, 56);
    --pf-color-text: #333;
    --pf-color-text-muted: #75797c;
    --pf-color-text-disabled: gray;
    --pf-color-border: #ccc;
    --pf-color-border-secondary: #e0e0e0;
    --pf-color-text-hint: #808080;
    --pf-color-box-shadow: rgba(0, 0, 0, 0.2);
    --pf-color-neutral: gray;
    --pf-color-accent: #2667e7;
    --pf-color-text-on-accent: white;
    --pf-color-highlight: #ffe263;

    --pf-color-primary: #3d5688;
    --pf-color-text-on-primary: white;
    --pf-color-danger: rgb(202, 38, 38);
    --pf-color-text-on-danger: white;
    --pf-color-success: rgb(0, 128, 0);
    --pf-color-text-on-success: white;
    --pf-color-warning: rgb(232, 158, 0);
    --pf-color-text-on-warning: var(--pf-color-text);

    // Chart color palette for data visualization
    --pf-chart-color-1: #4285f4; // Google Blue
    --pf-chart-color-2: #ea4335; // Google Red
    --pf-chart-color-3: #fbbc04; // Google Yellow
    --pf-chart-color-4: #34a853; // Google Green
    --pf-chart-color-5: #ff6d01; // Orange
    --pf-chart-color-6: #46bdc6; // Cyan
    --pf-chart-color-7: #9334e6; // Purple
    --pf-chart-color-8: #185abc; // Dark Blue
    --pf-chart-color-neutral: #9e9e9e; // Gray (for unknown/other)
    // Foreground color for text/icons drawn on top of any --pf-chart-color-*.
    --pf-chart-color-on: #f5f5f5;

    --pf-color-track-summary-collapsed: #f4fafb;
    --pf-color-track-summary-expanded: #262f3b;
    --pf-color-track-summary-expanded-text: #e8eaed;
    --pf-color-timeline-overlay: black;

    // In light mode, the sidebar has a custom distinct blue color scheme.
    --pf-sidebar-surface: #262f3c;
    --pf-sidebar-surface-secondary: #19212b;
    --pf-sidebar-on-surface: #c8c8c8;
    --pf-sidebar-on-surface-muted: #a0a0a0;
    --pf-sidebar-border: #4d5765;
    --pf-sidebar-border-secondary: #404854;
  }

  &--dark {
    --pf-color-void: #181818;
    --pf-color-background: #202020;
    --pf-color-background-secondary: #343434;
    --pf-color-background-tertiary: #4a4a4a;
    --pf-color-interactive-base: white;
    --pf-color-text: #dce0e2;
    --pf-color-text-muted: #a0a2a5;
    --pf-color-text-disabled: #8d8d8e;
    --pf-color-border: #484848;
    --pf-color-border-secondary: #383838;
    --pf-color-text-hint: #9aa0a6;
    --pf-color-box-shadow: rgba(0, 0, 0, 0.4);
    --pf-color-neutral: gray;
    --pf-color-accent: #2667e7;
    --pf-color-text-on-accent: white;
    --pf-color-highlight: #5f4d06;

    --pf-color-primary: #598bed;
    --pf-color-text-on-primary: #333;
    --pf-color-danger: rgb(230, 90, 90);
    --pf-color-text-on-danger: #333;
    --pf-color-success: rgb(99, 192, 99);
    --pf-color-text-on-success: #333;
    --pf-color-warning: rgb(244, 188, 67);
    --pf-color-text-on-warning: #333;

    // Chart color palette for data visualization (brighter for dark mode)
    --pf-chart-color-1: #5e97f6; // Lighter Blue
    --pf-chart-color-2: #f28b82; // Lighter Red
    --pf-chart-color-3: #fdd663; // Lighter Yellow
    --pf-chart-color-4: #81c995; // Lighter Green
    --pf-chart-color-5: #ff8866; // Lighter Orange
    --pf-chart-color-6: #78d9e4; // Lighter Cyan
    --pf-chart-color-7: #c58af9; // Lighter Purple
    --pf-chart-color-8: #669df6; // Lighter Dark Blue
    --pf-chart-color-neutral: #9e9e9e; // Gray (for unknown/other)
    // Foreground color for text/icons drawn on top of any --pf-chart-color-*.
    --pf-chart-color-on: #1a1a1a;

    --pf-color-track-summary-collapsed: #2f3437;
    --pf-color-track-summary-expanded: #454d55;
    --pf-color-track-summary-expanded-text: #e8eaed;
    --pf-color-timeline-overlay: white;

    // In dark mode, the sidebar uses the same styles as the rest of the app
    --pf-sidebar-surface: var(--pf-color-background-secondary);
    --pf-sidebar-surface-secondary: var(--pf-color-background);

    --pf-sidebar-on-surface: var(--pf-color-text);
    --pf-sidebar-on-surface-muted: var(--pf-color-text-muted);
    --pf-sidebar-border: var(--pf-color-border);
    --pf-sidebar-border-secondary: var(--pf-color-border-secondary);

    // Some images are designed for light mode, so invert them for dark mode.
    --pf-img-filter: invert(1) hue-rotate(180deg) saturate(70%);
  }
}