Change the styling of the [...] more action buttons selection button

[nocodeking]

I’m sure others, who have dark themed apps share the frustration of having a stark white “more actions” button so I spent some time reverse engineering the layout and found a way to adjust the colors of it.

In the example code below, the button has been made transparent and the color of the 3 dots have been inverted for use on a dark bg. Update the colors as needed for your use case.

Note, this has been tested using the table block, I have not yet tried this on any other block types.

In the page level custom code header, add the following:

<style>
/* Styling the "more buttons" button */
.actions-dropdown .dropdown-btn {
    background-color: transparent !important; /* Transparent background */
    border: none !important; /* Remove border */
}

.actions-dropdown .dropdown-btn svg {
    fill: white !important; /* White dots */
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    function styleMoreButtons() {
        // Select the "more buttons" dropdown button
        const moreButtons = document.querySelectorAll('.actions-dropdown .dropdown-btn');
        moreButtons.forEach(button => {
            // Apply styles to make the background transparent and remove border
            button.style.backgroundColor = 'transparent';
            button.style.border = 'none';
            
            // Change the color of the dots to white
            const svg = button.querySelector('svg');
            if (svg) {
                svg.style.fill = 'white';
            }
        });
    }

    // Apply styles initially
    styleMoreButtons();

    // Observe for changes in the table content and reapply styles
    const observer = new MutationObserver(styleMoreButtons);
    const config = { childList: true, subtree: true };

    const tableNodes = document.querySelectorAll('.table1-edaac995-e2bc-4c25-a800-2d1dd000f83c');
    tableNodes.forEach(node => {
        observer.observe(node, config);
    });
});
</script>

This code snippet, along with the additional table styling found here: Table Colors Alternate Every Other Row - #7 by nocodeking makes for cleaner looking table.