mirrors/opencode
1
0
Fork 0
mirror of https://github.com/sst/opencode.git synced 2025-12-23 10:11:41 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

Dark mode fixes

Browse source
This commit is contained in:
David Hill 2025-10-01 17:42:52 +01:00 • committed by Adam
parent 48577b3ea7
commit 634ecfe8a4
No known key found for this signature in database
GPG key ID: 9CB48779AF150E75
1 changed files with 61 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

74
packages/web/src/styles/custom.css
View file

@ -3,6 +3,7 @@
--sl-color-gray-5: hsl(0, 1%, 85%);
--sl-nav-gap: 40px;
--sl-color-text: hsl(0, 1%, 39%);
--sl-border-color: hsl(0, 1%, 85%);
--color-background: hsl(0, 20%, 99%);
--color-background-weak: hsl(0, 8%, 97%);
@ -14,7 +15,7 @@
--color-text: hsl(0, 1%, 39%);
--color-text-weak: hsl(0, 1%, 60%);
--color-text-weaker: hsl(30, 2%, 81%);
--color-text-weaker: hsl(0, 3%, 88%);
--color-text-strong: hsl(0, 5%, 12%);
--color-text-inverted: hsl(0, 20%, 99%);
@ -22,12 +23,39 @@
--color-border-weak: hsl(0, 1%, 85%);
--color-icon: hsl(0, 1%, 55%);
}
body {
color: var(--color-text) !important;
font-size: 14px !important;
@media (prefers-color-scheme: dark) {
--sl-color-bg: hsl(0, 9%, 7%);
--sl-color-gray-5: hsl(0, 4%, 23%);
--sl-color-text: hsl(0, 4%, 71%);
--sl-border-color: hsl(0, 4%, 23%);
--color-background: hsl(0, 9%, 7%);
--color-background-weak: hsl(0, 6%, 10%);
--color-background-strong: hsl(0, 15%, 94%);
--color-background-strong-hover: hsl(0, 15%, 97%);
--color-background-interactive: hsl(62, 100%, 90%);
--color-background-interactive-weaker: hsl(60, 20%, 8%);
--color-text: hsl(0, 4%, 71%);
--color-text-weak: hsl(0, 2%, 49%);
--color-text-weaker: hsl(0, 3%, 28%);
--color-text-strong: hsl(0, 15%, 94%);
--color-text-inverted: hsl(0, 9%, 7%);
--color-border: hsl(0, 3%, 28%);
--color-border-weak: hsl(0, 4%, 23%);
--color-icon: hsl(10, 3%, 43%);
}
}
body > .page > .main-frame .main-pane > main > .content-panel + .content-panel {
@ -42,12 +70,21 @@ a {
color: var(--color-text-strong) !important;
}
.page-description {
color: var(--color-text) !important;
}
.right-sidebar {
border-inline-start: none !important;
}
.sidebar-pane {
border-inline-end: 1px solid var(--color-border-weak) !important;
}
.right-sidebar-panel {
padding: 24px 0 !important;
color: var(--color-text-weaker);
}
.sidebar-content {
@ -56,7 +93,7 @@ a {
a[aria-current="page"] {
border-left: 2px solid var(--color-background-strong);
background: hsl(0, 8%, 97%) !important;
background: var(--color-background-weak) !important;
font-weight: 600 !important;
}
@ -86,7 +123,7 @@ ul.top-level a[aria-current="page"] > span {
}
.top-level li a:hover {
background: hsl(0, 8%, 97%) !important;
background: var(--color-background-weak) !important;
}
.right-group {
@ -108,11 +145,15 @@ site-search > button {
body > .page > header button[data-open-modal] {
gap: 24px !important;
background: var(--color-background-weak) !important;
border: 1px solid var(--color-border-weak);
background: var(--color-background-weak);
border: 1px solid var(--color-border-weak) !important;
padding: 6px 16px !important;
border-radius: 4px;
@media (prefers-color-scheme: dark) {
background: var(--color-background-weak);
}
}
site-search > button span {
@ -165,11 +206,11 @@ ul, ol {
}
.sl-markdown-content .tab > [role="tab"][aria-selected="true"] {
border-color: hsl(0, 5%, 12%);
border-color: var(--color-border-weak);
}
body > .page > header, :root[data-has-sidebar] body > .page > header {
background: hsl(0, 20%, 99%) !important;
background: var(--color-background) !important;
padding: 24px !important;
}
@ -195,14 +236,21 @@ body > .page > header, :root[data-has-sidebar] body > .page > header {
.sl-container ul li a {
padding: 4px 24px !important;
width: 100% !important;
color: var(--color-text-weaker);
opacity: 50%;
}
.sl-container ul li a:hover {
background: var(--color-background-weak);
@media (prefers-color-scheme: dark) {
background: var(--color-background-weak)
}
}
.sl-container ul li a[aria-current="true"] {
color: var(--color-text-strong) !important;
opacity: 100%;
}
.sl-container ul li ul li {
@ -211,19 +259,19 @@ body > .page > header, :root[data-has-sidebar] body > .page > header {
h2#starlight__on-this-page {
font-size: 14px !important;
color: hsl(0, 1%, 39%) !important;
color: var(--color-text-strong) !important;
margin: 0 !important;
font-weight: 400 !important;
padding: 0 24px 12px 24px;
}
#starlight__on-this-page ul {
color: hsl(0, 1%, 39%) !important;
color: var(--color-text-strong) !important;
font-size: 16px !important;
}
.middle-group .links {
color: hsl(0, 5%, 12%);
color: var(--color-icon);
text-decoration: none;
text-transform: none;
font-size: 16px;
@ -238,7 +286,7 @@ h2#starlight__on-this-page {
nav.sidebar ul.top-level > li > details > summary .group-label > span {
margin-top: 24px !important;
color: hsl(0, 5%, 12%) !important;
color: var(--color-text-strong) !important;
text-transform: none !important;
font-weight: 500 !important;
}
@ -254,7 +302,7 @@ nav.sidebar ul.top-level > li > details > summary .group-label > span {
}
.expressive-code figure {
background: hsl(0, 8%, 97%) !important;
background: var(--color-background-weak) !important;
}
.expressive-code .frame {