@ansible/ansible-ui-framework 0.0.483 → 0.0.484

package/cjs/PageTable/PageTable.js

@@ -166,7 +166,7 @@ function TableHead(props) {
         };
     }, [setSort, setSortDirection, sort, sortDirection]);
     return ((0, jsx_runtime_1.jsx)(react_table_1.Thead, { children: (0, jsx_runtime_1.jsxs)(react_table_1.Tr, __assign({ style: {
-                backgroundColor: settings.theme === 'dark' ? 'var(--pf-global--BackgroundColor--300)' : 'white',
+                backgroundColor: settings.activeTheme === 'dark' ? 'var(--pf-global--BackgroundColor--300)' : 'white',
             } }, { children: [expandedRow && (0, jsx_runtime_1.jsx)(react_table_1.Th, { style: { padding: 0, backgroundColor: 'inherit' } }), (showSelect || onSelect) && ((0, jsx_runtime_1.jsx)(react_table_1.Th, __assign({ isStickyColumn: true, stickyMinWidth: "0px", hasRightBorder: props.scrollLeft, style: { backgroundColor: 'inherit' } }, { children: "\u00A0" }))), columns
                     .filter(function (column) { return column.enabled !== false; })
                     .map(function (column, index) {

package/cjs/Settings.d.ts

@@ -1,6 +1,7 @@
 import { ReactNode } from 'react';
 export interface Settings {
     theme?: 'system' | 'light' | 'dark';
+    activeTheme?: 'light' | 'dark';
     tableLayout?: 'compact' | 'comfortable';
     formColumns?: 'single' | 'multiple';
     formLayout?: 'vertical' | 'horizontal';

package/cjs/Settings.js

@@ -45,18 +45,20 @@ function useSettings() {
 exports.useSettings = useSettings;
 function SettingsProvider(props) {
     var _a = __read((0, react_1.useState)(function () {
+        var theme = localStorage.getItem('theme');
+        var activeTheme = theme !== 'dark' && theme !== 'light'
+            ? window.matchMedia('(prefers-color-scheme: dark)').matches
+                ? 'dark'
+                : 'light'
+            : theme;
         var settings = {
-            theme: localStorage.getItem('theme'),
+            theme: theme,
+            activeTheme: activeTheme,
             tableLayout: localStorage.getItem('tableLayout'),
             formColumns: localStorage.getItem('formColumns'),
             formLayout: localStorage.getItem('formLayout'),
             borders: localStorage.getItem('borders') !== 'false',
         };
-        var activeTheme = settings.theme !== 'dark' && settings.theme !== 'light'
-            ? window.matchMedia('(prefers-color-scheme: dark)').matches
-                ? 'dark'
-                : 'light'
-            : settings.theme;
         if (activeTheme === 'dark') {
             document.documentElement.classList.add('pf-theme-dark');
         }
@@ -72,12 +74,13 @@ function SettingsProvider(props) {
         localStorage.setItem('formColumns', (_c = settings.formColumns) !== null && _c !== void 0 ? _c : 'multiple');
         localStorage.setItem('formLayout', (_d = settings.formLayout) !== null && _d !== void 0 ? _d : 'vertical');
         localStorage.setItem('borders', settings.borders ? 'true' : 'false');
-        setSettingsState(settings);
         var activeTheme = settings.theme === 'system'
             ? window.matchMedia('(prefers-color-scheme: dark)').matches
                 ? 'dark'
                 : 'light'
             : settings.theme;
+        settings.activeTheme = activeTheme;
+        setSettingsState(settings);
         if (activeTheme === 'dark') {
             document.documentElement.classList.add('pf-theme-dark');
         }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ansible/ansible-ui-framework",
   "description": "A framework for building applications using PatternFly.",
-  "version": "0.0.483",
+  "version": "0.0.484",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",