Skip to content

feat: implement dark/light mode theme selection and admin configuration section #131

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
dermatz merged 1 commit into from
Feb 10, 2026
+186 −21
Merged

feat: implement dark/light mode theme selection and admin configuration section #131

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
10 changes: 10 additions & 0 deletions src/Block/Inspector.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
}
Comment on lines +89 to +92
Copy link

Copilot AI Feb 10, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

getTheme() reads mageforge/inspector/theme from the default scope only; this means website/store-view overrides configured in system.xml won’t be reflected on the storefront. Read this value using store scope (e.g., pass ScopeInterface::SCOPE_STORE to getValue()) so the frontend honors per-store configuration.

Copilot uses AI. Check for mistakes.

/**
* Render block HTML
*
Expand Down
22 changes: 22 additions & 0 deletions src/Model/Config/Source/InspectorTheme.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
<?php

declare(strict_types=1);

namespace OpenForgeProject\MageForge\Model\Config\Source;

use Magento\Framework\Data\OptionSourceInterface;

class InspectorTheme implements OptionSourceInterface
{
/**
* @return array<int, array<string, string>>
*/
public function toOptionArray(): array
{
return [
['value' => 'dark', 'label' => (string) __('Dark')],
['value' => 'light', 'label' => (string) __('Light')],
['value' => 'auto', 'label' => (string) __('Auto (System Preference)')],
];
}
}
16 changes: 16 additions & 0 deletions src/etc/acl.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Acl/etc/acl.xsd">
<acl>
<resources>
<resource id="Magento_Backend::admin">
<resource id="Magento_Backend::stores">
<resource id="Magento_Backend::stores_settings">
<resource id="Magento_Config::config">
<resource id="OpenForgeProject_MageForge::config_inspector" title="MageForge Inspector" sortOrder="50" />
</resource>
</resource>
</resource>
</resource>
</resources>
</acl>
</config>
27 changes: 27 additions & 0 deletions src/etc/adminhtml/system.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Config:etc/system_file.xsd">
<system>
<tab id="mageforge" translate="label" sortOrder="200">
<label>MageForge</label>
</tab>
<section id="mageforge_inspector" translate="label" type="text" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">
<label>Inspector</label>
<tab>mageforge</tab>
<resource>OpenForgeProject_MageForge::config_inspector</resource>
<group id="general" translate="label" type="text" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">
<label>General Settings</label>
<field id="enabled" translate="label" type="select" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">
<label>Enabled</label>
<source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
<config_path>dev/mageforge_inspector/enabled</config_path>
</field>
<field id="theme" translate="label" type="select" sortOrder="20" showInDefault="1" showInWebsite="1" showInStore="1">
<label>Theme</label>
<source_model>OpenForgeProject\MageForge\Model\Config\Source\InspectorTheme</source_model>
<config_path>mageforge/inspector/theme</config_path>
<comment>Choose between Dark, Light, or Auto (System Preference) theme.</comment>
</field>
Comment on lines +18 to +23
Copy link

Copilot AI Feb 10, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The field includes a <comment> string, but the translate attribute is only set to label. In Magento system.xml, comments won’t be picked up for translation unless you include comment in the translate list (e.g., translate="label comment").

Copilot uses AI. Check for mistakes.
</group>
</section>
</system>
</config>
5 changes: 5 additions & 0 deletions src/etc/config.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,5 +7,10 @@
<enabled>0</enabled>
</mageforge_inspector>
</dev>
<mageforge>
<inspector>
<theme>dark</theme>
</inspector>
</mageforge>
</default>
</config>
4 changes: 3 additions & 1 deletion src/view/frontend/templates/inspector.phtml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,8 @@
<script defer src="<?= $escaper->escapeUrl($block->getJsUrl()) ?>"></script>

