Merge pull request #2739 from Marvin9/feat/flexible-theme-for-page

feat: theme customization for pages

plugins/lighthouse/src/components/AuditList/index.tsx

@@ -13,7 +13,6 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-
 import React, { useState, useMemo, FC, ReactNode } from 'react';
 import { useLocalStorage, useAsync } from 'react-use';
 import { useNavigate } from 'react-router-dom';
@@ -28,7 +27,6 @@ import {
   ContentHeader,
   HeaderLabel,
   Progress,
-  pageTheme,
   useApi,
 } from '@backstage/core';
 
@@ -95,7 +93,7 @@ const AuditList: FC<{}> = () => {
   }
 
   return (
-    <Page theme={pageTheme.tool}>
+    <Page themeId="tool">
       <Header
         title="Lighthouse"
         subtitle="Website audits powered by Lighthouse"

plugins/lighthouse/src/components/AuditView/index.tsx

@@ -34,7 +34,6 @@ import {
 import Alert from '@material-ui/lab/Alert';
 import {
   useApi,
-  pageTheme,
   InfoCard,
   Header,
   Page,
@@ -193,7 +192,7 @@ export const AuditViewContent: FC<{}> = () => {
 };
 
 const ConnectedAuditView = () => (
-  <Page theme={pageTheme.tool}>
+  <Page themeId="tool">
     <Header title="Lighthouse" subtitle="Website audits powered by Lighthouse">
       <HeaderLabel label="Owner" value="Spotify" />
       <HeaderLabel label="Lifecycle" value="Alpha" />

plugins/lighthouse/src/components/CreateAudit/index.tsx

@@ -30,7 +30,6 @@ import {
   InfoCard,
   Header,
   Page,
-  pageTheme,
   Content,
   ContentHeader,
   HeaderLabel,
@@ -170,7 +169,7 @@ export const CreateAuditContent: FC<{}> = () => {
 };
 
 const CreateAudit = () => (
-  <Page theme={pageTheme.tool}>
+  <Page themeId="tool">
     <Header title="Lighthouse" subtitle="Website audits powered by Lighthouse">
       <HeaderLabel label="Owner" value="Spotify" />
       <HeaderLabel label="Lifecycle" value="Alpha" />