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 { a {
text-decoration: none; text-decoration: none;
color: var(--link-color);
&:visited {
color: var(--link-visited-color);
}
&:hover { &:hover {
background-color: rgba(192, 192, 255, 0.2); 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; --sidebar-fg: 55, 53, 47;
--button-bg: 22, 109, 204; --button-bg: 22, 109, 204;
--link-color: 35, 137, 215; --link-color: 35, 137, 215;
--link-visited-color: #551a8b;
// Label Colors // Label Colors
--prop-default: #fff; --prop-default: #fff;

26
webapp/src/theme.ts
View file

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