Merge pull request #87 from dlabaj/issue82

Fixes in ability to apply a dark theme only to the log viewer
patternfly · Dec 4, 2024 · 9700620 · 9700620
2 parents fdcecca + 22385dc
commit 9700620
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 9 deletions.
diff --git a/packages/module/src/LogViewer/LogViewer.tsx b/packages/module/src/LogViewer/LogViewer.tsx
@@ -312,7 +312,7 @@ const LogViewerBase: React.FunctionComponent<LogViewerProps> = memo(
             hasLineNumbers && styles.modifiers.lineNumbers,
             !isTextWrapped && styles.modifiers.nowrap,
             initialIndexWidth && styles.modifiers.lineNumberChars,
-            theme === 'dark' && styles.themeDark
+            theme === 'dark' && styles.modifiers.dark
           )}
           {...(initialIndexWidth && {
             style: {

diff --git a/packages/module/src/LogViewer/css/log-viewer.css b/packages/module/src/LogViewer/css/log-viewer.css
@@ -45,21 +45,22 @@
   --pf-v6-c-log-viewer--c-toolbar__group--m-toggle-group--spacer: 0;
   --pf-v6-c-log-viewer--c-toolbar__group--m-toggle-group--m-show--spacer: var(--pf-t--global--spacer--sm);
   --pf-v6-c-log-viewer--m-dark__main--BorderWidth: 0;
+  --pf-v6-c-log-viewer--m-dark__main--BackgroundColor: var(--pf-t--global--background--color--inverse--default);
+  --pf-v6-c-log-viewer--m-dark__text--Color: var(--pf-t--global--text--color--inverse);
+  --pf-v6-c-log-viewer--m-dark__index--Color: var(--pf-t--global--text--color--inverse);
   display: flex;
   flex-direction: column;
   height: var(--pf-v6-c-log-viewer--Height);
   max-height: var(--pf-v6-c-log-viewer--MaxHeight);
 }
-.pf-v6-c-log-viewer.pf-v6-theme-dark {
+
+html:not(.pf-v6-theme-dark) .pf-v6-c-log-viewer.pf-m-dark { 
   --pf-v6-c-log-viewer__main--BorderWidth: var(--pf-v6-c-log-viewer--m-dark__main--BorderWidth);
+  --pf-v6-c-log-viewer__main--BackgroundColor: var(--pf-v6-c-log-viewer--m-dark__main--BackgroundColor); 
+  --pf-v6-c-log-viewer__text--Color: var(--pf-v6-c-log-viewer--m-dark__text--Color); 
+  --pf-v6-c-log-viewer__index--Color: var( --pf-v6-c-log-viewer--m-dark__index--Color); 
 }
-.pf-v6-c-log-viewer.pf-v6-theme-dark .pf-v6-c-log-viewer__main {
-  --pf-v6-c-log-viewer__main--BackgroundColor: var(--pf-t--global--background--color--primary--default);
-  --pf-v6-c-log-viewer__main--BorderColor: var(--pf-t--global--border--color--default);
-  --pf-v6-c-log-viewer__text--Color: var(--pf-t--global--text--color--regular);
-  --pf-v6-c-log-viewer__index--Color: var(--pf-t--global--text--color--subtle);
-  --pf-v6-c-log-viewer--m-line-numbers__list--before--BackgroundColor: var(--pf-t--global--border--color--default);
-}
+
 .pf-v6-c-log-viewer.pf-m-wrap-text {
   word-break: break-all;
 }

diff --git a/packages/module/src/LogViewer/css/log-viewer.ts b/packages/module/src/LogViewer/css/log-viewer.ts
@@ -11,6 +11,7 @@ export default {
   "logViewerText": "pf-v6-c-log-viewer__text",
   "logViewerTimestamp": "pf-v6-c-log-viewer__timestamp",
   "modifiers": {
+    "dark": "pf-m-dark",
     "wrapText": "pf-m-wrap-text",
     "nowrap": "pf-m-nowrap",
     "lineNumbers": "pf-m-line-numbers",