new dark mode

[amnuts]

• Start of CSS added
• Flexible tab content
• Fixed github logo colour when dark
• Refined tabs
• Theme toggle and some html refinements

[fidoboy]

This looks very promising. How can I get the code to test it on my site?

[amnuts]

@fidoboy, depends on how you got it in the first place... If you checked it out from GitHub, then just change the branch to new-dark-mode (after doing a pull to refresh your working copy). If you downloaded a zip file, then you can download the zip file from this PR's branch: https://github.com/amnuts/opcache-gui/archive/refs/heads/new-dark-mode.zip. Then it's a matter of unzipping the file and using it as you normally would.

[fidoboy]

@fidoboy, depends on how you got it in the first place... If you checked it out from GitHub, then just change the branch to new-dark-mode (after doing a pull to refresh your working copy). If you downloaded a zip file, then you can download the zip file from this PR's branch: https://github.com/amnuts/opcache-gui/archive/refs/heads/new-dark-mode.zip. Then it's a matter of unzipping the file and using it as you normally would.

I've downloaded the zip file, but after I've unzipped it into my folder I didn't noticed any changes. I'm still having the same content than before and there is no dark mode.

[amnuts]

hmm, that's odd. When I download that link and unzip it into a folder, then go into that folder and start up a server like php -S localhost:8080 -t . and then go to http://localhost:8080/ in my browser, I certainly get this widget at the top right of the page, where I can select light, dark, or system based.

[fidoboy]

Your new widget looks amazing in your screenshots, but unfortunately it doesn't get displayed on my case. I've downloaded the source from the link that I've provided before, but it doesn't worked. However, because it doesn't worked for me, I've created this code and I've added the two files into the HTML header that index.php is creating. If it helps to anyone here it is:

This one is for dark-theme.css:

body {
    background-color: #181a1b !important;
    color: #e0e0e0 !important;
}
.navbar, .panel, .table, .card, .modal-content {
    background-color: #23272a !important;
    color: #e0e0e0 !important;
}
a, .nav-link, .btn-link {
    color: #80cbc4 !important;
}
a:hover, .nav-link:hover {
    color: #b2dfdb !important;
}
.table th, .table td {
    background-color: #222426 !important;
    color: #e0e0e0 !important;
    border-color: #333 !important;
}
.btn-primary, .btn-success, .btn-danger, .btn-warning, .btn-info {
    background-color: #444 !important;
    border-color: #333 !important;
    color: #e0e0e0 !important;
}
input, select, textarea {
    background-color: #23272a !important;
    color: #e0e0e0 !important;
    border-color: #333 !important;
}
pre, code {
    background-color: #1e2124 !important;
    color: #b2dfdb !important;
}
hr {
    border-top: 1px solid #333 !important;
}
::-webkit-scrollbar {
    background: #23272a;
}
::-webkit-scrollbar-thumb {
    background: #444;
}

.opcache-gui .tables tr:nth-child(odd) {
    background-color: #10010038 !important;
}

.opcache-gui .tables tr:nth-child(even) {
    background-color: #181a1b !important;
}

.opcache-gui .tables th {
    background-color: #303030 !important;
}

.opcache-gui .widget-panel {
    background-color: #181a1b !important;
}

.opcache-gui .widget-header {
    background-color: #121212 !important;
}

.opcache-gui .nav-tab {
    background-color: #1e1e1e !important;
    border-bottom-color: #333 !important;
}

.opcache-gui .nav-tab.active {
    border: 1px solid #333 !important;
    border-bottom-color: #000 !important;
    border-top: 3px solid #1f2f44 !important;
    background-color: #181a1b !important;
}

.opcache-gui .nav-tab-list {
    border-bottom: 1px solid #333 !important;
    background-color: #1e1e1e !important;
}

.opcache-gui .nav-tab-link-reset:hover {
    background-color: #4e0000 !important;
}

.opcache-gui .nav-tab-link-realtime:hover {
    background-color: #003800 !important;
}

svg circle[stroke="rgba(229, 231, 231, 0.9058823529)"] {
    stroke: #2a2d2f4a !important;
}

svg circle[stroke="#6CA6EF"] {
    stroke: #4180c2 !important;
}

.tab-content-overview-info a {
    position: relative;
    padding-right: 1.3em;
    text-decoration: underline;
}

.tab-content-overview-info a::after {
    content: "";
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-left: 0.3em;
    vertical-align: middle;
    background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 512 512" fill="%2380cbc4" xmlns="http://www.w3.org/2000/svg"><path d="M432 320h-32a16 16 0 0 0-16 16v112H80V128h112a16 16 0 0 0 16-16V80a16 16 0 0 0-16-16H64A64.07 64.07 0 0 0 0 128v320a64.07 64.07 0 0 0 64 64h320a64.07 64.07 0 0 0 64-64V336a16 16 0 0 0-16-16zm56-320h-128a24 24 0 0 0-17 41l35 35-208 208a24 24 0 0 0 0 34l22 22a24 24 0 0 0 34 0l208-208 35 35a24 24 0 0 0 41-17V24A24 24 0 0 0 488 0z"/></svg>');
    background-size: 0.9em 0.9em;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0;
    transition: opacity 0.3s;
}

.tab-content-overview-info a:hover::after {
    opacity: 0.7;
}

and this one for gauges.js:

function recolorWidgets() {
    document.querySelectorAll('.widget-panel').forEach(function(panel) {
        const header = panel.querySelector('.widget-header');
        if (!header) return;
        const type = header.textContent.trim().toLowerCase();
        const widget = panel.querySelector('.graph-widget');
        if (!widget) return;
        const value = parseInt(widget.getAttribute('data-value'), 10);
        const svg = widget.querySelector('svg');
        const circles = svg.querySelectorAll('circle');
        if (circles.length < 2) return;
        const progressCircle = circles[1];
        const valueText = widget.querySelector('.widget-value');

        let color = '#5b8db8';

        if (type === 'hit rate') {
            if (value >= 80) {
                color = '#6bb37a';
            } else if (value >= 50) {
                color = '#c2a86e';
            } else {
                color = '#b96e6e'; 
            }
        } else if (['memory', 'keys', 'jit buffer'].includes(type)) {
            if (value >= 80) {
                color = '#b96e6e'; 
            } else if (value >= 50) {
                color = '#c2a86e';
            } else {
                color = '#6bb37a';
            }
        }

        progressCircle.setAttribute('stroke', color);
        if (valueText) {
            valueText.style.color = color;
        }
    });
}

document.addEventListener('DOMContentLoaded', function() {
    recolorWidgets();

    const target = document.body;
    const observer = new MutationObserver(function(mutationsList) {
        for (const mutation of mutationsList) {
            if (
                mutation.type === 'childList' &&
                (mutation.addedNodes.length > 0 || mutation.removedNodes.length > 0)
            ) {
                recolorWidgets();
                break;
            }
        }
    });

    observer.observe(target, { childList: true, subtree: true });
});

And then, into the index.php code I put:

<link rel="stylesheet" href="dark-theme.css">
<script src="gauges.js"></script>

It looks nice and my javascript add dynamic color changes (if the realtime updates feature is enabled) using the values for each panel with the gauges. Test it and you can add it into your code if you like my modifications.