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.
2 Source code
Here is the source code. I am assuming Bootstrap CSS scheme of choice was invoked via Framework Layout page.
<!--- HTML ------------------------------------------>
<table class="table table-sm table-bordered" style="font-size:14px; width:800px" >
<thead>
<tr>
<th colspan="4" class="text-center ">Bootstrap Theme Colors</th>
</tr>
<tr>
<th >
Class
</th>
<th>
Foreground
</th>
<th>
Background
</th>
<th>
Sample
</th>
</tr>
</thead>
<tbody>
<!--8 basic colors ------------------------------------------------------------>
<tr>
<th style="width:300px">
bg-primary
</th >
<td></td>
<td></td>
<td class="bg-primary "></td>
</tr>
<tr>
<th style="width:300px">
bg-secondary
</th>
<td></td>
<td></td>
<td class="bg-secondary "></td>
</tr>
<tr>
<th style="width:300px">
bg-success
</th>
<td></td>
<td></td>
<td class="bg-success "></td>
</tr>
<tr>
<th style="width:300px">
bg-info
</th>
<td></td>
<td></td>
<td class="bg-info "></td>
</tr>
<tr>
<th style="width:300px">
bg-warning
</th>
<td></td>
<td></td>
<td class="bg-warning "></td>
</tr>
<tr>
<th style="width:300px">
bg-danger
</th>
<td></td>
<td></td>
<td class="bg-danger "></td>
</tr>
<tr>
<th style="width:300px">
bg-dark
</th>
<td></td>
<td></td>
<td class="bg-dark "></td>
</tr>
<tr>
<th style="width:300px">
bg-light
</th>
<td></td>
<td></td>
<td class="bg-light "></td>
</tr>
<!--8 basic colors subtle ------------------------------------------------------------>
<tr style="border-top: 4px solid black;">
<th style="width:300px">
bg-primary-subtle
</th>
<td></td>
<td></td>
<td class="bg-primary-subtle "></td>
</tr>
<tr>
<th style="width:300px">
bg-secondary-subtle
</th>
<td></td>
<td></td>
<td class="bg-secondary-subtle "></td>
</tr>
<tr>
<th style="width:300px">
bg-success-subtle
</th>
<td></td>
<td></td>
<td class="bg-success-subtle "></td>
</tr>
<tr>
<th style="width:300px">
bg-info-subtle
</th>
<td></td>
<td></td>
<td class="bg-info-subtle "></td>
</tr>
<tr>
<th style="width:300px">
bg-warning-subtle
</th>
<td></td>
<td></td>
<td class="bg-warning-subtle "></td>
</tr>
<tr>
<th style="width:300px">
bg-danger-subtle
</th>
<td></td>
<td></td>
<td class="bg-danger-subtle "></td>
</tr>
<tr>
<th style="width:300px">
bg-dark-subtle
</th>
<td></td>
<td></td>
<td class="bg-dark-subtle "></td>
</tr>
<tr>
<th style="width:300px">
bg-light-subtle
</th>
<td></td>
<td></td>
<td class="bg-light-subtle "></td>
</tr>
<!--8 basic colors with text ------------------------------------------------------------>
<tr style="border-top: 4px solid black;">
<th style="width:300px">
text-bg-primary
</th>
<td></td>
<td></td>
<td class="text-bg-primary ">This is test text, 1,2,3,4,5.</td>
</tr>
<tr>
<th style="width:300px">
text-bg-secondary
</th>
<td></td>
<td></td>
<td class="text-bg-secondary ">This is test text, 1,2,3,4,5.</td>
</tr>
<tr>
<th style="width:300px">
text-bg-success
</th>
<td></td>
<td></td>
<td class="text-bg-success ">This is test text, 1,2,3,4,5.</td>
</tr>
<tr>
<th style="width:300px">
text-bg-info
</th>
<td></td>
<td></td>
<td class="text-bg-info ">This is test text, 1,2,3,4,5.</td>
</tr>
<tr>
<th style="width:300px">
text-bg-warning
</th>
<td></td>
<td></td>
<td class="text-bg-warning ">This is test text, 1,2,3,4,5.</td>
</tr>
<tr>
<th style="width:300px">
text-bg-danger
</th>
<td></td>
<td></td>
<td class="text-bg-danger ">This is test text, 1,2,3,4,5.</td>
</tr>
<tr>
<th style="width:300px">
text-bg-dark
</th>
<td></td>
<td></td>
<td class="text-bg-dark ">This is test text, 1,2,3,4,5.</td>
</tr>
<tr>
<th style="width:300px">
text-bg-light
</th>
<td></td>
<td></td>
<td class="text-bg-light ">This is test text, 1,2,3,4,5.</td>
</tr>
<!--10 basic text colors ------------------------------------------------------------>
<tr style="border-top: 4px solid black;">
<th style="width:300px">
text-primary
</th>
<td></td>
<td></td>
<td class="text-primary ">This is test text, 1,2,3,4,5.</td>
</tr>
<tr>
<th style="width:300px">
text-secondary
</th>
<td></td>
<td></td>
<td class="text-secondary ">This is test text, 1,2,3,4,5.</td>
</tr>
<tr>
<th style="width:300px">
text-success
</th>
<td></td>
<td></td>
<td class="text-success ">This is test text, 1,2,3,4,5.</td>
</tr>
<tr>
<th style="width:300px">
text-info
</th>
<td></td>
<td></td>
<td class="text-info ">This is test text, 1,2,3,4,5.</td>
</tr>
<tr>
<th style="width:300px">
text-warning
</th>
<td></td>
<td></td>
<td class="text-warning ">This is test text, 1,2,3,4,5.</td>
</tr>
<tr>
<th style="width:300px">
text-danger
</th>
<td></td>
<td></td>
<td class="text-danger ">This is test text, 1,2,3,4,5.</td>
</tr>
<tr>
<th style="width:300px">
text-dark
</th>
<td></td>
<td></td>
<td class="text-dark ">This is test text, 1,2,3,4,5.</td>
</tr>
<tr>
<th style="width:300px">
text-light
</th>
<td></td>
<td></td>
<td class="text-light ">This is test text, 1,2,3,4,5.</td>
</tr>
<tr>
<th style="width:300px">
text-black
</th>
<td></td>
<td></td>
<td class="text-black ">This is test text, 1,2,3,4,5.</td>
</tr>
<tr>
<th style="width:300px">
text-white
</th>
<td></td>
<td></td>
<td class="text-white ">This is test text, 1,2,3,4,5.</td>
</tr>
<!--8 text colors emphasis ------------------------------------------------------------>
<tr style="border-top: 4px solid black;">
<th style="width:300px">
text-primary-emphasis
</th>
<td></td>
<td></td>
<td class="text-primary-emphasis">This is test text, 1,2,3,4,5.</td>
</tr>
<tr>
<th style="width:300px">
text-secondary-emphasis
</th>
<td></td>
<td></td>
<td class="text-secondary-emphasis ">This is test text, 1,2,3,4,5.</td>
</tr>
<tr>
<th style="width:300px">
text-success-emphasis
</th>
<td></td>
<td></td>
<td class="text-success-emphasis ">This is test text, 1,2,3,4,5.</td>
</tr>
<tr>
<th style="width:300px">
text-info-emphasis
</th>
<td></td>
<td></td>
<td class="text-info-emphasis ">This is test text, 1,2,3,4,5.</td>
</tr>
<tr>
<th style="width:300px">
text-warning-emphasis
</th>
<td></td>
<td></td>
<td class="text-warning-emphasis ">This is test text, 1,2,3,4,5.</td>
</tr>
<tr>
<th style="width:300px">
text-danger-emphasis
</th>
<td></td>
<td></td>
<td class="text-danger-emphasis ">This is test text, 1,2,3,4,5.</td>
</tr>
<tr>
<th style="width:300px">
text-dark-emphasis
</th>
<td></td>
<td></td>
<td class="text-dark-emphasis ">This is test text, 1,2,3,4,5.</td>
</tr>
<tr>
<th style="width:300px">
text-light-emphasis
</th>
<td></td>
<td></td>
<td class="text-light-emphasis ">This is test text, 1,2,3,4,5.</td>
</tr>
</tbody>
</table>
<!--- Java Script ------------------------------------------>
<script>
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
}
});
</script>
4 Sample execution
Here are some screenshots of sample execution.