Этот взлом начальной загрузки позволяет просмотреть вашу тему за секунды

HTML -страница, которая показывает выбранные в настоящее время цвета темы начальной загрузки.

1 цель

В моем проекте мы используемНачальная загрузка 5.3CSS Framework, сРазные цветные темы для разных клиентов(Согласно цветовой схеме их бренда). Чтобы получить более легкий обзор цветов тем, для клиентов и владельца проекта (PO) я создал страницу в веб -приложении, к которой можно получить доступ только путем явного печати ссылки /информации /цвета. Он дает обзор цветов, ожидаемых в приложении, и проверка того, что цветовая схема выбора была скоординирована. Это показываетВ настоящее время выбранные цвета темы начальной загрузкиПолем

2 исходный код

Вот исходный код. Я предполагаю, что схема выбора Bootstrap CSS была вызвана на странице макета Framework.

<!---  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 Образец выполнения

Вот несколько скриншотов выполнения образца.