Revise default theme

This commit is contained in:
miruka 2020-03-10 08:58:14 -04:00
parent 8d594e3e83
commit baac01d1ad
4 changed files with 66 additions and 64 deletions

View File

@ -107,7 +107,7 @@ HBox {
id: blockOtherServersCheckBox id: blockOtherServersCheckBox
text: qsTr("Reject users from other matrix servers") text: qsTr("Reject users from other matrix servers")
subtitle.text: qsTr("Cannot be changed later!") subtitle.text: qsTr("Cannot be changed later!")
subtitle.color: theme.colors.middleBackground subtitle.color: theme.colors.warningText
Layout.fillWidth: true Layout.fillWidth: true
} }

View File

@ -8,7 +8,7 @@ HCheckBox {
subtitle.text: subtitle.text:
qsTr("Only you and those you trust will be able to read the " + qsTr("Only you and those you trust will be able to read the " +
"conversation") + "conversation") +
`<br><font color="${theme.colors.middleBackground}">` + `<br><font color="${theme.colors.warningText}">` +
qsTr("Cannot be disabled later!") + qsTr("Cannot be disabled later!") +
"</font>" "</font>"
subtitle.textFormat: Text.StyledText subtitle.textFormat: Text.StyledText

View File

@ -90,7 +90,7 @@ HBox {
subtitle.text: subtitle.text:
qsTr("Only you and those you trust will be able to read the " + qsTr("Only you and those you trust will be able to read the " +
"conversation") + "conversation") +
`<br><font color="${theme.colors.middleBackground}">` + `<br><font color="${theme.colors.warningText}">` +
( (
chat.roomInfo.encrypted ? chat.roomInfo.encrypted ?
qsTr("Cannot be disabled") : qsTr("Cannot be disabled") :

View File

@ -30,45 +30,47 @@ fontFamily:
string mono: "Hack" string mono: "Hack"
colors: colors:
int hue: 264 int hue: 240
int saturation: 40 int saturation: 60
real intensity: 1.0 int bgSaturation: saturation
real opacity: 1.0 real intensity: 1.0
real opacity: 1.0
real bgOpacity: 1.0
color weakBackground: hsluv(hue, saturation, intensity * 12, opacity) color weakBackground: hsluv(hue, bgSaturation, intensity * 9, opacity)
color mediumBackground: hsluv(hue, saturation, intensity * 9, opacity) color mediumBackground: hsluv(hue, bgSaturation, intensity * 6.8, opacity)
color strongBackground: hsluv(hue, saturation, intensity * 6, opacity) color strongBackground:
hsluv(hue, bgSaturation * 2, intensity * 2, Math.max(0.6, opacity))
color inputBackground:
hsluv(hue, saturation * 1.25, intensity * 2, Math.max(0.6, opacity))
color accentBackground: color accentBackground:
hsluv(hue, saturation * 1.25, intensity * 42, Math.max(0.6, opacity)) hsluv(hue, saturation * 1.5, intensity * 32, Math.max(0.6, opacity))
color strongAccentBackground: color accentElement:
hsluv(hue, saturation * 2.25, intensity * 52, Math.max(0.6, opacity)) hsluv(hue, saturation * 1.5, intensity * 52, Math.max(0.6, opacity))
color strongAccentElement:
hsluv(hue, saturation * 1.5, intensity * 72, Math.max(0.6, opacity))
color positiveBackground: color positiveBackground:
hsluv(155, saturation * 2.25, intensity * 52, Math.max(0.6, opacity)) hsluv(155, saturation * 1.5, intensity * 52, Math.max(0.6, opacity))
color middleBackground: color middleBackground:
hsluv(60, saturation * 2.25, intensity * 52, Math.max(0.6, opacity)) hsluv(60, saturation * 1.5, intensity * 52, Math.max(0.6, opacity))
color negativeBackground: color negativeBackground:
hsluv(0, saturation * 2.25, intensity * 52, Math.max(0.6, opacity)) hsluv(0, saturation * 1.5, intensity * 52, Math.max(0.6, opacity))
color alertBackground: color alertBackground: negativeBackground
hsluv(0, saturation * 2.25, intensity * 52, Math.max(0.6, opacity))
color brightText: hsluv(0, 0, intensity * 100) color brightText: hsluv(0, 0, intensity * 100)
color text: hsluv(0, 0, intensity * 80) color text: hsluv(0, 0, intensity * 85)
color halfDimText: hsluv(0, 0, intensity * 70) color halfDimText: hsluv(0, 0, intensity * 72)
color dimText: hsluv(0, 0, intensity * 55) color dimText: hsluv(0, 0, intensity * 60)
color dimmerText: hsluv(0, 0, intensity * 30)
color errorText: hsluv(0, saturation * 2.25, 50) color warningText: hsluv(60, saturation * 1.5, 72)
color accentText: hsluv(hue, saturation * 2.25, 60) color errorText: hsluv(0, saturation * 1.5, 72)
color accentText: hsluv(hue, saturation * 1.5, 72)
color link: accentText color link: accentText
color code: hsluv(hue + 5, saturation * 1.5, intensity * 60) color code: hsluv(hue + 5, saturation * 1.5, intensity * 60)
@ -96,18 +98,18 @@ icons:
controls: controls:
box: box:
int defaultWidth: minimumSupportedWidth int defaultWidth: minimumSupportedWidth
color background: colors.mediumBackground
int radius: theme.radius int radius: theme.radius
color background: colors.strongBackground
popup: popup:
int defaultWidth: minimumSupportedWidth * 2 int defaultWidth: minimumSupportedWidth * 1.75
color background: colors.strongBackground color background: colors.mediumBackground
header: header:
color background: colors.strongBackground color background: colors.mediumBackground
button: button:
color background: colors.inputBackground color background: colors.strongBackground
color text: colors.text color text: colors.text
color hoveredOverlay: hsluv(0, 0, 50, 0.2) color hoveredOverlay: hsluv(0, 0, 50, 0.2)
@ -142,27 +144,27 @@ controls:
color checkedOverlay: controls.button.hoveredOverlay color checkedOverlay: controls.button.hoveredOverlay
checkBox: checkBox:
color checkIconColorize: colors.accentBackground color checkIconColorize: colors.accentElement
color boxBackground: controls.button.background color boxBackground: controls.button.background
int boxSize: 24 * uiScale int boxSize: 24 * uiScale
color boxBorder: hsluv(0, 0, 50, 0.3) color boxBorder: "black"
color boxHoveredBorder: colors.accentBackground color boxHoveredBorder: colors.accentElement
color boxPressedBorder: colors.strongAccentBackground color boxPressedBorder: colors.strongAccentElement
color text: controls.button.text color text: controls.button.text
color subtitle: colors.dimText color subtitle: colors.dimText
listView: listView:
color highlight: hsluv(0, 0, 50, 0.3) color highlight: colors.strongBackground
textField: textField:
color background: colors.inputBackground color background: colors.strongBackground
color focusedBackground: background color focusedBackground: background
int borderWidth: 1 int borderWidth: 1
color border: "transparent" color border: "transparent"
color focusedBorder: colors.accentBackground color focusedBorder: colors.accentElement
color errorBorder: colors.negativeBackground color errorBorder: colors.negativeBackground
color text: colors.text color text: colors.text
@ -170,28 +172,28 @@ controls:
color placeholderText: colors.dimText color placeholderText: colors.dimText
textArea: textArea:
color background: colors.inputBackground color background: colors.strongBackground
color text: colors.text color text: colors.text
color placeholderText: controls.textField.placeholderText color placeholderText: controls.textField.placeholderText
toolTip: toolTip:
int delay: 500 int delay: 500
color background: colors.inputBackground color background: colors.strongBackground
color text: colors.text color text: colors.text
color border: "black" color border: "black"
int borderWidth: 2 int borderWidth: 2
progressBar: progressBar:
int height: Math.max(2, spacing / 2) int height: Math.max(2, spacing / 2)
color background: colors.inputBackground color background: colors.strongBackground
color foreground: colors.accentBackground color foreground: colors.accentElement
color pausedForeground: colors.middleBackground color pausedForeground: colors.middleBackground
color errorForeground: colors.negativeBackground color errorForeground: colors.negativeBackground
circleProgressBar: circleProgressBar:
int thickness: Math.max(2, spacing / 2) int thickness: Math.max(2, spacing / 2)
color background: colors.inputBackground color background: colors.strongBackground
color foreground: colors.accentBackground color foreground: colors.accentElement
color errorForeground: colors.negativeBackground color errorForeground: colors.negativeBackground
color text: colors.text color text: colors.text
real indeterminateSpan: 0.5 // 0-1 real indeterminateSpan: 0.5 // 0-1
@ -207,7 +209,7 @@ controls:
color inside: hsluv(0, 0, 90) color inside: hsluv(0, 0, 90)
color pressedInside: "white" color pressedInside: "white"
color border: "black" color border: "black"
color pressedBorder: colors.strongAccentBackground color pressedBorder: colors.strongAccentElement
image: image:
int maxPauseIndicatorSize: 64 int maxPauseIndicatorSize: 64
@ -221,18 +223,18 @@ controls:
color background: hsluv(0, 0, 0, 0.4) color background: hsluv(0, 0, 0, 0.4)
background: background:
int saturation: colors.saturation + 10 int saturation: colors.saturation
int lightness: Math.min(50, colors.intensity * 20) int lightness: Math.min(50, colors.intensity * 23)
real opacity: 1.0 real opacity: 1.0
letter: letter:
int saturation: 10 + colors.saturation * 1.5 int saturation: colors.saturation + 20
int lightness: colors.intensity * 60 int lightness: colors.intensity * 60
real opacity: 1.0 real opacity: 1.0
displayName: displayName:
int saturation: colors.saturation + 25 int saturation: colors.saturation + 12
int lightness: Math.min(60, colors.intensity * 60) int lightness: Math.min(67, colors.intensity * 67)
// Special UI parts // Special UI parts
@ -246,9 +248,9 @@ ui:
point gradientEnd: Qt.point(window.width, window.height) point gradientEnd: Qt.point(window.width, window.height)
color gradientStartColor: color gradientStartColor:
hsluv(colors.hue - 50, 100, colors.intensity * 8, 1.0) hsluv(colors.hue - 50, 100, colors.intensity * 8, colors.bgOpacity)
color gradientEndColor: color gradientEndColor:
hsluv(colors.hue + 20, 30, colors.intensity * 22, 1.0) hsluv(colors.hue + 20, 30, colors.intensity * 22, colors.bgOpacity)
// To have a solid color instead, // To have a solid color instead,
// set gradientStartColor and gradientEndColor to the same value, e.g.: // set gradientStartColor and gradientEndColor to the same value, e.g.:
@ -258,7 +260,7 @@ ui:
mainPane: mainPane:
color background: colors.strongBackground color background: colors.mediumBackground
account: account:
real collapsedOpacity: 0.3 real collapsedOpacity: 0.3
@ -276,10 +278,10 @@ mainPane:
color subtitleQuote: hsluv(135, colors.saturation * 2.25, 65) color subtitleQuote: hsluv(135, colors.saturation * 2.25, 65)
settingsButton: settingsButton:
color background: colors.inputBackground color background: colors.strongBackground
filterRooms: filterRooms:
color background: colors.inputBackground color background: colors.strongBackground
chat: chat:
@ -306,10 +308,10 @@ chat:
color invitedIcon: hsluv(0, colors.saturation * 2.25, 60) color invitedIcon: hsluv(0, colors.saturation * 2.25, 60)
inviteButton: inviteButton:
color background: colors.inputBackground color background: colors.strongBackground
filterMembers: filterMembers:
color background: colors.inputBackground color background: colors.strongBackground
eventList: eventList:
int ownEventsOnRightUnderWidth: 768 * theme.uiScale int ownEventsOnRightUnderWidth: 768 * theme.uiScale
@ -320,12 +322,12 @@ chat:
int collapsedAvatarSize: 28 * uiScale int collapsedAvatarSize: 28 * uiScale
int radius: theme.radius int radius: theme.radius
color background: colors.strongBackground color background: colors.mediumBackground
color ownBackground: hsluv( color ownBackground: hsluv(
colors.hue, colors.hue,
colors.saturation + 25, colors.bgSaturation * 2,
colors.intensity * 6, colors.intensity * 5,
colors.opacity + 0.2 Math.max(0.6, opacity),
) )
color body: colors.text color body: colors.text
@ -334,7 +336,7 @@ chat:
color noticeBody: colors.halfDimText color noticeBody: colors.halfDimText
int noticeLineWidth: 1 int noticeLineWidth: 1
color quote: hsluv(135, colors.saturation * 2.25, 75) color quote: hsluv(135, colors.saturation * 1.5, colors.intensity * 80)
color link: colors.link color link: colors.link
color code: colors.code color code: colors.code
@ -372,7 +374,7 @@ chat:
real thumbnailMaxHeightRatio: 0.4 * Math.min(1, uiScale) real thumbnailMaxHeightRatio: 0.4 * Math.min(1, uiScale)
daybreak: daybreak:
color background: colors.strongBackground color background: colors.mediumBackground
color text: colors.text color text: colors.text
int radius: theme.radius int radius: theme.radius