Add Settings app transparent theme (V5.6)
Enact-injected CSS/JS theme that makes com.palm.app.settings fully transparent so the Luma wallpaper shows through. Uses PalmSystem compositor transparency + a global wildcard to strip all backgrounds, then selectively restores dark pills (0.65 opacity) on menu items and white pills on focused elements. Key features: - Dark transparent pills on all menu items (both sidebar tabs and content items) - White pill + dark text on focused items - Collapsed sidebar: white circle with dark icon for selected tab - Disabled items: forced opacity on content children to remain readable - All CSS transitions/animations disabled to prevent grey intermediate states during navigation Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Kaloyan DanchevandClaude Opus 4.6 committed
1 parent
332bbc8fe2
commit
ad306bc6bc
1 file changed
+254
@@ -0,0 +1,254 @@
|
||||
// LG webOS Settings App — Luma-style Dark Theme V5.6
|
||||
// Minimal: debug transparency (which worked) + focus/text styling only.
|
||||
// NO exception backgrounds — find what broke V5.5 by adding back incrementally.
|
||||
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
var STYLE_ID = 'luma-settings-v56';
|
||||
|
||||
// === COMPOSITOR TRANSPARENCY ===
|
||||
try {
|
||||
if (window.PalmSystem && PalmSystem.setWindowProperties) {
|
||||
PalmSystem.setWindowProperties(JSON.stringify({ transparent: true }));
|
||||
}
|
||||
} catch (e) {}
|
||||
try {
|
||||
if (window.webOSSystem && webOSSystem.setWindowProperty) {
|
||||
webOSSystem.setWindowProperty('transparent', 'true');
|
||||
}
|
||||
} catch (e) {}
|
||||
|
||||
var CSS = [
|
||||
|
||||
// -------------------------------------------------------
|
||||
// 1. NUCLEAR — same as debug version that worked
|
||||
// -------------------------------------------------------
|
||||
'*, *::before, *::after {',
|
||||
' background-color: transparent !important;',
|
||||
' background-image: none !important;',
|
||||
' box-shadow: none !important;',
|
||||
' transition: none !important;',
|
||||
' animation: none !important;',
|
||||
'}',
|
||||
'html, body {',
|
||||
' background: transparent !important;',
|
||||
' background-color: transparent !important;',
|
||||
' background-image: none !important;',
|
||||
'}',
|
||||
'body { color: rgba(255,255,255,0.85) !important; }',
|
||||
|
||||
// -------------------------------------------------------
|
||||
// 2. FOCUS — WHITE PILL + BLACK TEXT
|
||||
// -------------------------------------------------------
|
||||
// All menu item bg elements: visible dark transparent pill
|
||||
'.Item_bg__1ja9g,',
|
||||
'.TabGroup_bg__2LvB {',
|
||||
' opacity: 1 !important;',
|
||||
' background-color: rgba(0,0,0,0.65) !important;',
|
||||
' background-image: none !important;',
|
||||
' border-radius: 9999px !important;',
|
||||
' filter: none !important;',
|
||||
'}',
|
||||
|
||||
// Other bg elements stay hidden until focus
|
||||
'[class*="_bg__"]:not(.Item_bg__1ja9g):not(.TabGroup_bg__2LvB) {',
|
||||
' border-radius: 9999px !important;',
|
||||
'}',
|
||||
|
||||
// Item focus
|
||||
'.Item_item__1BmV_.neutral.spottable:focus,',
|
||||
'.Item_item__1BmV_.light.spottable:focus {',
|
||||
' color: #1a1a1a !important;',
|
||||
'}',
|
||||
'.Item_item__1BmV_.neutral.spottable:focus .Item_bg__1ja9g,',
|
||||
'.Item_item__1BmV_.light.spottable:focus .Item_bg__1ja9g {',
|
||||
' opacity: 1 !important;',
|
||||
' background-color: #fff !important;',
|
||||
' background-image: none !important;',
|
||||
' filter: none !important;',
|
||||
' border-radius: 9999px !important;',
|
||||
'}',
|
||||
'.Item_item__1BmV_.neutral.spottable:focus .Item_label__p4Xrg,',
|
||||
'.Item_item__1BmV_.light.spottable:focus .Item_label__p4Xrg,',
|
||||
'.Item_item__1BmV_.neutral.spottable:focus .Item_itemContent__3HfS4,',
|
||||
'.Item_item__1BmV_.light.spottable:focus .Item_itemContent__3HfS4,',
|
||||
'.Item_item__1BmV_.neutral.spottable:focus .Item_slotAfter__3RINU,',
|
||||
'.Item_item__1BmV_.light.spottable:focus .Item_slotAfter__3RINU,',
|
||||
'.Item_item__1BmV_.neutral.spottable:focus .Item_slotBefore__CDN7s,',
|
||||
'.Item_item__1BmV_.light.spottable:focus .Item_slotBefore__CDN7s,',
|
||||
'.Item_item__1BmV_.neutral.spottable:focus .Icon_icon__19p5G,',
|
||||
'.Item_item__1BmV_.light.spottable:focus .Icon_icon__19p5G {',
|
||||
' color: #1a1a1a !important;',
|
||||
'}',
|
||||
|
||||
// Disabled items: force content children visible
|
||||
'.Item_item__1BmV_[disabled] .Item_itemContent__3HfS4,',
|
||||
'.Item_item__1BmV_[aria-disabled="true"] .Item_itemContent__3HfS4,',
|
||||
'.Item_item__1BmV_[disabled] .Item_label__p4Xrg,',
|
||||
'.Item_item__1BmV_[aria-disabled="true"] .Item_label__p4Xrg,',
|
||||
'.Item_item__1BmV_[disabled] .Item_slotAfter__3RINU,',
|
||||
'.Item_item__1BmV_[aria-disabled="true"] .Item_slotAfter__3RINU,',
|
||||
'.Item_item__1BmV_[disabled] .Item_slotBefore__CDN7s,',
|
||||
'.Item_item__1BmV_[aria-disabled="true"] .Item_slotBefore__CDN7s,',
|
||||
'.Item_item__1BmV_[disabled] .Icon_icon__19p5G,',
|
||||
'.Item_item__1BmV_[aria-disabled="true"] .Icon_icon__19p5G {',
|
||||
' opacity: 1 !important;',
|
||||
' color: rgba(255,255,255,0.5) !important;',
|
||||
'}',
|
||||
|
||||
// Disabled focus
|
||||
'.Item_item__1BmV_.neutral[disabled].spottable:focus .Item_bg__1ja9g {',
|
||||
' background-color: rgba(255,255,255,0.35) !important;',
|
||||
' background-image: none !important;',
|
||||
' filter: none !important;',
|
||||
' border-radius: 9999px !important;',
|
||||
'}',
|
||||
|
||||
// Button focus
|
||||
'.Button_button__LqQCv.neutral.spottable:focus,',
|
||||
'.Button_button__LqQCv.light.spottable:focus {',
|
||||
' color: #1a1a1a !important;',
|
||||
'}',
|
||||
'.Button_button__LqQCv.neutral.spottable:focus .Button_bg__1DWnb,',
|
||||
'.Button_button__LqQCv.light.spottable:focus .Button_bg__1DWnb {',
|
||||
' opacity: 1 !important;',
|
||||
' background-color: #fff !important;',
|
||||
' background-image: none !important;',
|
||||
' filter: none !important;',
|
||||
' border-radius: 9999px !important;',
|
||||
'}',
|
||||
'.Button_button__LqQCv.neutral.spottable:focus .Button_client__X9lY-,',
|
||||
'.Button_button__LqQCv.light.spottable:focus .Button_client__X9lY-,',
|
||||
'.Button_button__LqQCv.neutral.spottable:focus .Icon_icon__19p5G,',
|
||||
'.Button_button__LqQCv.light.spottable:focus .Icon_icon__19p5G {',
|
||||
' color: #1a1a1a !important;',
|
||||
'}',
|
||||
|
||||
// Switch focus
|
||||
'.Switch_switch__1X1R2.neutral.spottable:focus .Switch_bg__1QG-g,',
|
||||
'.Switch_switch__1X1R2.light.spottable:focus .Switch_bg__1QG-g {',
|
||||
' opacity: 1 !important;',
|
||||
' background-color: #fff !important;',
|
||||
' background-image: none !important;',
|
||||
' filter: none !important;',
|
||||
' border-radius: 9999px !important;',
|
||||
'}',
|
||||
|
||||
// InputField focus
|
||||
'.InputField_inputField__1-pDj.neutral.spottable:focus .InputField_bg__2LASa,',
|
||||
'.InputField_inputField__1-pDj.light.spottable:focus .InputField_bg__2LASa {',
|
||||
' opacity: 1 !important;',
|
||||
' background-color: #fff !important;',
|
||||
' background-image: none !important;',
|
||||
' filter: none !important;',
|
||||
' border-radius: 9999px !important;',
|
||||
'}',
|
||||
|
||||
// Checkbox focus
|
||||
'.Checkbox_checkbox__3l7IM.neutral.spottable:focus .Checkbox_bg__IwXkB,',
|
||||
'.Checkbox_checkbox__3l7IM.light.spottable:focus .Checkbox_bg__IwXkB {',
|
||||
' opacity: 1 !important;',
|
||||
' background-color: #fff !important;',
|
||||
' background-image: none !important;',
|
||||
' filter: none !important;',
|
||||
' border-radius: 9999px !important;',
|
||||
'}',
|
||||
|
||||
// ImageItem focus
|
||||
'.ImageItem_imageItem__3nlUF.neutral.spottable:focus,',
|
||||
'.ImageItem_imageItem__3nlUF.light.spottable:focus { color: #1a1a1a !important; }',
|
||||
'.ImageItem_imageItem__3nlUF.neutral.spottable:focus:before,',
|
||||
'.ImageItem_imageItem__3nlUF.light.spottable:focus:before {',
|
||||
' background-color: #fff !important;',
|
||||
' background-image: none !important;',
|
||||
' filter: none !important;',
|
||||
' border-radius: 9999px !important;',
|
||||
'}',
|
||||
|
||||
// RadioItem / FormCheckboxItem focus
|
||||
'.RadioItem_radioItem__1ToLq.neutral.spottable:focus,',
|
||||
'.RadioItem_radioItem__1ToLq.light.spottable:focus,',
|
||||
'.FormCheckboxItem_item__2hL1Y.neutral.spottable:focus,',
|
||||
'.FormCheckboxItem_item__2hL1Y.light.spottable:focus { color: #1a1a1a !important; }',
|
||||
|
||||
'.spottable:focus { outline: none !important; }',
|
||||
|
||||
// Dropdown selected
|
||||
'.Dropdown_dropdownList__28ooy.neutral [data-selected=true]:not(:focus),',
|
||||
'.Dropdown_dropdownList__28ooy.light [data-selected=true]:not(:focus) {',
|
||||
' color: #30ad6b !important;',
|
||||
'}',
|
||||
|
||||
// -------------------------------------------------------
|
||||
// 3. TEXT & MISC
|
||||
// -------------------------------------------------------
|
||||
'.Item_item__1BmV_, .Item_item__3dle8 {',
|
||||
' color: rgba(255,255,255,0.85) !important;',
|
||||
'}',
|
||||
'.TabGroup_tab__b84ui {',
|
||||
' color: rgba(255,255,255,0.5) !important;',
|
||||
' background-color: rgba(0,0,0,0.65) !important;',
|
||||
' background-image: none !important;',
|
||||
' border-radius: 9999px !important;',
|
||||
'}',
|
||||
'.TabGroup_selected__2LXAt {',
|
||||
' color: #fff !important;',
|
||||
' background-color: rgba(255,255,255,0.15) !important;',
|
||||
' background-image: none !important;',
|
||||
' border-radius: 9999px !important;',
|
||||
'}',
|
||||
// Collapsed sidebar: selected tab = white circle + black icon
|
||||
'.TabLayout_collapsed__3eBfa .TabGroup_selected__2LXAt {',
|
||||
' background-color: #fff !important;',
|
||||
' color: #1a1a1a !important;',
|
||||
'}',
|
||||
'.TabLayout_collapsed__3eBfa .TabGroup_selected__2LXAt .Icon_icon__19p5G {',
|
||||
' color: #1a1a1a !important;',
|
||||
'}',
|
||||
// Focused tab: white pill
|
||||
'.TabGroup_tab__b84ui.spottable:focus {',
|
||||
' color: #1a1a1a !important;',
|
||||
' background-color: #fff !important;',
|
||||
' background-image: none !important;',
|
||||
' border-radius: 9999px !important;',
|
||||
'}',
|
||||
'.TabGroup_horizontalLine__29xHf { border-bottom-color: rgba(255,255,255,0.04) !important; }',
|
||||
|
||||
'.Button_button__LqQCv {',
|
||||
' color: rgba(255,255,255,0.85) !important;',
|
||||
' border-radius: 9999px !important;',
|
||||
'}',
|
||||
|
||||
'.Header_header__1DWOh {',
|
||||
' color: #fff !important;',
|
||||
' border-bottom: 1px solid rgba(255,255,255,0.06) !important;',
|
||||
'}',
|
||||
|
||||
'h1, h2, h3 { color: #fff !important; }',
|
||||
'.Heading_heading__3NZc6 { color: #fff !important; }',
|
||||
|
||||
'* { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.08) transparent; }',
|
||||
|
||||
''
|
||||
].join('\n');
|
||||
|
||||
function injectStyle() {
|
||||
if (document.getElementById(STYLE_ID)) return;
|
||||
var style = document.createElement('style');
|
||||
style.id = STYLE_ID;
|
||||
style.textContent = CSS;
|
||||
document.head.appendChild(style);
|
||||
}
|
||||
|
||||
if (document.body) {
|
||||
injectStyle();
|
||||
} else {
|
||||
document.addEventListener('DOMContentLoaded', injectStyle);
|
||||
}
|
||||
|
||||
new MutationObserver(function () {
|
||||
if (!document.getElementById(STYLE_ID)) injectStyle();
|
||||
}).observe(document.documentElement, { childList: true, subtree: true });
|
||||
|
||||
})();
|
||||
Reference in new issue
Block a user