ui/src/assets/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-background: white;
    --pf-color-background-secondary: #edf0f1;
    --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-track-summary-collapsed: #f4fafb;
    --pf-color-track-summary-expanded: #262f3b;
    --pf-color-track-summary-expanded-text: #e8eaed;
    --pf-color-box-shadow: rgba(0, 0, 0, 0.2);
    --pf-color-neutral: gray;
    --pf-color-accent: #2667e7;
    --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);
  }

  &--dark {
    --pf-color-background: #232426;
    --pf-color-background-secondary: #383a3e;
    --pf-color-interactive-base: white;
    --pf-color-text: #dce0e2;
    --pf-color-text-muted: #a0a2a5;
    --pf-color-text-disabled: #8d8d8e;
    --pf-color-border: #626568;
    --pf-color-border-secondary: #404042;
    --pf-color-text-hint: #9aa0a6;
    --pf-color-track-summary-collapsed: #2f3437;
    --pf-color-track-summary-expanded: #454d55;
    --pf-color-track-summary-expanded-text: #e8eaed;
    --pf-color-box-shadow: rgba(0, 0, 0, 0.4);
    --pf-color-neutral: gray;
    --pf-color-accent: #2667e7;
    --pf-color-highlight: #ffe263;

    --pf-color-primary: #7197e3;
    --pf-color-text-on-primary: #333;
    --pf-color-danger: rgb(230, 90, 90);
    --pf-color-text-on-danger: #333;
    --pf-color-success: rgb(52, 221, 52);
    --pf-color-text-on-success: #333;
    --pf-color-warning: rgb(244, 188, 67);
    --pf-color-text-on-warning: #333;
  }
}