From dfd19fa38c9ee004c5d7e73f51af5981adcb5e6d Mon Sep 17 00:00:00 2001
From: HesterG <hestergong@gmail.com>
Date: Wed, 21 Jun 2023 18:15:51 +0800
Subject: [PATCH] Fine tune project board label colors and modal content
 background (#25419)

- The label text color on project board is not contrasting enough,
changed to colors that are same as places that also used
`useLightTextOnBackground` function
([util_render.go](https://github.com/go-gitea/gitea/blob/2cdf260f42d178d23a8db70db35664511aeab31e/modules/templates/util_render.go#L136-L141),
[Context
Popup](https://github.com/go-gitea/gitea/blob/2cdf260f42d178d23a8db70db35664511aeab31e/web_src/js/components/ContextPopup.vue#L81-L84))

- background of modal `content` is `#ffffff` (from fomantic) right now,
which does not look good on dark mode, so changed to `var(--color-body)`

Before:

<img width="1378" alt="Screen Shot 2023-06-21 at 14 24 13"
src="https://github.com/go-gitea/gitea/assets/17645053/1527ca28-c884-4ca9-a4be-7a72ad1a093a">

<img width="900" alt="Screen Shot 2023-06-21 at 14 25 52"
src="https://github.com/go-gitea/gitea/assets/17645053/fab82116-7376-4027-a0a4-9eedf9fb0a30">


After:

<img width="1383" alt="Screen Shot 2023-06-21 at 14 19 33"
src="https://github.com/go-gitea/gitea/assets/17645053/fe0997e7-fee6-4522-bc4e-545088ec1cc8">

<img width="797" alt="Screen Shot 2023-06-21 at 14 32 42"
src="https://github.com/go-gitea/gitea/assets/17645053/b0591af0-950c-4448-9430-34d6c7215971">
---
 web_src/css/base.css          | 4 ++--
 web_src/css/modules/modal.css | 1 +
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/web_src/css/base.css b/web_src/css/base.css
index 7322b778f3..78bcd4f1c4 100644
--- a/web_src/css/base.css
+++ b/web_src/css/base.css
@@ -214,8 +214,8 @@
   --color-placeholder-text: #aaa;
   --color-editor-line-highlight: var(--color-primary-light-6);
   --color-project-board-bg: var(--color-secondary-light-4);
-  --color-project-board-dark-label: #555555;
-  --color-project-board-light-label: #a6aab5;
+  --color-project-board-dark-label: #111111;
+  --color-project-board-light-label: #eeeeee;
   --color-caret: var(--color-text-dark);
   --color-reaction-bg: #0000000a;
   --color-reaction-hover-bg: var(--color-primary-light-5);
diff --git a/web_src/css/modules/modal.css b/web_src/css/modules/modal.css
index a8d3521093..5824efb30c 100644
--- a/web_src/css/modules/modal.css
+++ b/web_src/css/modules/modal.css
@@ -35,6 +35,7 @@
 .ui.modal > .content,
 .ui.modal > form > .content {
   padding: 1.5em;
+  background: var(--color-body);
 }
 
 .ui.modal > .actions,