Product: Powershell Universal
Version: 4.4.1
Hello, can anyone help me out on this:
I have an app with a customised theme, but the part where you can restart and log out is too monochromatic:
When I inspect it, I can change the color here:
Thanks
Can you share your theme?
Function Get-Theme {
$Red1 = ‘#BE1622’ # red
$Blue1 = '#2F5B82' # dark blue
$Blue3 = '#7D96BD'
$Blue5 = '#BCDDF6' # light blue
$Black1 = '#1B1815' # dark coffee
$Theme = @{
light = @{
palette = @{
primary = @{
main = $Red1
# light: will be calculated from palette.primary.main
dark = $Blue1
contrastText = '#FFF' #white
}
secondary = @{
main = $Blue3
light = $Blue5
dark = $Blue1
# contrastText: will be calculated to contrast whiteh palette.primary.main
}
background = @{
paper = '#FFF' #white
default = '#FFF' #white
}
} # end palette
typography = @{
default = @{
fontSize = 14
fontStyle = 'italic'
fontColor = $Black1
}
h5 = @{
fontWeight = 500
fontSize = 26
letterSpacing = 0.5
}
} # end typography
shape = @{
borderRadius = 8
}
mixins = @{
toolbar = @{
minHeight = 48
}
}
overrides = @{
MuiDrawer = @{
paper = @{
backgroundColor = '#081627'
}
}
MuiButton = @{
label = @{
textTransform = 'none'
}
contained = @{
boxShadow = 'none'
'&:active' = @{
boxShadow = 'none'
}
}
}
MuiTabs = @{
root = @{
marginLeft = 1
}
indicator = @{
height = 3
borderTopLeftRadius = 3
borderTopRightRadius = 3
backgroundColor = '#000'
}
}
MuiTab = @{
root = @{
textTransform = 'none'
margin = '0 16px'
minWidth = 0
padding = 0
}
}
MuiIconButton = @{
root = @{
padding = 1
}
}
MuiTooltip = @{
tooltip = @{
borderRadius = 4
}
}
MuiDivider = @{
root = @{
backgroundColor = 'rgb(255,255,255,0.15)'
}
}
MuiListItemButton = @{
root = @{
'&.Mui-selected' = @{
color = '#4fc3f7'
}
}
}
MuiListItemText = @{
primary = @{
#color = 'rgba(255, 0, 255, 0.7) ' # Test
color = 'rgba(255, 255, 255, 0.7) '
fontSize = 14
fontWeight = 500
# Test
# '&.css-14tqbo1' = @{
# color = 'red'
# opacity = 1
# }
}
}
#Tests
# ".css-g91s37 .MuiListItemText-primary" = @{
# color = "rgba(255, 0, 0, 0.7)"
# backgroundColor = "rgba(0, 250, 0, 0.9)"
# }
# "span.MuiTypography-root.MuiTypography-body2.MuiListItemText-primary.css-14tqbo1" = @{
# color = "rgba(255, 0, 0, 0.7)"
# backgroundColor = "rgba(0, 250, 0, 0.9)"
# }
# MuiTypography = @{
# body2 = @{
# color = 'red'
# }
# }
# MuiMenuItem = @{
# root = @{
# color = 'rgba(255, 0, 255, 0.7) '
# }
# }
# 'css-14tqbo1' = @{
# root = @{
# color = 'rgba(255, 0, 255, 0.7) '
# }
# }
MuiListItemIcon = @{
root = @{
color = 'rgba(255, 255, 255, 0.7) '
minWidth = 'auto'
marginRight = 2
'& svg' = @{
fontSize = 20
}
}
}
MuiAvatar = @{
root = @{
width = 32
height = 32
}
}
#light -> the MuiSwitch is not checked
MuiSwitch = @{
track = @{
'opacity' = '1' # making the little moon/sun visible
'background-color' = $Blue3
}
swhitechBase = @{
'&:hover' = @{
'backgroundColor' = 'rgba(255, 255, 255, 0.25)' # halo bij hoveren
}
}
}
# https://forums.ironmansoftware.com/t/scrollable-table/7830
# You can turn off word wrapping for the table cell headers like this.
# The result is that the column headers don’t wrap and get messed up and a horizontal scrollbar appears.
# het lijkt alleen niet te werken :-(
MuiTableCell = @{
head = @{
"white-space" = "nowrap"
}
}
# alternating colors in the table (used to work, not anymore)
# MuiTableRow = @{
# root = @{
# '&:nth-of-type(odd)' = @{
# backgroundColor = 'rgba(0,0,0,0.04)'
# }
# }
# head = @{
# backgroundColor = 'rgb(255,255,255) !important'
# # backgroundColor = 'rgb(125,150,189) !important'
# }
# }
} # end overrides
} # end light
dark = @{
palette = @{
primary = @{
main = $Blue1
# light: will be calculated from palette.primary.main
dark = $Red1
contrastText = '#FFF' #white
}
secondary = @{
main = $Blue3
light = $Blue5
dark = $Red1
# contrastText: will be calculated to contrast whiteh palette.primary.main
}
background = @{
paper = '#f5f7fa'
default = '#f5f7fa'
}
}
typography = @{
default = @{
fontSize = 14
fontStyle = 'italic'
fontColor = $Black1
}
h5 = @{
fontWeight = 500
fontSize = 26
letterSpacing = 0.5
}
}
shape = @{
borderRadius = 8
}
mixins = @{
toolbar = @{
minHeight = 48
}
}
overrides = @{
MuiDrawer = @{
paper = @{
backgroundColor = '#081627'
}
}
MuiButton = @{
label = @{
textTransform = 'none'
}
contained = @{
boxShadow = 'none'
'&:active' = @{
boxShadow = 'none'
}
}
}
MuiTabs = @{
root = @{
marginLeft = 1
}
indicator = @{
height = 3
borderTopLeftRadius = 3
borderTopRightRadius = 3
backgroundColor = '#000'
}
}
MuiTab = @{
root = @{
textTransform = 'none'
margin = '0 16px'
minWidth = 0
padding = 0
}
}
MuiIconButton = @{
root = @{
padding = 1
}
}
MuiTooltip = @{
tooltip = @{
borderRadius = 4
}
}
MuiDivider = @{
root = @{
backgroundColor = 'rgb(255,255,255,0.15)'
}
}
MuiListItemButton = @{
root = @{
'&.Mui-selected' = @{
color = '#4fc3f7'
}
}
}
MuiListItemText = @{
primary = @{
color = 'rgba(255, 255, 255, 0.7) '
fontSize = 14
fontWeight = 500
}
}
MuiListItemIcon = @{
root = @{
color = 'rgba(255, 255, 255, 0.7) '
minWidth = 'auto'
marginRight = 2
'& svg' = @{
fontSize = 20
}
}
}
MuiAvatar = @{
root = @{
width = 32
height = 32
}
}
#dark -> the MuiSwitch is checked
MuiSwitch = @{
swhitechBase = @{
'&.Mui-checked + .MuiSwitch-track ' = @{
'opacity' = '1' # making the little moon/sun visible
'background-color' = $Blue3
}
'&.Mui-checked ' = @{
'color' = 'rgba(255, 255, 255, 1)' # dot
#'background-color' = 'rgba(80, 184, 72, 1)' # halo - when NOT hovering
'&:hover' = @{
'backgroundColor' = 'rgba(255, 255, 255, 0.25)' # halo when hovering
}
}
}
}
# https://forums.ironmansoftware.com/t/scrollable-table/7830
# You can turn off word wrapping for the table cell headers like this.
# The result is that the column headers don’t wrap and get messed up and a horizontal scrollbar appears.
# het lijkt alleen niet te werken :-(
MuiTableCell = @{
head = @{
"white-space" = "nowrap"
}
}
# alternating colors in the table (used to work, not anymore)
# MuiTableRow = @{
# root = @{
# '&:nth-of-type(odd)' = @{
# backgroundColor = 'rgba(0,0,0,0.04)'
# }
# }
# head = @{
# backgroundColor = 'rgb(255,255,255) !important'
# # backgroundColor = 'rgb(125,150,189) !important'
# }
# }
}
} # end dark
} # end theme
Return $Theme
}
So, I created a brand new app with an empty page and the light theme mentioned above. This time the theme is not called by a function, but is hardcoded in the dashboard code itself.
When I alter the color or the backgroundcolor in the MuiListItemText-primary, it gets changed in the app.
e.g.
MuiListItemText = @{
primary = @{
#color = 'rgba(255, 0, 255, 0.7) ’
color = $Blue1
fontSize = 14
fontWeight = 500
backgroundColor = $Black1
}
}
When I try this in my original code: it doesn’t change at all.
I wondered if calling the theme with a function would be the problem, but when I put the theme-code in the dashboard code I get Error rendering dashboard
This error is not expected. Please contact Ironman Software support.
Error: Minified React error #31; visit Minified React error #31 – React. for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
As a newbie I’m clearly missing some things here …
