Skip to content

Commit 4eb5090

Browse files
arietimmermanarietimmerman
committed
dark mode supper
1 parent 60ffe0b commit 4eb5090

File tree

1 file changed

+234
-0
lines changed

1 file changed

+234
-0
lines changed

‎site/.vitepress/theme/components/Report.vue‎

Lines changed: 234 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1532,4 +1532,238 @@ select {
15321532
background-color: rgba(26, 115, 232, 0.08);
15331533
}
15341534
}
1535+
1536+
/* Dark mode support */
1537+
:global(.dark) {
1538+
.report-container {
1539+
color: #e8eaed;
1540+
}
1541+
1542+
.form-group {
1543+
background-color: #202124;
1544+
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 3px 1px rgba(0, 0, 0, 0.15);
1545+
}
1546+
1547+
label {
1548+
color: #e8eaed;
1549+
}
1550+
1551+
input[type="password"],
1552+
input[type="url"],
1553+
input[type="text"],
1554+
textarea,
1555+
select {
1556+
background-color: #303134;
1557+
border-color: #5f6368;
1558+
color: #e8eaed;
1559+
1560+
&:focus {
1561+
border-color: #8ab4f8;
1562+
box-shadow: 0 1px 2px rgba(138, 180, 248, 0.1);
1563+
}
1564+
1565+
&::placeholder {
1566+
color: #9aa0a6;
1567+
}
1568+
1569+
&:-webkit-autofill,
1570+
&:-webkit-autofill:hover,
1571+
&:-webkit-autofill:focus,
1572+
&:-webkit-autofill:active {
1573+
-webkit-box-shadow: 0 0 0 30px #303134 inset !important;
1574+
-webkit-text-fill-color: #e8eaed !important;
1575+
transition: background-color 5000s ease-in-out 0s;
1576+
}
1577+
}
1578+
1579+
.input-hint, .editor-hint {
1580+
color: #9aa0a6;
1581+
}
1582+
1583+
.tabs {
1584+
background-color: #202124;
1585+
border-bottom-color: #5f6368;
1586+
}
1587+
1588+
.tab {
1589+
color: #9aa0a6;
1590+
1591+
&:hover {
1592+
background-color: rgba(138, 180, 248, 0.04);
1593+
color: #8ab4f8;
1594+
}
1595+
1596+
&.active {
1597+
border-bottom-color: #8ab4f8;
1598+
color: #8ab4f8;
1599+
}
1600+
}
1601+
1602+
.tab-content {
1603+
background-color: #303134;
1604+
color: #e8eaed;
1605+
}
1606+
1607+
.option label {
1608+
color: #e8eaed;
1609+
}
1610+
1611+
.option input[type="checkbox"] {
1612+
border-color: #9aa0a6;
1613+
background-color: #303134;
1614+
1615+
&:checked {
1616+
background-color: #8ab4f8;
1617+
border-color: #8ab4f8;
1618+
1619+
&::after {
1620+
border-color: #202124;
1621+
}
1622+
}
1623+
}
1624+
1625+
button {
1626+
background-color: #8ab4f8;
1627+
color: #202124;
1628+
1629+
&:hover {
1630+
background-color: #93bbf9;
1631+
}
1632+
1633+
&:active {
1634+
background-color: #76a7fa;
1635+
}
1636+
}
1637+
1638+
.advanced-toggle {
1639+
color: #8ab4f8;
1640+
border-color: #8ab4f8;
1641+
1642+
&:hover {
1643+
background-color: rgba(138, 180, 248, 0.04);
1644+
}
1645+
1646+
&:active {
1647+
background-color: rgba(138, 180, 248, 0.08);
1648+
}
1649+
}
1650+
1651+
.test-output {
1652+
border-color: #5f6368;
1653+
1654+
h2 {
1655+
color: #e8eaed;
1656+
border-bottom-color: #5f6368;
1657+
}
1658+
}
1659+
1660+
.file-item {
1661+
border-bottom-color: #5f6368;
1662+
}
1663+
1664+
.result-item {
1665+
border-color: #3c4043;
1666+
1667+
p {
1668+
background-color: #303134;
1669+
border-top-color: #3c4043;
1670+
color: #e8eaed;
1671+
}
1672+
}
1673+
1674+
summary {
1675+
background-color: #303134;
1676+
color: #e8eaed;
1677+
1678+
span {
1679+
color: #9aa0a6;
1680+
background-color: #3c4043;
1681+
}
1682+
1683+
&:hover {
1684+
background-color: #3c4043;
1685+
}
1686+
1687+
&.no-details:hover {
1688+
background-color: #303134;
1689+
}
1690+
1691+
&.test\:pass {
1692+
background-color: rgba(34, 197, 94, 0.1);
1693+
&:hover { background-color: rgba(34, 197, 94, 0.15); }
1694+
}
1695+
1696+
&.test\:fail {
1697+
background-color: rgba(239, 68, 68, 0.1);
1698+
&:hover { background-color: rgba(239, 68, 68, 0.15); }
1699+
}
1700+
1701+
&.test\:skip {
1702+
background-color: rgba(245, 158, 11, 0.1);
1703+
&:hover { background-color: rgba(245, 158, 11, 0.15); }
1704+
}
1705+
}
1706+
1707+
pre {
1708+
background-color: #202124;
1709+
border-color: #3c4043;
1710+
color: #e8eaed;
1711+
}
1712+
1713+
.request-line {
1714+
color: #e8eaed;
1715+
strong { color: #8ab4f8; }
1716+
}
1717+
1718+
.response-headers, .request-headers {
1719+
color: #9aa0a6;
1720+
strong { color: #bdc1c6; }
1721+
}
1722+
1723+
.diagnostic-tabs {
1724+
border-color: #5f6368;
1725+
1726+
.tabs {
1727+
background-color: #202124;
1728+
border-bottom-color: #5f6368;
1729+
}
1730+
}
1731+
1732+
.yaml-editor {
1733+
border-color: #5f6368;
1734+
}
1735+
1736+
.running-tests-message {
1737+
background-color: #303134;
1738+
color: #e8eaed;
1739+
border-color: #5f6368;
1740+
}
1741+
1742+
.download-button {
1743+
color: #8ab4f8;
1744+
border-color: #8ab4f8;
1745+
1746+
&:hover {
1747+
background-color: rgba(138, 180, 248, 0.04);
1748+
}
1749+
}
1750+
1751+
.option a {
1752+
color: #8ab4f8;
1753+
}
1754+
1755+
.turnstile-error, .yaml-error {
1756+
color: #f28b82;
1757+
}
1758+
1759+
.yaml-error {
1760+
background-color: rgba(242, 139, 130, 0.1);
1761+
border-left-color: #f28b82;
1762+
}
1763+
1764+
.spinner {
1765+
border-color: #5f6368;
1766+
border-top-color: #8ab4f8;
1767+
}
1768+
}
15351769
</style>

0 commit comments

Comments
 (0)