This Bootstrap Hack Lets You Preview Your Theme in Seconds

HTML page that shows currently selected Bootstrap theme colors. 1 Purpose In my project we are using Bootstrap 5.3 CSS framework, with different color themes for different customers (according to their brand color scheme) .To enable easier overview of theme colors, for Customers and Project Owner (PO), I created a page in web app that can be accessed only by explicitly typing link /Info/Colors. It gives overview of colors expected in the app and verifying that color scheme of choice has been property coordinated. It shows currently selected Bootstrap theme colors. Bootstrap 5.3 Bootstrap 5.3 different color themes for different customers different color themes for different customers currently selected Bootstrap theme colors currently selected Bootstrap theme colors 2 Source code Here is the source code. I am assuming Bootstrap CSS scheme of choice was invoked via Framework Layout page. Bootstrap Theme Colors Class Foreground Background Sample bg-primary bg-secondary bg-success bg-info bg-warning bg-danger bg-dark bg-light bg-primary-subtle bg-secondary-subtle bg-success-subtle bg-info-subtle bg-warning-subtle bg-danger-subtle bg-dark-subtle bg-light-subtle text-bg-primary This is test text, 1,2,3,4,5. text-bg-secondary This is test text, 1,2,3,4,5. text-bg-success This is test text, 1,2,3,4,5. text-bg-info This is test text, 1,2,3,4,5. text-bg-warning This is test text, 1,2,3,4,5. text-bg-danger This is test text, 1,2,3,4,5. text-bg-dark This is test text, 1,2,3,4,5. text-bg-light This is test text, 1,2,3,4,5. text-primary This is test text, 1,2,3,4,5. text-secondary This is test text, 1,2,3,4,5. text-success This is test text, 1,2,3,4,5. text-info This is test text, 1,2,3,4,5. text-warning This is test text, 1,2,3,4,5. text-danger This is test text, 1,2,3,4,5. text-dark This is test text, 1,2,3,4,5. text-light This is test text, 1,2,3,4,5. text-black This is test text, 1,2,3,4,5. text-white This is test text, 1,2,3,4,5. text-primary-emphasis This is test text, 1,2,3,4,5. text-secondary-emphasis This is test text, 1,2,3,4,5. text-success-emphasis This is test text, 1,2,3,4,5. text-info-emphasis This is test text, 1,2,3,4,5. text-warning-emphasis This is test text, 1,2,3,4,5. text-danger-emphasis This is test text, 1,2,3,4,5. text-dark-emphasis This is test text, 1,2,3,4,5. text-light-emphasis This is test text, 1,2,3,4,5. document.addEventListener("DOMContentLoaded", function() { const rows = document.querySelectorAll("table tbody tr"); rows.forEach(row => { const sampleCell = row.querySelector("td:nth-child(4)"); const foregroundCell = row.querySelector("td:nth-child(2)"); const backgroundCell = row.querySelector("td:nth-child(3)"); if (sampleCell) { const computedStyle = window.getComputedStyle(sampleCell); // Get foreground color (text color) const foregroundColor = computedStyle.color; foregroundCell.textContent = rgbToHex(foregroundColor); // Get background color const backgroundColor = computedStyle.backgroundColor; backgroundCell.textContent = rgbToHex(backgroundColor); } }); function rgbToHex(rgb) { const result = rgb.match(/\d+/g); if (result) { const r = parseInt(result[0]).toString(16).padStart(2, '0'); const g = parseInt(result[1]).toString(16).padStart(2, '0'); const b = parseInt(result[2]).toString(16).padStart(2, '0'); return `#${r}${g}${b}`; } return rgb; // Return original value if conversion fails } }); Bootstrap Theme Colors Class Foreground Background Sample bg-primary bg-secondary bg-success bg-info bg-warning bg-danger bg-dark bg-light bg-primary-subtle bg-secondary-subtle bg-success-subtle bg-info-subtle bg-warning-subtle bg-danger-subtle bg-dark-subtle bg-light-subtle text-bg-primary This is test text, 1,2,3,4,5. text-bg-secondary This is test text, 1,2,3,4,5. text-bg-success This is test text, 1,2,3,4,5. text-bg-info This is test text, 1,2,3,4,5. text-bg-warning This is test text, 1,2,3,4,5. text-bg-danger This is test text, 1,2,3,4,5. text-bg-dark This is test text, 1,2,3,4,5. text-bg-light This is test text, 1,2,3,4,5. text-primary This is test text, 1,2,3,4,5. text-secondary This is test text, 1,2,3,4,5. text-success This is test text, 1,2,3,4,5. text-info This is test text, 1,2,3,4,5. text-warning This is test text, 1,2,3,4,5. text-danger This is test text, 1,2,3,4,5. text-dark This is test text, 1,2,3,4,5. text-light This is test text, 1,2,3,4,5. text-black This is test text, 1,2,3,4,5. text-white This is test text, 1,2,3,4,5. text-primary-emphasis This is test text, 1,2,3,4,5. text-secondary-emphasis This is test text, 1,2,3,4,5. text-success-emphasis This is test text, 1,2,3,4,5. text-info-emphasis This is test text, 1,2,3,4,5. text-warning-emphasis This is test text, 1,2,3,4,5. text-danger-emphasis This is test text, 1,2,3,4,5. text-dark-emphasis This is test text, 1,2,3,4,5. text-light-emphasis This is test text, 1,2,3,4,5. document.addEventListener("DOMContentLoaded", function() { const rows = document.querySelectorAll("table tbody tr"); rows.forEach(row => { const sampleCell = row.querySelector("td:nth-child(4)"); const foregroundCell = row.querySelector("td:nth-child(2)"); const backgroundCell = row.querySelector("td:nth-child(3)"); if (sampleCell) { const computedStyle = window.getComputedStyle(sampleCell); // Get foreground color (text color) const foregroundColor = computedStyle.color; foregroundCell.textContent = rgbToHex(foregroundColor); // Get background color const backgroundColor = computedStyle.backgroundColor; backgroundCell.textContent = rgbToHex(backgroundColor); } }); function rgbToHex(rgb) { const result = rgb.match(/\d+/g); if (result) { const r = parseInt(result[0]).toString(16).padStart(2, '0'); const g = parseInt(result[1]).toString(16).padStart(2, '0'); const b = parseInt(result[2]).toString(16).padStart(2, '0'); return `#${r}${g}${b}`; } return rgb; // Return original value if conversion fails } }); 4 Sample execution Here are some screenshots of sample execution.