Mirrors/tabby
2
0
Fork 0
mirror of https://github.com/Eugeny/tabby synced 2024-11-15 01:17:14 +00:00
Code Issues Projects Releases Packages Wiki Activity

added minimum contrast ratio support to the theme

Browse source
This commit is contained in:
Eugene Pankov 2023-03-21 20:55:31 +01:00
parent 1ebf29a977
commit 9a6e684f9e
No known key found for this signature in database
GPG key ID: 5896FCBBDD1CF4F4
3 changed files with 48 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

32
tabby-core/src/services/themes.service.ts
View file

@ -26,9 +26,9 @@ export class ThemesService {
this.applyThemeVariables()
config.changed$.subscribe(() => {
this.applyCurrentTheme()
this.applyThemeVariables()
})
})
config.changed$.subscribe(() => this.applyThemeVariables())
}
private applyThemeVariables () {
@ -62,6 +62,7 @@ export class ThemesService {
// const backgroundMore =more(theme.background, 0.25).string()
const accentIndex = 4
const vars: Record<string, string> = {}
const contrastPairs: string[][] = []
if (this.findCurrentTheme().followsColorScheme) {
vars['--bs-body-bg'] = background.string()
@ -82,6 +83,8 @@ export class ThemesService {
// vars['--bs-purple'] = theme.colors[13]
// vars['--bs-cyan'] = theme.colors[14]
contrastPairs.push(['--bs-body-bg', '--bs-body-color'])
vars['--theme-fg-more-2'] = more(theme.foreground, 0.5).string()
vars['--theme-fg-more'] = more(theme.foreground, 0.25).string()
vars['--theme-fg'] = theme.foreground
@ -94,6 +97,12 @@ export class ThemesService {
vars['--theme-bg-more'] = backgroundMore
vars['--theme-bg-more-2'] = more(backgroundMore, 0.25).string()
contrastPairs.push(['--theme-bg', '--theme-fg'])
contrastPairs.push(['--theme-bg-less', '--theme-fg-less'])
contrastPairs.push(['--theme-bg-less-2', '--theme-fg-less-2'])
contrastPairs.push(['--theme-bg-more', '--theme-fg-more'])
contrastPairs.push(['--theme-bg-more-2', '--theme-fg-more-2'])
const themeColors = {
primary: theme.colors[accentIndex],
secondary: theme.colors[8],
@ -117,6 +126,9 @@ export class ThemesService {
vars[`--theme-${key}`] = color
vars[`--theme-${key}-less`] = less(color, 0.25).string()
vars[`--theme-${key}-less-2`] = less(color, 0.75).string()
vars[`--theme-${key}-fg`] = more(color, 1).string()
contrastPairs.push([`--theme-${key}`, `--theme-${key}-fg`])
}
const switchBackground = less(theme.colors[accentIndex], 0.25).string()
@ -125,6 +137,24 @@ export class ThemesService {
vars['--spaciness'] = this.config.store.appearance.spaciness
for (const [bg, fg] of contrastPairs) {
const colorBg = Color(vars[bg]).hsl()
const colorFg = Color(vars[fg]).hsl()
const bgContrast = colorBg.contrast(colorFg)
const isLightBG = colorBg.luminosity() > colorFg.luminosity()
if (bgContrast < this.config.store.terminal.minimumContrastRatio) {
const targetLuminosityDarkFG = (colorBg.luminosity() + 0.05) / this.config.store.terminal.minimumContrastRatio - 0.05
const targetLuminosityLightFG = (colorBg.luminosity() + 0.05) * this.config.store.terminal.minimumContrastRatio - 0.05
let candidateLuminosities = isLightBG ? [targetLuminosityDarkFG, targetLuminosityLightFG] : [targetLuminosityLightFG, targetLuminosityDarkFG]
candidateLuminosities = candidateLuminosities.map(x => Math.max(0, Math.min(1, x)))
const targetLuminosity = candidateLuminosities.reduce((a, b) => Math.abs(b - colorBg.luminosity()) < Math.abs(a - colorBg.luminosity()) ? a : b, colorFg.color[2] / 100)
colorFg.color[2] = targetLuminosity * 100
vars[fg] = colorFg
}
}
for (const [key, value] of Object.entries(vars)) {
document.documentElement.style.setProperty(key, value)
}

10
tabby-core/src/theme.new.scss
View file

@ -195,14 +195,14 @@ tab-body {
--bs-btn-focus-shadow-rgb: 130, 138, 145;
--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
--bs-btn-color: var(--theme-#{$color}-more-2);
--bs-btn-hover-color: var(--theme-#{$color}-more-2);
--bs-btn-active-color: var(--theme-#{$color}-more-2);
--bs-btn-disabled-color: var(--theme-#{$color}-more-2);
--bs-btn-color: var(--theme-#{$color}-fg);
--bs-btn-hover-color: var(--theme-#{$color}-fg);
--bs-btn-active-color: var(--theme-#{$color}-fg);
--bs-btn-disabled-color: var(--theme-#{$color}-fg);
}
.alert-#{$color} {
--bs-alert-bg: var(--theme-#{$color}-more-2);
--bs-alert-bg: var(--theme-#{$color}-fg);
--bs-alert-border-color: var(--theme-#{$color}-more);
--bs-alert-color: var(--theme-#{$color});
}

12
tabby-settings/src/components/settingsTab.component.pug
View file

@ -114,6 +114,18 @@
.title(translate) Enable animations
toggle([(ngModel)]='config.store.accessibility.animations', (ngModelChange)='saveConfiguration()')
.form-line
.header
.title(translate) Minimum contrast ratio
input.form-control(
type='number',
min='1',
max='21',
step='0.5',
[(ngModel)]='config.store.terminal.minimumContrastRatio',
(ngModelChange)='config.save()'
)
ng-container(*ngFor='let provider of settingsProviders')
li(*ngIf='provider.prioritized', [ngbNavItem]='provider.id')
a.d-flex.align-items-center(ngbNavLink)