OutSystems ServiceStudio Colors

OutSystemsServiceStudioColors.html

<a href="https://gistpreview.github.io//thekingofspain/97babc94ad6ca67cfa0f71e2a6b03d6f/outsystems-servicestudio-colors-html">Preview</a>
<a href="https://gistpreview.github.io//thekingofspain/97babc94ad6ca67cfa0f71e2a6b03d6f/outsystems-servicestudio-colors-html">Preview</a>
<h2>Light Theme</h2>
<h3>Interface Treeview</h3>
<table>
<tr>
    <th scope="area">Area</th>
    <th colspan="3" style="background:white;color:black;">Light</th>
    <th colspan="3" style="background:black;color:white;">Dark</th>
</tr>
<tr>
    <th></th>
    <th scope="le" style="background:white;color:black;">Example</th>
    <th scope="lb" style="background:white;color:black;">Background</th>
    <th scope="lc" style="background:white;color:black;">Color</th>
    <th scope="de" style="background:black;color:white;">Example</th>
    <th scope="db" style="background:black;color:white;">Background</th>
    <th scope="dc" style="background:black;color:white;">Color</th>
</tr>
<tr>
    <td>Default</td>
    <td headers="le" style="background:#F7F8FA;color:#202327;">Example</td>
    <td headers="lb" style="background:#F7F8FA;color:#202327;" >#F7F8FA</td>
    <td headers="lc" style="background:#202327;color:#F7F8FA;" >#202327</td>
    <td headers="de" style="background:#202327;color:#F1F2F4;">Example</td>
    <td headers="db" style="background:#202327;color:#F1F2F4;">#202327</td>
    <td headers="dc" style="background:#F1F2F4;color:#202327;">#F1F2F4</td>
</tr>
<tr>
    <td>Selected</td>
    <td headers="le" style="background:#E0E2E4;color:#202327;">Example</td>
    <td headers="lb" style="background:#E0E2E4;color:#202327;" >#E0E2E4</td>
    <td headers="lc" style="background:#202327;color:#E0E2E4" >#202327</td>
    <td headers="de" style="background:#3B3D41;color:#F1F2F4;">Example</td>
    <td headers="db" style="background:#3B3D41;color:#F1F2F4;">#3B3D41</td>
    <td headers="dc" style="background:#F1F2F4;color:#3B3D41;">#F1F2F4</td>
</tr><tr>
    <td>Hover</td>
    <td headers="le" style="background:#DCECFC;color:#626568;">Example</td>
    <td headers="lb" style="background:#DCECFC;color:#202327;">#DCECFC</td>
    <td headers="lc" style="background:#626568;color:#DCECFC;">#626568</td>
    <td headers="de" style="background:#13365F;color:#F1F2F4;">Example</td>
    <td headers="db" style="background:#13365F;color:#F1F2F4;">#13365F</td>
    <td headers="dc" style="background:#F1F2F4;color:#13365F;">#F1F2F4</td>
</tr>
</table>


<h3>Manage Dependencies</h3>
<table>
    <tr>
        <th scope="area">Area</th>
        <th colspan="3" style="background:white;color:black;">Light</th>
        <th colspan="3" style="background:black;color:white;">Dark</th>
    </tr>
    <tr>
        <th></th>
        <th scope="le" style="background:white;color:black;">Example</th>
        <th scope="lb" style="background:white;color:black;">Background</th>
        <th scope="lc" style="background:white;color:black;">Color</th>
        <th scope="de" style="background:black;color:white;">Example</th>
        <th scope="db" style="background:black;color:white;">Background</th>
        <th scope="dc" style="background:black;color:white;">Color</th>
    </tr>
<tr>
    <td>Default</td>
    <td headers="le" style="background:#FFFFFF;color:#202327;">Example</td>
    <td headers="lb" style="background:#FFFFFF;color:#202327;" >#FFFFFF</td>
    <td headers="lc" style="background:#202327;color:#FFFFFF;" >#202327</td>
    <td headers="de" style="background:#171B1F;color:#F1F2F4;">Example</td>
    <td headers="db" style="background:#171B1F;color:#F1F2F4;">#171B1F</td>
    <td headers="dc" style="background:#F1F2F4;color:#202327;">#F1F2F4</td>
</tr>
<tr>
    <td>Selected</td>
    <td headers="le" style="background:#1A7DEE;color:#FFFFFF;">Example</td>
    <td headers="lb" style="background:#1A7DEE;color:#FFFFFF;">#1A7DEE</td>
    <td headers="lc" style="background:#FFFFFF;color:#1A7DEE;">#FFFFFF</td>
    <td headers="de" style="background:#076DE4;color:#FFFFFF;">Example</td>
    <td headers="db" style="background:#076DE4;color:#FFFFFF;">#076DE4</td>
    <td headers="dc" style="background:#FFFFFF;color:#076DE4;">#FFFFFF</td>
</tr><tr>
    <td>Hover</td>
    <td headers="le" style="background:#DCECFC;color:#202327;">Example</td>
    <td headers="lb" style="background:#DCECFC;color:#202327;">#DCECFC</td>
    <td headers="lc" style="background:#202327;color:#DCECFC;">#202327</td>
    <td headers="de" style="background:#13365F;color:#F1F2F4;">Example</td>
    <td headers="db" style="background:#13365F;color:#F1F2F4;">#13365F</td>
    <td headers="dc" style="background:#F1F2F4;color:#13365F;">#F1F2F4</td>
</tr>
</tr>
</table>