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

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:

/* 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 */

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
   = 'transparent';
   = 'none';
            // Change the color of the dots to white
            const svg = button.querySelector('svg');
            if (svg) {
       = 'white';

    // Apply styles initially

    // 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);

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.

Screenshot 2024-06-11 at 12.04.11 PM