9934931f1f
1. The previous color contrast calculation function was incorrect at
least for the `#84b6eb` where it output low-contrast white instead of
black. I've rewritten these functions now to accept hex colors and to
match GitHub's calculation and to output pure white/black for maximum
contrast. Before and after:
<img width="94" alt="Screenshot 2024-04-02 at 01 53 46"
src="https://github.com/go-gitea/gitea/assets/115237/00b39e15-a377-4458-95cf-ceec74b78228"><img
width="90" alt="Screenshot 2024-04-02 at 01 51 30"
src="https://github.com/go-gitea/gitea/assets/115237/1677067a-8d8f-47eb-82c0-76330deeb775">
2. Fix project-related issues:
- Expose the new `ContrastColor` function as template helper and use it
for project cards, replacing the previous JS solution which eliminates a
flash of wrong color on page load.
- Fix a bug where if editing a project title, the counter would get
lost.
- Move `rgbToHex` function to color utils.
Co-authored-by: delvh <dev.lh@web.de>
Co-authored-by: Giteabot <teabot@gitea.io>
---
Conflict resolution: Trivial.
(cherry picked from commit 36887ed3921d03f1864360c95bd2ecf853bfbe72)
(cherry picked from commit f6c0c39f1a)
57 lines
1.9 KiB
Go
57 lines
1.9 KiB
Go
// Copyright 2023 The Gitea Authors. All rights reserved.
|
|
// SPDX-License-Identifier: MIT
|
|
package util
|
|
|
|
import (
|
|
"fmt"
|
|
"strconv"
|
|
"strings"
|
|
)
|
|
|
|
// Get color as RGB values in 0..255 range from the hex color string (with or without #)
|
|
func HexToRBGColor(colorString string) (float64, float64, float64) {
|
|
hexString := colorString
|
|
if strings.HasPrefix(colorString, "#") {
|
|
hexString = colorString[1:]
|
|
}
|
|
// only support transfer of rgb, rgba, rrggbb and rrggbbaa
|
|
// if not in these formats, use default values 0, 0, 0
|
|
if len(hexString) != 3 && len(hexString) != 4 && len(hexString) != 6 && len(hexString) != 8 {
|
|
return 0, 0, 0
|
|
}
|
|
if len(hexString) == 3 || len(hexString) == 4 {
|
|
hexString = fmt.Sprintf("%c%c%c%c%c%c", hexString[0], hexString[0], hexString[1], hexString[1], hexString[2], hexString[2])
|
|
}
|
|
if len(hexString) == 8 {
|
|
hexString = hexString[0:6]
|
|
}
|
|
color, err := strconv.ParseUint(hexString, 16, 64)
|
|
if err != nil {
|
|
return 0, 0, 0
|
|
}
|
|
r := float64(uint8(0xFF & (uint32(color) >> 16)))
|
|
g := float64(uint8(0xFF & (uint32(color) >> 8)))
|
|
b := float64(uint8(0xFF & uint32(color)))
|
|
return r, g, b
|
|
}
|
|
|
|
// Returns relative luminance for a SRGB color - https://en.wikipedia.org/wiki/Relative_luminance
|
|
// Keep this in sync with web_src/js/utils/color.js
|
|
func GetRelativeLuminance(color string) float64 {
|
|
r, g, b := HexToRBGColor(color)
|
|
return (0.2126729*r + 0.7151522*g + 0.0721750*b) / 255
|
|
}
|
|
|
|
func UseLightText(backgroundColor string) bool {
|
|
return GetRelativeLuminance(backgroundColor) < 0.453
|
|
}
|
|
|
|
// Given a background color, returns a black or white foreground color that the highest
|
|
// contrast ratio. In the future, the APCA contrast function, or CSS `contrast-color` will be better.
|
|
// https://github.com/color-js/color.js/blob/eb7b53f7a13bb716ec8b28c7a56f052cd599acd9/src/contrast/APCA.js#L42
|
|
func ContrastColor(backgroundColor string) string {
|
|
if UseLightText(backgroundColor) {
|
|
return "#fff"
|
|
}
|
|
return "#000"
|
|
}
|