luisgulo/focalboard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Set link color in theme

Browse source
This commit is contained in:
Chen-I Lim 2021-03-05 14:37:30 -08:00
parent 6ed49cc22b
commit 6efdc37144
3 changed files with 26 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
webapp/src/styles/main.scss
View file

@ -44,6 +44,12 @@ body {
a {
text-decoration: none;
color: var(--link-color);
&:visited {
color: var(--link-visited-color);
}
&:hover {
background-color: rgba(192, 192, 255, 0.2);
}

1
webapp/src/styles/variables.scss
View file

@ -7,6 +7,7 @@
--sidebar-fg: 55, 53, 47;
--button-bg: 22, 109, 204;
--link-color: 35, 137, 215;
--link-visited-color: #551a8b;
// Label Colors
--prop-default: #fff;

26
webapp/src/theme.ts
View file

@ -2,13 +2,16 @@
// See LICENSE.txt for license information.
export type Theme = {
mainBg: string
mainFg: string
buttonBg: string
buttonFg: string
sidebarBg: string
sidebarFg: string
sidebarWhiteLogo: string
mainBg: string,
mainFg: string,
buttonBg: string,
buttonFg: string,
sidebarBg: string,
sidebarFg: string,
sidebarWhiteLogo: string,
link: string,
linkVisited: string,
propDefault: string,
propGray: string,
@ -31,6 +34,9 @@ export const defaultTheme = {
sidebarFg: '255, 255, 255',
sidebarWhiteLogo: 'true',
link: '#0000ee',
linkVisited: '#551a8b',
propDefault: '#fff',
propGray: '#EDEDED',
propBrown: '#F7DDC3',
@ -54,6 +60,9 @@ export const darkTheme = {
sidebarFg: '255, 255, 255',
sidebarWhiteLogo: 'true',
link: '#0090ff',
linkVisited: 'hsla(270, 68%, 70%, 1.0)',
propDefault: 'hsla(0, 100%, 100%, 0.4)',
propGray: 'hsla(0, 0%, 70%, 0.4)',
propBrown: 'hsla(25, 60%, 40%, 0.4)',
@ -90,6 +99,9 @@ export function setTheme(theme: Theme): void {
document.documentElement.style.setProperty('--sidebar-fg', consolidatedTheme.sidebarFg)
document.documentElement.style.setProperty('--sidebar-white-logo', consolidatedTheme.sidebarWhiteLogo)
document.documentElement.style.setProperty('--link-color', consolidatedTheme.link)
document.documentElement.style.setProperty('--link-visited-color', consolidatedTheme.linkVisited)
document.documentElement.style.setProperty('--prop-default', consolidatedTheme.propDefault)
document.documentElement.style.setProperty('--prop-gray', consolidatedTheme.propGray)
document.documentElement.style.setProperty('--prop-brown', consolidatedTheme.propBrown)