Skip to content

ROX-31762: Remove references to unused dark theme #17934

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
dvail merged 1 commit into from
Dec 3, 2025
Merged

ROX-31762: Remove references to unused dark theme #17934

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 12 additions & 6 deletions ui/apps/platform/src/Components/CodeViewer.cy.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,13 +42,16 @@ describe(Cypress.spec.relative, () => {
cy.mount(<CodeViewer code={sampleYaml} />);

// Default to light mode
cy.get('.pf-v5-theme-dark').should('not.exist');
cy.get('[data-component-theme="light"]').should('exist');
cy.get('[data-component-theme="dark"]').should('not.exist');

cy.get('button[aria-label="Set dark theme"]').click();
cy.get('.pf-v5-theme-dark');
cy.get('[data-component-theme="light"]').should('not.exist');
cy.get('[data-component-theme="dark"]').should('exist');

cy.get('button[aria-label="Set light theme"]').click();
cy.get('.pf-v5-theme-dark').should('not.exist');
cy.get('[data-component-theme="light"]').should('exist');
cy.get('[data-component-theme="dark"]').should('not.exist');
});

it('should share theme state across multiple instances', () => {
Expand All @@ -59,18 +62,21 @@ describe(Cypress.spec.relative, () => {
</CodeViewerThemeProvider>
);

cy.get('.pf-v5-theme-dark').should('not.exist');
cy.get('[data-component-theme="light"]').should('have.length', 2);
cy.get('[data-component-theme="dark"]').should('have.length', 0);

cy.get('button[aria-label="Set dark theme"]').eq(0);
cy.get('button[aria-label="Set dark theme"]').eq(1);
cy.get('button[aria-label="Set dark theme"]').eq(0).click();

cy.get('.pf-v5-theme-dark').should('have.length', 2);
cy.get('[data-component-theme="light"]').should('have.length', 0);
cy.get('[data-component-theme="dark"]').should('have.length', 2);

cy.get('button[aria-label="Set light theme"]').eq(0);
cy.get('button[aria-label="Set light theme"]').eq(1);
cy.get('button[aria-label="Set light theme"]').eq(1).click();

cy.get('.pf-v5-theme-dark').should('not.exist');
cy.get('[data-component-theme="light"]').should('have.length', 2);
cy.get('[data-component-theme="dark"]').should('have.length', 0);
});
});
16 changes: 14 additions & 2 deletions ui/apps/platform/src/Components/CodeViewer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,15 @@ const defaultStyle = {
overflowY: 'auto',
} as const;

const lightThemeStyles = {} as const;

// TODO This should be deleted when we move to proper PatternFly theming
const darkThemeStyles = {
'--pf-t--global--background--color--secondary--default': 'var(--pf-t--color--gray--95)',
'--pf-t--global--text--color--regular': 'var(--pf-t--color--white)',
'--pf-t--global--icon--color--regular': 'var(--pf-t--color--white)',
} as const;

export type CodeViewerProps = {
code: string;
language?: SupportedLanguages;
Expand Down Expand Up @@ -94,11 +103,14 @@ export default function CodeViewer({
</>
);

const themeStyles = theme === 'light' ? lightThemeStyles : darkThemeStyles;

// TODO - When Tailwind is removed, we likely need to get rid of this font size override
return (
<CodeBlock
className={`${theme === 'light' ? '' : 'pf-v5-theme-dark'} pf-v6-u-p-0 pf-v6-u-font-size-xs pf-v6-u-max-height ${className}`}
style={{ ...defaultStyle, ...style }}
data-component-theme={theme}
className={`pf-v6-u-p-0 pf-v6-u-font-size-xs pf-v6-u-max-height ${className}`}
style={{ ...defaultStyle, ...style, ...themeStyles }}
actions={actions}
>
<SyntaxHighlighter
Expand Down
21 changes: 0 additions & 21 deletions ui/apps/platform/src/app.tw.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@
@import 'css/style.css';

@import 'css/light.theme.css';
@import 'css/dark.theme.css';

/* React Table overrides. Delete this file once all react Table properties are ported over properly to avoid the use of !important*/
@import 'react-table-6/react-table.css';
Expand All @@ -16,12 +15,6 @@
@import 'react-vis/dist/style.css';


.theme-dark .react-select__option:hover,
.theme-dark .react-select__option:focus,
.theme-dark .react-select__option:active {
background: var(--base-400);
}

@tailwind base;
@tailwind components;
@tailwind utilities;
Expand Down Expand Up @@ -447,20 +440,6 @@ h6 {
@apply bg-base-100 !important; /* th also needs background for horizontal scrolling beyond tr width */
}

.theme-dark .ReactTable .rt-thead.-header .rt-tr {
@apply border-b border-base-200 bg-base-0 !important;
box-shadow: -10px 0 0 var(--base-100), 10px 0 0 var(--base-100), 0 2px 8px 0 hsl(233, 25%, 15%) !important;
}

.theme-dark .ReactTable .rt-th {
@apply bg-base-0 !important; /* th also needs background for horizontal scrolling beyond tr width */
}

.theme-dark .widget .ReactTable .rt-thead.-header .rt-tr,
.theme-dark .widget .ReactTable .rt-th {
@apply bg-base-100 !important;
}

.ReactTable .rt-thead .rt-th.-sort-desc,
.ReactTable .rt-thead .rt-th.-sort-asc {
@apply shadow-none !important;
Expand Down
96 changes: 0 additions & 96 deletions ui/apps/platform/src/css/dark.theme.css
View file
Open in desktop

This file was deleted.

11 changes: 0 additions & 11 deletions ui/apps/platform/src/css/trumps.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,11 +17,6 @@ body {

/* Universal selector increases specificity of these override style rules */

* .theme-dark {
--base-500: #aaabac;
--base-600: #ffffff;
}

* .theme-light {
--base-500: var(--pf-t--color--gray--60);
--base-600: var(--pf-t--color--gray--90);
Expand Down Expand Up @@ -167,12 +162,6 @@ button[data-testid="related-entity-value"]:hover,
align-self: center;
}

/* Override filter which simulates dark background color */
.theme-dark .pf-v6-c-table input[type='checkbox'],
.theme-dark .pf-v6-c-check input[type='checkbox'] {
filter: inherit; /* replace invert(0.3) */
}

/* override width of thead checkbox so that it's not cut off when table is empty */
.pf-v6-c-table thead tr > .pf-v6-c-table__check {
min-width: 44px;
Expand Down
14 changes: 0 additions & 14 deletions ui/apps/platform/src/services/PDFExportService.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,24 +62,10 @@ function createPDFBodyElement() {
* @param {HTMLElement} element
*/
function computeStyles(element) {
const isThemeDark = document.body.className.includes('theme-dark');

// if dark mode is enabled, we want to switch to light mode for exporting to PDF
if (isThemeDark) {
document.body.classList.remove('theme-dark');
document.body.classList.add('theme-light');
}

computedStyleToInlineStyle(element, {
recursive: true,
properties: ['width', 'height', 'fill', 'style', 'class', 'stroke', 'font', 'font-size'],
});

// if dark mode was previously enabled, we want to switch back after styles are computed
if (isThemeDark) {
document.body.classList.remove('theme-light');
document.body.classList.add('theme-dark');
}
}

/**
Expand Down
Loading