WEB-28 Increase contrast of grey text (#12178)

* Use transparent colors to increase contrast on darker backgrounds

* Increase color contrast of grey text
This commit is contained in:
Marcus Blättermann 2023-01-25 11:46:43 +01:00 committed by GitHub
parent 3062fae2ca
commit 0298b1a863
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 9 additions and 8 deletions

View File

@ -12,17 +12,17 @@ const spacyTheme = createTheme({
theme: 'dark',
settings: {
background: 'var(--color-front)',
foreground: 'var(--color-subtle)',
foreground: 'var(--color-subtle-on-dark)',
caret: 'var(--color-theme-dark)',
selection: 'var(--color-theme-dark)',
selectionMatch: 'var(--color-theme-dark)',
gutterBackground: 'var(--color-front)',
gutterForeground: 'var(--color-subtle)',
gutterForeground: 'var(--color-subtle-on-dark)',
fontFamily: 'var(--font-code)',
},
styles: [
{ tag: t.comment, color: 'var(--syntax-comment)' },
{ tag: t.variableName, color: 'var(--color-subtle)' },
{ tag: t.variableName, color: 'var(--color-subtle-on-dark)' },
{ tag: [t.string, t.special(t.brace)], color: '#fff' },
{ tag: t.number, color: 'var(--syntax-number)' },
{ tag: t.string, color: 'var(--syntax-selector)' },

View File

@ -65,9 +65,10 @@
--color-dark: hsl(214, 15%, 32%)
--color-dark-secondary: hsl(214, 14%, 22%)
--color-subtle-opaque: hsla(0, 0%, 96%, 0.56)
--color-subtle: hsl(0, 0%, 87%)
--color-subtle-light: hsl(0, 0%, 96%)
--color-subtle-dark: hsl(162, 5%, 60%)
--color-subtle: hsla(0, 0%, 0%, 0.13)
--color-subtle-light: hsla(0, 0%, 0%, 0.04)
--color-subtle-dark: hsla(162, 5%, 0%, 0.55)
--color-subtle-on-dark: hsla(0, 0%, 100%, 0.87)
--color-green-medium: hsl(108, 66%, 63%)
--color-green-transparent: hsla(108, 66%, 63%, 0.12)
@ -387,7 +388,7 @@ body [id]:target
[class*="language-bash"] .token
&.function
color: var(--color-subtle)
color: var(--color-subtle-on-dark)
&.operator, &.variable
color: var(--syntax-comment)
@ -397,7 +398,7 @@ body [id]:target
color: var(--syntax-comment)
.token
color: var(--color-subtle)
color: var(--color-subtle-on-dark)
.gatsby-highlight-code-line
background-color: var(--color-dark-secondary)