<!-- Inspector Component Wrapper -->
<div class="mageforge-inspector" x-data="mageforgeInspector"></div>
<div class="mageforge-inspector"
x-data="mageforgeInspector"
data-theme="<?= $escaper->escapeHtmlAttr($block->getTheme()) ?>"></div>


86 changes: 79 additions & 7 deletions src/view/frontend/web/css/inspector.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}

Copy link

Copilot AI Feb 10, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The new CSS custom property --mageforge-shadow-glow is defined (and overridden for themes) but never used anywhere in this stylesheet. Consider removing it until it’s needed, or apply it where appropriate to avoid accumulating unused variables.

Suggested change
.mageforge-inspector--glow {
box-shadow: 0 0 0 1px var(--mageforge-shadow-glow);
}

Copilot uses AI. Check for mistakes.
.mageforge-inspector {
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -502,18 +508,18 @@
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;
pointer-events: auto;
}

.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);
}

Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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 */

Comment on lines +691 to +696
Copy link

Copilot AI Feb 10, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In the light theme override, --mageforge-color-slate-400 is assigned a darker value than --mageforge-color-slate-500 (effectively swapping the 400/500 shades vs the :root definitions). This makes the variable naming inconsistent and can lead to unexpected colors where these variables are used; consider keeping shade ordering consistent and adjusting specific usages instead.

Copilot uses AI. Check for mistakes.
/* 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;
}

37 changes: 24 additions & 13 deletions src/view/frontend/web/js/inspector.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -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
Expand All @@ -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)';

Expand All @@ -304,19 +322,12 @@ document.addEventListener('alpine:init', () => {

// Icon + Text with unique gradient ID
this.floatingButton.innerHTML = `
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" viewBox="0 0 64 64" width="16" height="16" style="flex-shrink: 0;">
<defs>
<linearGradient id="${gradientId}" x1="32" x2="32" y1="36" y2="4" gradientUnits="userSpaceOnUse">
<stop offset="0%" stop-color="#ffc837"/>
<stop offset="50%" stop-color="#ff3d00"/>
<stop offset="100%" stop-color="#7b1fa2"/>
</linearGradient>
</defs>
<path fill="white" d="M56 36H44v-4c0-1.1046-.8954-2-2-2H16c-2.6569 0-5.1046.8954-7 2.4472V36H8c-1.10457 0-2 .8954-2 2v2c0 1.1046.89543 2 2 2h10.6484c1.6969 3.2887 3.5871 6.4797 5.6503 9.5605L22 56H12c-1.1046 0-2 .8954-2 2v2h44v-2c0-1.1046-.8954-2-2-2H42l-2.2987-4.4395c2.0632-3.0808 3.9534-6.2718 5.6503-9.5605H56c1.1046 0 2-.8954 2-2v-2c0-1.1046-.8954-2-2-2" opacity="0.9"/>
<path fill="url(#${gradientId})" d="M32 4S22 18 22 27c0 4.9706 4.4772 9 10 9s10-4.0294 10-9c0-9-10-23-10-23m0 10s-4 6-4 10c0 2.2091 1.7909 4 4 4s4-1.7909 4-4c0-4-4-10-4-10"/>
<circle cx="20" cy="18" r="1.5" fill="#ffc837" opacity="0.8"/>
<circle cx="44" cy="18" r="1.5" fill="#e0b3ff" opacity="0.8"/>
<circle cx="32" cy="10" r="1" fill="#ff3d00" opacity="0.9"/>
<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="currentColor" height="20" width="20">
<g stroke-width="0"></g>
<g stroke-linecap="round" stroke-linejoin="round"></g>
<g>
<path fill-rule="evenodd" clip-rule="evenodd" d="M1 3l1-1h12l1 1v6h-1V3H2v8h5v1H2l-1-1V3zm14.707 9.707L9 6v9.414l2.707-2.707h4zM10 13V8.414l3.293 3.293h-2L10 13z"></path>
</g>
</svg>
<span>MageForge Inspector</span>
`;
Expand Down
Loading