红帽全球峰会This documentation is for a release that is no longer maintained
See documentation for the latest supported version.7.7. 默认 Red Hat Developer Hub 主题
您可以使用默认的 Red Hat Developer Hub 主题配置使 Developer Hub 实例类似于标准的 Red Hat Developer Hub 实例。您还可以修改 app-config-rhdh.yaml 文件以自定义或禁用特定参数。
7.7.1. 默认 Red Hat Developer Hub 主题颜色面板
app-config-rhdh.yaml 文件对默认的 Red Hat Developer Hub 颜色面板使用以下配置：
app:
branding:
theme:
light:
variant: "rhdh"
mode: "light"
palette:
background:
default: "#F8F8F8"
paper: "#FFFFFF"
banner:
closeButtonColor: "#FFFFFF"
error: "#E22134"
info: "#2E77D0"
link: "#000000"
text: "#FFFFFF"
warning: "#FF9800"
border: "#E6E6E6"
bursts:
backgroundColor:
default: "#7C3699"
fontColor: "#FEFEFE"
gradient:
linear: "linear-gradient(-137deg, #4BB8A5 0%, #187656 100%)"
slackChannelText: "#ddd"
errorBackground: "#FFEBEE"
errorText: "#CA001B"
gold: "#FFD600"
highlight: "#FFFBCC"
infoBackground: "#ebf5ff"
infoText: "#004e8a"
link: "#0A6EBE"
linkHover: "#2196F3"
mode: "light"
navigation:
background: "#222427"
indicator: "#0066CC"
color: "#ffffff"
selectedColor: "#ffffff"
navItem:
hoverBackground: "#3c3f42"
submenu:
background: "#222427"
pinSidebarButton:
background: "#BDBDBD"
icon: "#181818"
primary:
main: "#0066CC"
secondary:
main: "#8476D1"
status:
aborted: "#757575"
error: "#E22134"
ok: "#1DB954"
pending: "#FFED51"
running: "#1F5493"
warning: "#FF9800"
tabbar:
indicator: "#9BF0E1"
textContrast: "#000000"
textSubtle: "#6E6E6E"
textVerySubtle: "#DDD"
warningBackground: "#F59B23"
warningText: "#000000"
text:
primary: "#151515"
secondary: "#757575"
rhdh:
general:
disabledBackground: "#D2D2D2"
disabled: "#6A6E73"
searchBarBorderColor: "#E4E4E4"
formControlBackgroundColor: "#FFF"
mainSectionBackgroundColor: "#FFF"
headerBottomBorderColor: "#C7C7C7"
cardBackgroundColor: "#FFF"
sideBarBackgroundColor: "#212427"
cardBorderColor: "#C7C7C7"
tableTitleColor: "#181818"
tableSubtitleColor: "#616161"
tableColumnTitleColor: "#151515"
tableRowHover: "#F5F5F5"
tableBorderColor: "#E0E0E0"
tableBackgroundColor: "#FFF"
tabsBottomBorderColor: "#D2D2D2"
contrastText: "#FFF"
primary:
main: "#0066CC"
focusVisibleBorder: "#0066CC"
secondary:
main: "#8476D1"
focusVisibleBorder: "#8476D1"
cards:
headerTextColor: "#151515"
headerBackgroundColor: "#FFF"
headerBackgroundImage: "none"
dark:
variant: "rhdh"
mode: "dark"
palette:
background:
default: "#333333"
paper: "#424242"
banner:
closeButtonColor: "#FFFFFF"
error: "#E22134"
info: "#2E77D0"
link: "#000000"
text: "#FFFFFF"
warning: "#FF9800"
border: "#E6E6E6"
bursts:
backgroundColor:
default: "#7C3699"
fontColor: "#FEFEFE"
gradient:
linear: "linear-gradient(-137deg, #4BB8A5 0%, #187656 100%)"
slackChannelText: "#ddd"
errorBackground: "#FFEBEE"
errorText: "#CA001B"
gold: "#FFD600"
highlight: "#FFFBCC"
infoBackground: "#ebf5ff"
infoText: "#004e8a"
link: "#9CC9FF"
linkHover: "#82BAFD"
mode: "dark"
navigation:
background: "#0f1214"
indicator: "#0066CC"
color: "#ffffff"
selectedColor: "#ffffff"
navItem:
hoverBackground: "#3c3f42"
submenu:
background: "#0f1214"
pinSidebarButton:
background: "#BDBDBD"
icon: "#404040"
primary:
main: "#1FA7F8"
secondary:
main: "#B2A3FF"
status:
aborted: "#9E9E9E"
error: "#F84C55"
ok: "#71CF88"
pending: "#FEF071"
running: "#3488E3"
warning: "#FFB84D"
tabbar:
indicator: "#9BF0E1"
textContrast: "#FFFFFF"
textSubtle: "#CCCCCC"
textVerySubtle: "#727272"
warningBackground: "#F59B23"
warningText: "#000000"
rhdh:
general:
disabledBackground: "#444548"
disabled: "#AAABAC"
searchBarBorderColor: "#57585a"
formControlBackgroundColor: "#36373A"
mainSectionBackgroundColor: "#0f1214"
headerBottomBorderColor: "#A3A3A3"
cardBackgroundColor: "#292929"
sideBarBackgroundColor: "#1b1d21"
cardBorderColor: "#A3A3A3"
tableTitleColor: "#E0E0E0"
tableSubtitleColor: "#E0E0E0"
tableColumnTitleColor: "#E0E0E0"
tableRowHover: "#0f1214"
tableBorderColor: "#515151"
tableBackgroundColor: "#1b1d21"
tabsBottomBorderColor: "#444548"
contrastText: "#FFF"
primary:
main: "#1FA7F8"
focusVisibleBorder: "#ADD6FF"
secondary:
main: "#B2A3FF"
focusVisibleBorder: "#D0C7FF"
cards:
headerTextColor: "#FFF"
headerBackgroundColor: "#0f1214"
headerBackgroundImage: "none"
app:
branding:
theme:
light:
variant: "rhdh"
mode: "light"
palette:
background:
default: "#F8F8F8"
paper: "#FFFFFF"
banner:
closeButtonColor: "#FFFFFF"
error: "#E22134"
info: "#2E77D0"
link: "#000000"
text: "#FFFFFF"
warning: "#FF9800"
border: "#E6E6E6"
bursts:
backgroundColor:
default: "#7C3699"
fontColor: "#FEFEFE"
gradient:
linear: "linear-gradient(-137deg, #4BB8A5 0%, #187656 100%)"
slackChannelText: "#ddd"
errorBackground: "#FFEBEE"
errorText: "#CA001B"
gold: "#FFD600"
highlight: "#FFFBCC"
infoBackground: "#ebf5ff"
infoText: "#004e8a"
link: "#0A6EBE"
linkHover: "#2196F3"
mode: "light"
navigation:
background: "#222427"
indicator: "#0066CC"
color: "#ffffff"
selectedColor: "#ffffff"
navItem:
hoverBackground: "#3c3f42"
submenu:
background: "#222427"
pinSidebarButton:
background: "#BDBDBD"
icon: "#181818"
primary:
main: "#0066CC"
secondary:
main: "#8476D1"
status:
aborted: "#757575"
error: "#E22134"
ok: "#1DB954"
pending: "#FFED51"
running: "#1F5493"
warning: "#FF9800"
tabbar:
indicator: "#9BF0E1"
textContrast: "#000000"
textSubtle: "#6E6E6E"
textVerySubtle: "#DDD"
warningBackground: "#F59B23"
warningText: "#000000"
text:
primary: "#151515"
secondary: "#757575"
rhdh:
general:
disabledBackground: "#D2D2D2"
disabled: "#6A6E73"
searchBarBorderColor: "#E4E4E4"
formControlBackgroundColor: "#FFF"
mainSectionBackgroundColor: "#FFF"
headerBottomBorderColor: "#C7C7C7"
cardBackgroundColor: "#FFF"
sideBarBackgroundColor: "#212427"
cardBorderColor: "#C7C7C7"
tableTitleColor: "#181818"
tableSubtitleColor: "#616161"
tableColumnTitleColor: "#151515"
tableRowHover: "#F5F5F5"
tableBorderColor: "#E0E0E0"
tableBackgroundColor: "#FFF"
tabsBottomBorderColor: "#D2D2D2"
contrastText: "#FFF"
primary:
main: "#0066CC"
focusVisibleBorder: "#0066CC"
secondary:
main: "#8476D1"
focusVisibleBorder: "#8476D1"
cards:
headerTextColor: "#151515"
headerBackgroundColor: "#FFF"
headerBackgroundImage: "none"
dark:
variant: "rhdh"
mode: "dark"
palette:
background:
default: "#333333"
paper: "#424242"
banner:
closeButtonColor: "#FFFFFF"
error: "#E22134"
info: "#2E77D0"
link: "#000000"
text: "#FFFFFF"
warning: "#FF9800"
border: "#E6E6E6"
bursts:
backgroundColor:
default: "#7C3699"
fontColor: "#FEFEFE"
gradient:
linear: "linear-gradient(-137deg, #4BB8A5 0%, #187656 100%)"
slackChannelText: "#ddd"
errorBackground: "#FFEBEE"
errorText: "#CA001B"
gold: "#FFD600"
highlight: "#FFFBCC"
infoBackground: "#ebf5ff"
infoText: "#004e8a"
link: "#9CC9FF"
linkHover: "#82BAFD"
mode: "dark"
navigation:
background: "#0f1214"
indicator: "#0066CC"
color: "#ffffff"
selectedColor: "#ffffff"
navItem:
hoverBackground: "#3c3f42"
submenu:
background: "#0f1214"
pinSidebarButton:
background: "#BDBDBD"
icon: "#404040"
primary:
main: "#1FA7F8"
secondary:
main: "#B2A3FF"
status:
aborted: "#9E9E9E"
error: "#F84C55"
ok: "#71CF88"
pending: "#FEF071"
running: "#3488E3"
warning: "#FFB84D"
tabbar:
indicator: "#9BF0E1"
textContrast: "#FFFFFF"
textSubtle: "#CCCCCC"
textVerySubtle: "#727272"
warningBackground: "#F59B23"
warningText: "#000000"
rhdh:
general:
disabledBackground: "#444548"
disabled: "#AAABAC"
searchBarBorderColor: "#57585a"
formControlBackgroundColor: "#36373A"
mainSectionBackgroundColor: "#0f1214"
headerBottomBorderColor: "#A3A3A3"
cardBackgroundColor: "#292929"
sideBarBackgroundColor: "#1b1d21"
cardBorderColor: "#A3A3A3"
tableTitleColor: "#E0E0E0"
tableSubtitleColor: "#E0E0E0"
tableColumnTitleColor: "#E0E0E0"
tableRowHover: "#0f1214"
tableBorderColor: "#515151"
tableBackgroundColor: "#1b1d21"
tabsBottomBorderColor: "#444548"
contrastText: "#FFF"
primary:
main: "#1FA7F8"
focusVisibleBorder: "#ADD6FF"
secondary:
main: "#B2A3FF"
focusVisibleBorder: "#D0C7FF"
cards:
headerTextColor: "#FFF"
headerBackgroundColor: "#0f1214"
headerBackgroundImage: "none"
另外，您可以使用 app-config-rhdh.yaml 文件中的以下 变体 和模式 值应用以前的默认配置：
app:
branding:
theme:
light:
variant: "rhdh"
mode: "light"
dark:
variant: "rhdh"
mode: "dark"
app:
branding:
theme:
light:
variant: "rhdh"
mode: "light"
dark:
variant: "rhdh"
mode: "dark"7.7.2. 默认 Red Hat Developer Hub 页主题
默认 Developer Hub 标头颜色在 light mode 和 black in dark 模式中是白色的，如以下 app-config-rhdh.yaml 文件配置中所示：
app:
branding:
theme:
light:
palette: {}
defaultPageTheme: default
pageTheme:
default:
backgroundColor: "#ffffff"
dark:
palette: {}
defaultPageTheme: default
pageTheme:
default:
backgroundColor: "#0f1214"
app:
branding:
theme:
light:
palette: {}
defaultPageTheme: default
pageTheme:
default:
backgroundColor: "#ffffff"
dark:
palette: {}
defaultPageTheme: default
pageTheme:
default:
backgroundColor: "#0f1214"
'%20d='M201.5%20305.5c-13.8%200-24.9-11.1-24.9-24.6%200-13.8%2011.1-24.9%2024.9-24.9%2013.6%200%2024.6%2011.1%2024.6%2024.9%200%2013.6-11.1%2024.6-24.6%2024.6zM504%20256c0%20137-111%20248-248%20248S8%20393%208%20256%20119%208%20256%208s248%20111%20248%20248zm-132.3-41.2c-9.4%200-17.7%203.9-23.8%2010-22.4-15.5-52.6-25.5-86.1-26.6l17.4-78.3%2055.4%2012.5c0%2013.6%2011.1%2024.6%2024.6%2024.6%2013.8%200%2024.9-11.3%2024.9-24.9s-11.1-24.9-24.9-24.9c-9.7%200-18%205.8-22.1%2013.8l-61.2-13.6c-3-.8-6.1%201.4-6.9%204.4l-19.1%2086.4c-33.2%201.4-63.1%2011.3-85.5%2026.8-6.1-6.4-14.7-10.2-24.1-10.2-34.9%200-46.3%2046.9-14.4%2062.8-1.1%205-1.7%2010.2-1.7%2015.5%200%2052.6%2059.2%2095.2%20132%2095.2%2073.1%200%20132.3-42.6%20132.3-95.2%200-5.3-.6-10.8-1.9-15.8%2031.3-16%2019.8-62.5-14.9-62.5zM302.8%20331c-18.2%2018.2-76.1%2017.9-93.6%200-2.2-2.2-6.1-2.2-8.3%200-2.5%202.5-2.5%206.4%200%208.6%2022.8%2022.8%2087.3%2022.8%20110.2%200%202.5-2.2%202.5-6.1%200-8.6-2.2-2.2-6.1-2.2-8.3%200zm7.7-75c-13.6%200-24.6%2011.1-24.6%2024.9%200%2013.6%2011.1%2024.6%2024.6%2024.6%2013.8%200%2024.9-11.1%2024.9-24.6%200-13.8-11-24.9-24.9-24.9z'/%3e%3c/svg%3e){kind=small}