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.