diff --git a/src/Block/Inspector.php b/src/Block/Inspector.php
index 1e6b37f..8c80358 100644
--- a/src/Block/Inspector.php
+++ b/src/Block/Inspector.php
@@ -81,6 +81,16 @@ public function getJsUrl(): string
return $this->getViewFileUrl('OpenForgeProject_MageForge::js/inspector.js');
}
+ /**
+ * Get configured theme
+ *
+ * @return string
+ */
+ public function getTheme(): string
+ {
+ return (string) $this->scopeConfig->getValue('mageforge/inspector/theme') ?: 'dark';
+ }
+
/**
* Render block HTML
*
diff --git a/src/Model/Config/Source/InspectorTheme.php b/src/Model/Config/Source/InspectorTheme.php
new file mode 100644
index 0000000..df7a58e
--- /dev/null
+++ b/src/Model/Config/Source/InspectorTheme.php
@@ -0,0 +1,22 @@
+>
+ */
+ public function toOptionArray(): array
+ {
+ return [
+ ['value' => 'dark', 'label' => (string) __('Dark')],
+ ['value' => 'light', 'label' => (string) __('Light')],
+ ['value' => 'auto', 'label' => (string) __('Auto (System Preference)')],
+ ];
+ }
+}
diff --git a/src/etc/acl.xml b/src/etc/acl.xml
new file mode 100644
index 0000000..2c26999
--- /dev/null
+++ b/src/etc/acl.xml
@@ -0,0 +1,16 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/etc/adminhtml/system.xml b/src/etc/adminhtml/system.xml
new file mode 100644
index 0000000..87096a2
--- /dev/null
+++ b/src/etc/adminhtml/system.xml
@@ -0,0 +1,27 @@
+
+
+
+
+
+
+
+
+ mageforge
+ OpenForgeProject_MageForge::config_inspector
+
+
+
+
+ Magento\Config\Model\Config\Source\Yesno
+ dev/mageforge_inspector/enabled
+
+
+
+ OpenForgeProject\MageForge\Model\Config\Source\InspectorTheme
+ mageforge/inspector/theme
+ Choose between Dark, Light, or Auto (System Preference) theme.
+
+
+
+
+
diff --git a/src/etc/config.xml b/src/etc/config.xml
index 53b3473..bec36f2 100644
--- a/src/etc/config.xml
+++ b/src/etc/config.xml
@@ -7,5 +7,10 @@
0
+
+
+ dark
+
+
diff --git a/src/view/frontend/templates/inspector.phtml b/src/view/frontend/templates/inspector.phtml
index 4fcedb0..b1d9eb0 100644
--- a/src/view/frontend/templates/inspector.phtml
+++ b/src/view/frontend/templates/inspector.phtml
@@ -44,6 +44,8 @@
-
+
diff --git a/src/view/frontend/web/css/inspector.css b/src/view/frontend/web/css/inspector.css
index ccc6b71..b812e47 100644
--- a/src/view/frontend/web/css/inspector.css
+++ b/src/view/frontend/web/css/inspector.css
@@ -33,6 +33,12 @@
--mageforge-bg-dark: rgba(15, 23, 42, 0.98);
--mageforge-bg-dark-alt: rgba(30, 41, 59, 0.98);
--mageforge-border-color: rgba(148, 163, 184, 0.15);
+
+ /* Glass/Overlay Variables */
+ --mageforge-surface-glass: rgba(255, 255, 255, 0.05);
+ --mageforge-surface-glass-hover: rgba(255, 255, 255, 0.08); /* slightly lighter for hover */
+ --mageforge-border-glass: rgba(255, 255, 255, 0.1);
+ --mageforge-shadow-glow: rgba(255, 255, 255, 0.05);
}
.mageforge-inspector {
@@ -157,8 +163,8 @@
right: 12px;
width: 28px;
height: 28px;
- background: rgba(255, 255, 255, 0.05);
- border: 1px solid rgba(255, 255, 255, 0.1);
+ background: var(--mageforge-surface-glass);
+ border: 1px solid var(--mageforge-border-glass);
border-radius: 6px;
color: var(--mageforge-color-slate-400);
font-size: 16px;
@@ -502,9 +508,9 @@
display: inline-block;
transition: all 0.2s ease;
padding: 6px 10px;
- background: rgba(255, 255, 255, 0.03);
+ background: var(--mageforge-surface-glass); /* ~3% opacity */
border-radius: 6px;
- border: 1px solid rgba(255, 255, 255, 0.08);
+ border: 1px solid var(--mageforge-border-glass); /* ~8% opacity */
width: 100%;
box-sizing: border-box;
font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
@@ -512,8 +518,8 @@
}
.mageforge-info-value:hover {
- background: rgba(255, 255, 255, 0.06);
- border-color: rgba(255, 255, 255, 0.15);
+ background: var(--mageforge-surface-glass-hover);
+ border-color: var(--mageforge-border-color); /* fallback or stronger border */
transform: translateY(-1px);
}
@@ -589,7 +595,7 @@
}
.mageforge-code-tag {
- background: rgba(255,255,255,0.05);
+ background: var(--mageforge-surface-glass);
padding: 2px 6px;
border-radius: 4px;
font-family: monospace;
@@ -671,3 +677,69 @@
from { stroke-dashoffset: 500; }
to { stroke-dashoffset: 0; }
}
+
+/* ============================================================================
+ Theme Overrides
+ ========================================================================== */
+
+/* Explicit Light Mode */
+.mageforge-inspector[data-theme="light"] {
+ --mageforge-bg-dark: rgba(255, 255, 255, 0.98);
+ --mageforge-bg-dark-alt: rgba(248, 250, 252, 0.98);
+ --mageforge-border-color: rgba(0, 0, 0, 0.12);
+
+ --mageforge-color-slate-100: #0f172a; /* Slate 900 */
+ --mageforge-color-slate-200: #1e293b; /* Slate 800 */
+ --mageforge-color-slate-300: #334155; /* Slate 700 */
+ --mageforge-color-slate-400: #64748b; /* Slate 500 */
+ --mageforge-color-slate-500: #94a3b8; /* Slate 400 */
+
+ /* Glass Overlays - Inverted for light mode */
+ --mageforge-surface-glass: rgba(0, 0, 0, 0.05);
+ --mageforge-surface-glass-hover: rgba(0, 0, 0, 0.08);
+ --mageforge-border-glass: rgba(0, 0, 0, 0.1);
+ --mageforge-shadow-glow: rgba(0, 0, 0, 0.05);
+}
+
+/* Auto Mode - Light Preference */
+@media (prefers-color-scheme: light) {
+ .mageforge-inspector[data-theme="auto"] {
+ --mageforge-bg-dark: rgba(255, 255, 255, 0.98);
+ --mageforge-bg-dark-alt: rgba(248, 250, 252, 0.98);
+ --mageforge-border-color: rgba(0, 0, 0, 0.12);
+
+ --mageforge-color-slate-100: #0f172a;
+ --mageforge-color-slate-200: #1e293b;
+ --mageforge-color-slate-300: #334155;
+ --mageforge-color-slate-400: #64748b;
+ --mageforge-color-slate-500: #94a3b8;
+
+ /* Glass Overlays - Inverted for light mode */
+ --mageforge-surface-glass: rgba(0, 0, 0, 0.05);
+ --mageforge-surface-glass-hover: rgba(0, 0, 0, 0.08);
+ --mageforge-border-glass: rgba(0, 0, 0, 0.1);
+ --mageforge-shadow-glow: rgba(0, 0, 0, 0.05);
+ }
+}
+
+/* Fix for hardcoded white text in light mode */
+.mageforge-inspector[data-theme="light"] .mageforge-text-white {
+ color: var(--mageforge-color-slate-100);
+}
+
+@media (prefers-color-scheme: light) {
+ .mageforge-inspector[data-theme="auto"] .mageforge-text-white {
+ color: var(--mageforge-color-slate-100);
+ }
+
+ .mageforge-inspector[data-theme="auto"].mageforge-inspector-float-button,
+ .mageforge-inspector[data-theme="auto"] .mageforge-inspector-float-button {
+ color: white; /* Button should stay white */
+ }
+}
+
+.mageforge-inspector[data-theme="light"].mageforge-inspector-float-button,
+.mageforge-inspector[data-theme="light"] .mageforge-inspector-float-button {
+ color: white;
+}
+
diff --git a/src/view/frontend/web/js/inspector.js b/src/view/frontend/web/js/inspector.js
index 16da717..1a63f90 100644
--- a/src/view/frontend/web/js/inspector.js
+++ b/src/view/frontend/web/js/inspector.js
@@ -269,6 +269,12 @@ document.addEventListener('alpine:init', () => {
createHighlightBox() {
this.highlightBox = document.createElement('div');
this.highlightBox.className = 'mageforge-inspector mageforge-inspector-highlight';
+
+ // Propagate theme from root element to injected body element
+ if (this.$el && this.$el.hasAttribute('data-theme')) {
+ this.highlightBox.setAttribute('data-theme', this.$el.getAttribute('data-theme'));
+ }
+
this.highlightBox.style.display = 'none';
document.body.appendChild(this.highlightBox);
@@ -280,6 +286,12 @@ document.addEventListener('alpine:init', () => {
createInfoBadge() {
this.infoBadge = document.createElement('div');
this.infoBadge.className = 'mageforge-inspector mageforge-inspector-info-badge';
+
+ // Propagate theme from root element to injected body element
+ if (this.$el && this.$el.hasAttribute('data-theme')) {
+ this.infoBadge.setAttribute('data-theme', this.$el.getAttribute('data-theme'));
+ }
+
this.infoBadge.style.display = 'none';
// Create arrow element
@@ -296,6 +308,12 @@ document.addEventListener('alpine:init', () => {
createFloatingButton() {
this.floatingButton = document.createElement('button');
this.floatingButton.className = 'mageforge-inspector mageforge-inspector-float-button';
+
+ // Propagate theme from root element to injected body element
+ if (this.$el && this.$el.hasAttribute('data-theme')) {
+ this.floatingButton.setAttribute('data-theme', this.$el.getAttribute('data-theme'));
+ }
+
this.floatingButton.type = 'button';
this.floatingButton.title = 'Activate Inspector (Ctrl+Shift+I)';
@@ -304,19 +322,12 @@ document.addEventListener('alpine:init', () => {
// Icon + Text with unique gradient ID
this.floatingButton.innerHTML = `
-