foster/forgejo
1
0
Fork 0
mirror of https://codeberg.org/forgejo/forgejo.git synced 2024-12-26 13:29:12 -05:00
Code Issues Wiki Activity
forgejo/web_src/css/themes/theme-gitea-light.css

248 lines
8.8 KiB
CSS
Raw Normal View History

Rename the default themes to gitea-light, gitea-dark, gitea-auto (#27419) Part of https://github.com/go-gitea/gitea/issues/27097: - `gitea` theme is renamed to `gitea-light` - `arc-green` theme is renamed to `gitea-dark` - `auto` theme is renamed to `gitea-auto` I put both themes in separate CSS files, removing all colors from the base CSS. Existing users will be migrated to the new theme names. The dark theme recolor will follow in a separate PR. ## :warning: BREAKING :warning: 1. If there are existing custom themes with the names `gitea-light` or `gitea-dark`, rename them before this upgrade and update the `theme` column in the `user` table for each affected user. 2. The theme in `<html>` has moved from `class="theme-name"` to `data-theme="name"`, existing customizations that depend on should be updated. --------- Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com> Co-authored-by: Giteabot <teabot@gitea.io>
2023-10-06 03:46:36 -04:00
@import "../chroma/light.css";
@import "../codemirror/light.css";
[FEAT] Adds x-mode-only anchor styles to display images based if the theme is light or dark mode. (#3985) Adds a feature similar to this https://github.blog/changelog/2021-11-24-specify-theme-context-for-images-in-markdown/ , by adding styles to elements which `src` or `href` attribute ends with `#light-mode-only` or `#dark-mode-only`. To improve compability, the github variants with the `gh-` prefix are also contained. Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/3985 Reviewed-by: 0ko <0ko@noreply.codeberg.org> Co-authored-by: Mai-Lapyst <mai-lapyst@noreply.codeberg.org> Co-committed-by: Mai-Lapyst <mai-lapyst@noreply.codeberg.org>
2024-06-09 06:50:53 -04:00
@import "../markup/light.css";
Rename the default themes to gitea-light, gitea-dark, gitea-auto (#27419) Part of https://github.com/go-gitea/gitea/issues/27097: - `gitea` theme is renamed to `gitea-light` - `arc-green` theme is renamed to `gitea-dark` - `auto` theme is renamed to `gitea-auto` I put both themes in separate CSS files, removing all colors from the base CSS. Existing users will be migrated to the new theme names. The dark theme recolor will follow in a separate PR. ## :warning: BREAKING :warning: 1. If there are existing custom themes with the names `gitea-light` or `gitea-dark`, rename them before this upgrade and update the `theme` column in the `user` table for each affected user. 2. The theme in `<html>` has moved from `class="theme-name"` to `data-theme="name"`, existing customizations that depend on should be updated. --------- Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com> Co-authored-by: Giteabot <teabot@gitea.io>
2023-10-06 03:46:36 -04:00
:root {
--is-dark-theme: false;
--color-primary: #4183c4;
--color-primary-contrast: #ffffff;
--color-primary-dark-1: #3876b3;
--color-primary-dark-2: #31699f;
--color-primary-dark-3: #2b5c8b;
--color-primary-dark-4: #254f77;
--color-primary-dark-5: #193450;
--color-primary-dark-6: #0c1a28;
--color-primary-dark-7: #04080c;
--color-primary-light-1: #548fca;
--color-primary-light-2: #679cd0;
--color-primary-light-3: #7aa8d6;
--color-primary-light-4: #8db5dc;
--color-primary-light-5: #b3cde7;
--color-primary-light-6: #d9e6f3;
--color-primary-light-7: #f4f8fb;
--color-primary-alpha-10: #4183c419;
--color-primary-alpha-20: #4183c433;
--color-primary-alpha-30: #4183c44b;
--color-primary-alpha-40: #4183c466;
--color-primary-alpha-50: #4183c480;
--color-primary-alpha-60: #4183c499;
--color-primary-alpha-70: #4183c4b3;
--color-primary-alpha-80: #4183c4cc;
--color-primary-alpha-90: #4183c4e1;
--color-primary-hover: var(--color-primary-dark-1);
--color-primary-active: var(--color-primary-dark-2);
Light theme color enhancements (#29830) Same as https://github.com/go-gitea/gitea/pull/29822 but for light theme. Slight shift towards blue and made the themes match more, like on header and footer background. Before <img width="1342" alt="Screenshot 2024-03-16 at 00 43 03" src="https://github.com/go-gitea/gitea/assets/115237/b46021a1-241c-446a-b220-ca25cc90f3bf"> After <img width="1343" alt="Screenshot 2024-03-16 at 00 45 21" src="https://github.com/go-gitea/gitea/assets/115237/1c898875-a6bb-4bd3-b059-f82e1a145c99"> Before <img width="1018" alt="Screenshot 2024-03-16 at 00 43 13" src="https://github.com/go-gitea/gitea/assets/115237/d237ee7d-b4cc-4688-a074-1e96515ac475"> After <img width="1022" alt="Screenshot 2024-03-16 at 00 43 50" src="https://github.com/go-gitea/gitea/assets/115237/89b1da77-6bc9-4b38-9688-546e794aadfa"> (cherry picked from commit 68169133a3b0d29fe348ee065088d33f6dd1b087)
2024-03-15 21:33:01 -04:00
--color-secondary: #d0d7de;
--color-secondary-dark-1: #c7ced5;
--color-secondary-dark-2: #b9c0c7;
--color-secondary-dark-3: #99a0a7;
--color-secondary-dark-4: #899097;
--color-secondary-dark-5: #7a8188;
--color-secondary-dark-6: #6a7178;
--color-secondary-dark-7: #5b6269;
--color-secondary-dark-8: #4b5259;
--color-secondary-dark-9: #3c434a;
--color-secondary-dark-10: #2c333a;
--color-secondary-dark-11: #1d242b;
--color-secondary-dark-12: #0d141b;
--color-secondary-dark-13: #00040b;
--color-secondary-light-1: #dee5ec;
--color-secondary-light-2: #e4ebf2;
--color-secondary-light-3: #ebf2f9;
--color-secondary-light-4: #f1f8ff;
--color-secondary-alpha-10: #d0d7de19;
--color-secondary-alpha-20: #d0d7de33;
--color-secondary-alpha-30: #d0d7de4b;
--color-secondary-alpha-40: #d0d7de66;
--color-secondary-alpha-50: #d0d7de80;
--color-secondary-alpha-60: #d0d7de99;
--color-secondary-alpha-70: #d0d7deb3;
--color-secondary-alpha-80: #d0d7decc;
--color-secondary-alpha-90: #d0d7dee1;
Rename the default themes to gitea-light, gitea-dark, gitea-auto (#27419) Part of https://github.com/go-gitea/gitea/issues/27097: - `gitea` theme is renamed to `gitea-light` - `arc-green` theme is renamed to `gitea-dark` - `auto` theme is renamed to `gitea-auto` I put both themes in separate CSS files, removing all colors from the base CSS. Existing users will be migrated to the new theme names. The dark theme recolor will follow in a separate PR. ## :warning: BREAKING :warning: 1. If there are existing custom themes with the names `gitea-light` or `gitea-dark`, rename them before this upgrade and update the `theme` column in the `user` table for each affected user. 2. The theme in `<html>` has moved from `class="theme-name"` to `data-theme="name"`, existing customizations that depend on should be updated. --------- Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com> Co-authored-by: Giteabot <teabot@gitea.io>
2023-10-06 03:46:36 -04:00
--color-secondary-button: var(--color-secondary-dark-4);
--color-secondary-hover: var(--color-secondary-dark-5);
--color-secondary-active: var(--color-secondary-dark-6);
/* console colors - used for actions console and console files */
Tweak actions color and borders (#29640) - Increase contrast overall - Unalias the ansi color in dark theme and copy them to light - Add outer border - Add border radius <img width="1337" alt="Screenshot 2024-03-06 at 22 30 03" src="https://github.com/go-gitea/gitea/assets/115237/11407c0f-0bb2-435e-a034-22b1f106d9b0"> <img width="1335" alt="Screenshot 2024-03-06 at 22 36 59" src="https://github.com/go-gitea/gitea/assets/115237/267db442-0979-4acc-a79e-8579b4cb0262"> (cherry picked from commit 16f13265143ff08cb6c33e976998b262e94fe569)
2024-03-06 16:44:24 -05:00
--color-console-fg: #f8f8f9;
--color-console-fg-subtle: #bec4c8;
Action view mobile improvements and fixes (#30309) Fix the action issue in https://github.com/go-gitea/gitea/issues/30303, specifically: - Use opaque step header hover background to avoid transparency issue - Un-sticky the `action-view-left` on mobile, it would otherwise overlap into right view - Improve commit summary, let it wrap - Fix and comment z-indexes - Tweak width for run-list-item-right so it wastes less space on desktop - Synced latest changes to console colors from dark to light theme <img width="467" alt="Screenshot 2024-04-06 at 18 58 15" src="https://github.com/go-gitea/gitea/assets/115237/8ad26b72-6cd9-4522-8ad1-6fd86b2d0d53"> (cherry picked from commit 0178eaec256a349371c75e582edd7fefca2085d0)
2024-04-07 08:41:42 -04:00
--color-console-bg: #171b1e;
--color-console-border: #2e353b;
--color-console-hover-bg: #292d31;
--color-console-active-bg: #2e353b;
--color-console-menu-bg: #252b30;
--color-console-menu-border: #424b51;
Rename the default themes to gitea-light, gitea-dark, gitea-auto (#27419) Part of https://github.com/go-gitea/gitea/issues/27097: - `gitea` theme is renamed to `gitea-light` - `arc-green` theme is renamed to `gitea-dark` - `auto` theme is renamed to `gitea-auto` I put both themes in separate CSS files, removing all colors from the base CSS. Existing users will be migrated to the new theme names. The dark theme recolor will follow in a separate PR. ## :warning: BREAKING :warning: 1. If there are existing custom themes with the names `gitea-light` or `gitea-dark`, rename them before this upgrade and update the `theme` column in the `user` table for each affected user. 2. The theme in `<html>` has moved from `class="theme-name"` to `data-theme="name"`, existing customizations that depend on should be updated. --------- Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com> Co-authored-by: Giteabot <teabot@gitea.io>
2023-10-06 03:46:36 -04:00
/* named colors */
--color-red: #db2828;
--color-orange: #f2711c;
--color-yellow: #fbbd08;
--color-olive: #b5cc18;
--color-green: #21ba45;
--color-teal: #00b5ad;
--color-blue: #2185d0;
--color-violet: #6435c9;
--color-purple: #a333c8;
--color-pink: #e03997;
--color-brown: #a5673f;
Light theme color enhancements (#29830) Same as https://github.com/go-gitea/gitea/pull/29822 but for light theme. Slight shift towards blue and made the themes match more, like on header and footer background. Before <img width="1342" alt="Screenshot 2024-03-16 at 00 43 03" src="https://github.com/go-gitea/gitea/assets/115237/b46021a1-241c-446a-b220-ca25cc90f3bf"> After <img width="1343" alt="Screenshot 2024-03-16 at 00 45 21" src="https://github.com/go-gitea/gitea/assets/115237/1c898875-a6bb-4bd3-b059-f82e1a145c99"> Before <img width="1018" alt="Screenshot 2024-03-16 at 00 43 13" src="https://github.com/go-gitea/gitea/assets/115237/d237ee7d-b4cc-4688-a074-1e96515ac475"> After <img width="1022" alt="Screenshot 2024-03-16 at 00 43 50" src="https://github.com/go-gitea/gitea/assets/115237/89b1da77-6bc9-4b38-9688-546e794aadfa"> (cherry picked from commit 68169133a3b0d29fe348ee065088d33f6dd1b087)
2024-03-15 21:33:01 -04:00
--color-black: #191c1d;
Rename the default themes to gitea-light, gitea-dark, gitea-auto (#27419) Part of https://github.com/go-gitea/gitea/issues/27097: - `gitea` theme is renamed to `gitea-light` - `arc-green` theme is renamed to `gitea-dark` - `auto` theme is renamed to `gitea-auto` I put both themes in separate CSS files, removing all colors from the base CSS. Existing users will be migrated to the new theme names. The dark theme recolor will follow in a separate PR. ## :warning: BREAKING :warning: 1. If there are existing custom themes with the names `gitea-light` or `gitea-dark`, rename them before this upgrade and update the `theme` column in the `user` table for each affected user. 2. The theme in `<html>` has moved from `class="theme-name"` to `data-theme="name"`, existing customizations that depend on should be updated. --------- Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com> Co-authored-by: Giteabot <teabot@gitea.io>
2023-10-06 03:46:36 -04:00
/* light variants - produced via Sass scale-color(color, $lightness: +25%) */
--color-red-light: #e45e5e;
--color-orange-light: #f59555;
--color-yellow-light: #fcce46;
--color-olive-light: #d3e942;
--color-green-light: #46de6a;
--color-teal-light: #08fff4;
--color-blue-light: #51a5e3;
--color-violet-light: #8b67d7;
--color-purple-light: #bb64d8;
--color-pink-light: #e86bb1;
--color-brown-light: #c58b66;
--color-black-light: #525558;
/* dark 1 variants - produced via Sass scale-color(color, $lightness: -10%) */
--color-red-dark-1: #c82121;
--color-orange-dark-1: #e6630d;
--color-yellow-dark-1: #e5ac04;
--color-olive-dark-1: #a3b816;
--color-green-dark-1: #1ea73e;
--color-teal-dark-1: #00a39c;
--color-blue-dark-1: #1e78bb;
--color-violet-dark-1: #5a30b5;
--color-purple-dark-1: #932eb4;
--color-pink-dark-1: #db228a;
--color-brown-dark-1: #955d39;
Light theme color enhancements (#29830) Same as https://github.com/go-gitea/gitea/pull/29822 but for light theme. Slight shift towards blue and made the themes match more, like on header and footer background. Before <img width="1342" alt="Screenshot 2024-03-16 at 00 43 03" src="https://github.com/go-gitea/gitea/assets/115237/b46021a1-241c-446a-b220-ca25cc90f3bf"> After <img width="1343" alt="Screenshot 2024-03-16 at 00 45 21" src="https://github.com/go-gitea/gitea/assets/115237/1c898875-a6bb-4bd3-b059-f82e1a145c99"> Before <img width="1018" alt="Screenshot 2024-03-16 at 00 43 13" src="https://github.com/go-gitea/gitea/assets/115237/d237ee7d-b4cc-4688-a074-1e96515ac475"> After <img width="1022" alt="Screenshot 2024-03-16 at 00 43 50" src="https://github.com/go-gitea/gitea/assets/115237/89b1da77-6bc9-4b38-9688-546e794aadfa"> (cherry picked from commit 68169133a3b0d29fe348ee065088d33f6dd1b087)
2024-03-15 21:33:01 -04:00
--color-black-dark-1: #16191c;
Rename the default themes to gitea-light, gitea-dark, gitea-auto (#27419) Part of https://github.com/go-gitea/gitea/issues/27097: - `gitea` theme is renamed to `gitea-light` - `arc-green` theme is renamed to `gitea-dark` - `auto` theme is renamed to `gitea-auto` I put both themes in separate CSS files, removing all colors from the base CSS. Existing users will be migrated to the new theme names. The dark theme recolor will follow in a separate PR. ## :warning: BREAKING :warning: 1. If there are existing custom themes with the names `gitea-light` or `gitea-dark`, rename them before this upgrade and update the `theme` column in the `user` table for each affected user. 2. The theme in `<html>` has moved from `class="theme-name"` to `data-theme="name"`, existing customizations that depend on should be updated. --------- Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com> Co-authored-by: Giteabot <teabot@gitea.io>
2023-10-06 03:46:36 -04:00
/* dark 2 variants - produced via Sass scale-color(color, $lightness: -20%) */
--color-red-dark-2: #b11e1e;
--color-orange-dark-2: #cc580c;
--color-yellow-dark-2: #cc9903;
--color-olive-dark-2: #91a313;
--color-green-dark-2: #1a9537;
--color-teal-dark-2: #00918a;
--color-blue-dark-2: #1a6aa6;
--color-violet-dark-2: #502aa1;
--color-purple-dark-2: #8229a0;
--color-pink-dark-2: #c21e7b;
--color-brown-dark-2: #845232;
Light theme color enhancements (#29830) Same as https://github.com/go-gitea/gitea/pull/29822 but for light theme. Slight shift towards blue and made the themes match more, like on header and footer background. Before <img width="1342" alt="Screenshot 2024-03-16 at 00 43 03" src="https://github.com/go-gitea/gitea/assets/115237/b46021a1-241c-446a-b220-ca25cc90f3bf"> After <img width="1343" alt="Screenshot 2024-03-16 at 00 45 21" src="https://github.com/go-gitea/gitea/assets/115237/1c898875-a6bb-4bd3-b059-f82e1a145c99"> Before <img width="1018" alt="Screenshot 2024-03-16 at 00 43 13" src="https://github.com/go-gitea/gitea/assets/115237/d237ee7d-b4cc-4688-a074-1e96515ac475"> After <img width="1022" alt="Screenshot 2024-03-16 at 00 43 50" src="https://github.com/go-gitea/gitea/assets/115237/89b1da77-6bc9-4b38-9688-546e794aadfa"> (cherry picked from commit 68169133a3b0d29fe348ee065088d33f6dd1b087)
2024-03-15 21:33:01 -04:00
--color-black-dark-2: #131619;
Rename the default themes to gitea-light, gitea-dark, gitea-auto (#27419) Part of https://github.com/go-gitea/gitea/issues/27097: - `gitea` theme is renamed to `gitea-light` - `arc-green` theme is renamed to `gitea-dark` - `auto` theme is renamed to `gitea-auto` I put both themes in separate CSS files, removing all colors from the base CSS. Existing users will be migrated to the new theme names. The dark theme recolor will follow in a separate PR. ## :warning: BREAKING :warning: 1. If there are existing custom themes with the names `gitea-light` or `gitea-dark`, rename them before this upgrade and update the `theme` column in the `user` table for each affected user. 2. The theme in `<html>` has moved from `class="theme-name"` to `data-theme="name"`, existing customizations that depend on should be updated. --------- Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com> Co-authored-by: Giteabot <teabot@gitea.io>
2023-10-06 03:46:36 -04:00
/* ansi colors used for actions console and console files */
Tweak actions color and borders (#29640) - Increase contrast overall - Unalias the ansi color in dark theme and copy them to light - Add outer border - Add border radius <img width="1337" alt="Screenshot 2024-03-06 at 22 30 03" src="https://github.com/go-gitea/gitea/assets/115237/11407c0f-0bb2-435e-a034-22b1f106d9b0"> <img width="1335" alt="Screenshot 2024-03-06 at 22 36 59" src="https://github.com/go-gitea/gitea/assets/115237/267db442-0979-4acc-a79e-8579b4cb0262"> (cherry picked from commit 16f13265143ff08cb6c33e976998b262e94fe569)
2024-03-06 16:44:24 -05:00
--color-ansi-black: #1f2326;
--color-ansi-red: #cc4848;
--color-ansi-green: #87ab63;
--color-ansi-yellow: #cc9903;
--color-ansi-blue: #3a8ac6;
--color-ansi-magenta: #d22e8b;
--color-ansi-cyan: #00918a;
Rename the default themes to gitea-light, gitea-dark, gitea-auto (#27419) Part of https://github.com/go-gitea/gitea/issues/27097: - `gitea` theme is renamed to `gitea-light` - `arc-green` theme is renamed to `gitea-dark` - `auto` theme is renamed to `gitea-auto` I put both themes in separate CSS files, removing all colors from the base CSS. Existing users will be migrated to the new theme names. The dark theme recolor will follow in a separate PR. ## :warning: BREAKING :warning: 1. If there are existing custom themes with the names `gitea-light` or `gitea-dark`, rename them before this upgrade and update the `theme` column in the `user` table for each affected user. 2. The theme in `<html>` has moved from `class="theme-name"` to `data-theme="name"`, existing customizations that depend on should be updated. --------- Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com> Co-authored-by: Giteabot <teabot@gitea.io>
2023-10-06 03:46:36 -04:00
--color-ansi-white: var(--color-console-fg-subtle);
Tweak actions color and borders (#29640) - Increase contrast overall - Unalias the ansi color in dark theme and copy them to light - Add outer border - Add border radius <img width="1337" alt="Screenshot 2024-03-06 at 22 30 03" src="https://github.com/go-gitea/gitea/assets/115237/11407c0f-0bb2-435e-a034-22b1f106d9b0"> <img width="1335" alt="Screenshot 2024-03-06 at 22 36 59" src="https://github.com/go-gitea/gitea/assets/115237/267db442-0979-4acc-a79e-8579b4cb0262"> (cherry picked from commit 16f13265143ff08cb6c33e976998b262e94fe569)
2024-03-06 16:44:24 -05:00
--color-ansi-bright-black: #46494d;
--color-ansi-bright-red: #d15a5a;
--color-ansi-bright-green: #93b373;
--color-ansi-bright-yellow: #eaaf03;
--color-ansi-bright-blue: #4e96cc;
--color-ansi-bright-magenta: #d74397;
--color-ansi-bright-cyan: #00b6ad;
Rename the default themes to gitea-light, gitea-dark, gitea-auto (#27419) Part of https://github.com/go-gitea/gitea/issues/27097: - `gitea` theme is renamed to `gitea-light` - `arc-green` theme is renamed to `gitea-dark` - `auto` theme is renamed to `gitea-auto` I put both themes in separate CSS files, removing all colors from the base CSS. Existing users will be migrated to the new theme names. The dark theme recolor will follow in a separate PR. ## :warning: BREAKING :warning: 1. If there are existing custom themes with the names `gitea-light` or `gitea-dark`, rename them before this upgrade and update the `theme` column in the `user` table for each affected user. 2. The theme in `<html>` has moved from `class="theme-name"` to `data-theme="name"`, existing customizations that depend on should be updated. --------- Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com> Co-authored-by: Giteabot <teabot@gitea.io>
2023-10-06 03:46:36 -04:00
--color-ansi-bright-white: var(--color-console-fg);
/* other colors */
Light theme color enhancements (#29830) Same as https://github.com/go-gitea/gitea/pull/29822 but for light theme. Slight shift towards blue and made the themes match more, like on header and footer background. Before <img width="1342" alt="Screenshot 2024-03-16 at 00 43 03" src="https://github.com/go-gitea/gitea/assets/115237/b46021a1-241c-446a-b220-ca25cc90f3bf"> After <img width="1343" alt="Screenshot 2024-03-16 at 00 45 21" src="https://github.com/go-gitea/gitea/assets/115237/1c898875-a6bb-4bd3-b059-f82e1a145c99"> Before <img width="1018" alt="Screenshot 2024-03-16 at 00 43 13" src="https://github.com/go-gitea/gitea/assets/115237/d237ee7d-b4cc-4688-a074-1e96515ac475"> After <img width="1022" alt="Screenshot 2024-03-16 at 00 43 50" src="https://github.com/go-gitea/gitea/assets/115237/89b1da77-6bc9-4b38-9688-546e794aadfa"> (cherry picked from commit 68169133a3b0d29fe348ee065088d33f6dd1b087)
2024-03-15 21:33:01 -04:00
--color-grey: #697077;
--color-grey-light: #7c838a;
Rename the default themes to gitea-light, gitea-dark, gitea-auto (#27419) Part of https://github.com/go-gitea/gitea/issues/27097: - `gitea` theme is renamed to `gitea-light` - `arc-green` theme is renamed to `gitea-dark` - `auto` theme is renamed to `gitea-auto` I put both themes in separate CSS files, removing all colors from the base CSS. Existing users will be migrated to the new theme names. The dark theme recolor will follow in a separate PR. ## :warning: BREAKING :warning: 1. If there are existing custom themes with the names `gitea-light` or `gitea-dark`, rename them before this upgrade and update the `theme` column in the `user` table for each affected user. 2. The theme in `<html>` has moved from `class="theme-name"` to `data-theme="name"`, existing customizations that depend on should be updated. --------- Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com> Co-authored-by: Giteabot <teabot@gitea.io>
2023-10-06 03:46:36 -04:00
--color-gold: #a1882b;
--color-white: #ffffff;
--color-diff-removed-word-bg: #fdb8c0;
--color-diff-added-word-bg: #acf2bd;
--color-diff-removed-row-bg: #ffeef0;
--color-diff-moved-row-bg: #f1f8d1;
--color-diff-added-row-bg: #e6ffed;
--color-diff-removed-row-border: #f1c0c0;
--color-diff-moved-row-border: #d0e27f;
--color-diff-added-row-border: #e6ffed;
Light theme color enhancements (#29830) Same as https://github.com/go-gitea/gitea/pull/29822 but for light theme. Slight shift towards blue and made the themes match more, like on header and footer background. Before <img width="1342" alt="Screenshot 2024-03-16 at 00 43 03" src="https://github.com/go-gitea/gitea/assets/115237/b46021a1-241c-446a-b220-ca25cc90f3bf"> After <img width="1343" alt="Screenshot 2024-03-16 at 00 45 21" src="https://github.com/go-gitea/gitea/assets/115237/1c898875-a6bb-4bd3-b059-f82e1a145c99"> Before <img width="1018" alt="Screenshot 2024-03-16 at 00 43 13" src="https://github.com/go-gitea/gitea/assets/115237/d237ee7d-b4cc-4688-a074-1e96515ac475"> After <img width="1022" alt="Screenshot 2024-03-16 at 00 43 50" src="https://github.com/go-gitea/gitea/assets/115237/89b1da77-6bc9-4b38-9688-546e794aadfa"> (cherry picked from commit 68169133a3b0d29fe348ee065088d33f6dd1b087)
2024-03-15 21:33:01 -04:00
--color-diff-inactive: #f0f2f4;
Rename the default themes to gitea-light, gitea-dark, gitea-auto (#27419) Part of https://github.com/go-gitea/gitea/issues/27097: - `gitea` theme is renamed to `gitea-light` - `arc-green` theme is renamed to `gitea-dark` - `auto` theme is renamed to `gitea-auto` I put both themes in separate CSS files, removing all colors from the base CSS. Existing users will be migrated to the new theme names. The dark theme recolor will follow in a separate PR. ## :warning: BREAKING :warning: 1. If there are existing custom themes with the names `gitea-light` or `gitea-dark`, rename them before this upgrade and update the `theme` column in the `user` table for each affected user. 2. The theme in `<html>` has moved from `class="theme-name"` to `data-theme="name"`, existing customizations that depend on should be updated. --------- Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com> Co-authored-by: Giteabot <teabot@gitea.io>
2023-10-06 03:46:36 -04:00
--color-error-border: #e0b4b4;
--color-error-bg: #fff6f6;
--color-error-bg-active: #fbb;
--color-error-bg-hover: #fdd;
--color-error-text: #9f3a38;
--color-success-border: #a3c293;
--color-success-bg: #fcfff5;
--color-success-text: #2c662d;
--color-warning-border: #c9ba9b;
--color-warning-bg: #fffaf3;
--color-warning-text: #573a08;
--color-info-border: #a9d5de;
--color-info-bg: #f8ffff;
--color-info-text: #276f86;
--color-red-badge: #db2828;
--color-red-badge-bg: #db28281a;
--color-red-badge-hover-bg: #db28284d;
--color-green-badge: #21ba45;
--color-green-badge-bg: #21ba451a;
--color-green-badge-hover-bg: #21ba454d;
--color-yellow-badge: #fbbd08;
--color-yellow-badge-bg: #fbbd081a;
--color-yellow-badge-hover-bg: #fbbd084d;
--color-orange-badge: #f2711c;
--color-orange-badge-bg: #f2711c1a;
--color-orange-badge-hover-bg: #f2711c4d;
--color-git: #f05133;
Improve how icon colors are defined - define specific colors for icons for themes - fix related contrast issues on Forgejo dark theme
2024-05-10 14:19:35 -04:00
/* Icon colors (PR/Issue/...) */
--color-icon-green: var(--color-green);
--color-icon-red: var(--color-red);
--color-icon-purple: var(--color-purple);
Rename the default themes to gitea-light, gitea-dark, gitea-auto (#27419) Part of https://github.com/go-gitea/gitea/issues/27097: - `gitea` theme is renamed to `gitea-light` - `arc-green` theme is renamed to `gitea-dark` - `auto` theme is renamed to `gitea-auto` I put both themes in separate CSS files, removing all colors from the base CSS. Existing users will be migrated to the new theme names. The dark theme recolor will follow in a separate PR. ## :warning: BREAKING :warning: 1. If there are existing custom themes with the names `gitea-light` or `gitea-dark`, rename them before this upgrade and update the `theme` column in the `user` table for each affected user. 2. The theme in `<html>` has moved from `class="theme-name"` to `data-theme="name"`, existing customizations that depend on should be updated. --------- Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com> Co-authored-by: Giteabot <teabot@gitea.io>
2023-10-06 03:46:36 -04:00
/* target-based colors */
--color-body: #ffffff;
Light theme color enhancements (#29830) Same as https://github.com/go-gitea/gitea/pull/29822 but for light theme. Slight shift towards blue and made the themes match more, like on header and footer background. Before <img width="1342" alt="Screenshot 2024-03-16 at 00 43 03" src="https://github.com/go-gitea/gitea/assets/115237/b46021a1-241c-446a-b220-ca25cc90f3bf"> After <img width="1343" alt="Screenshot 2024-03-16 at 00 45 21" src="https://github.com/go-gitea/gitea/assets/115237/1c898875-a6bb-4bd3-b059-f82e1a145c99"> Before <img width="1018" alt="Screenshot 2024-03-16 at 00 43 13" src="https://github.com/go-gitea/gitea/assets/115237/d237ee7d-b4cc-4688-a074-1e96515ac475"> After <img width="1022" alt="Screenshot 2024-03-16 at 00 43 50" src="https://github.com/go-gitea/gitea/assets/115237/89b1da77-6bc9-4b38-9688-546e794aadfa"> (cherry picked from commit 68169133a3b0d29fe348ee065088d33f6dd1b087)
2024-03-15 21:33:01 -04:00
--color-box-header: #f1f3f5;
Rename the default themes to gitea-light, gitea-dark, gitea-auto (#27419) Part of https://github.com/go-gitea/gitea/issues/27097: - `gitea` theme is renamed to `gitea-light` - `arc-green` theme is renamed to `gitea-dark` - `auto` theme is renamed to `gitea-auto` I put both themes in separate CSS files, removing all colors from the base CSS. Existing users will be migrated to the new theme names. The dark theme recolor will follow in a separate PR. ## :warning: BREAKING :warning: 1. If there are existing custom themes with the names `gitea-light` or `gitea-dark`, rename them before this upgrade and update the `theme` column in the `user` table for each affected user. 2. The theme in `<html>` has moved from `class="theme-name"` to `data-theme="name"`, existing customizations that depend on should be updated. --------- Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com> Co-authored-by: Giteabot <teabot@gitea.io>
2023-10-06 03:46:36 -04:00
--color-box-body: #ffffff;
[Port] gitea#30014: Various code view improvements 1. Restore missing styles for message close icon 2. Move `code-line-button` so that it does not go off-screen on small viewports 3. Make `code-line-button` look and behave like other buttons 4. Make `code-line-button` work in blame 5. Make the active selection span the whole line, not just the code part 6. Tweak colors, make dark theme code bg darker, make line numbers same color in diff and file view. 7. Move code background to parent, fixing border radius and other problems 8. Enable code wrap in blame 9. Improve blame responsiveness 10. Remove `--color-code-sidebar-bg` in blame, now it uses same background as code 11. Rename `--color-active-line` to `--color-highlight-bg` 12. Add `--color-highlight-bg` 13. Fix button group borders on hover and border-right on last button. <img width="1343" alt="Screenshot 2024-03-23 at 22 34 13" src="https://github.com/go-gitea/gitea/assets/115237/fcbb919f-5dc3-43f0-97f6-870d6f412554"> <img width="1334" alt="Screenshot 2024-03-23 at 22 34 26" src="https://github.com/go-gitea/gitea/assets/115237/ca44c3b7-4328-4645-ba49-b0dc6a5ac06d"> <img width="1338" alt="Screenshot 2024-03-23 at 22 34 57" src="https://github.com/go-gitea/gitea/assets/115237/00eb0b5a-1ec7-4669-a94a-4602b9d1c1ac"> <img width="1337" alt="Screenshot 2024-03-23 at 22 34 42" src="https://github.com/go-gitea/gitea/assets/115237/752edc4a-064f-413c-9dff-c086187fcd85"> Fixes: https://github.com/go-gitea/gitea/issues/18074 --- Conflict resolution: Trivial. Ref: https://codeberg.org/forgejo/forgejo/issues/2776 (cherry picked from commit db01bf6cc88a8a7b5132b9306b3af1649566b10f)
2024-03-24 08:14:03 -04:00
--color-box-body-highlight: #ecf5fd;
Misc color tweaks (#29943) Minor color tweaks: - Better text contrasts - Better distinguish nav and header wrapper in light theme - Input boxes are now white on light theme - Slightly darker dark theme background <img width="503" alt="Screenshot 2024-03-20 at 19 31 54" src="https://github.com/go-gitea/gitea/assets/115237/c7802a84-2386-4332-bd91-f419473ff644"> <img width="510" alt="Screenshot 2024-03-20 at 19 32 24" src="https://github.com/go-gitea/gitea/assets/115237/21d3529e-6e0a-413a-9e9e-a03bea2405eb"> (cherry picked from commit 444460ea807c6a669d1a1467510868335abee5fb)
2024-03-20 19:48:04 -04:00
--color-text-dark: #01050a;
--color-text: #181c21;
--color-text-light: #30363b;
--color-text-light-1: #40474d;
--color-text-light-2: #5b6167;
--color-text-light-3: #747c84;
Lighten text colors on dark theme for increased contrast (#29481) Improve contrast by lightening the text colors in dark theme by around 35%. Additionally, share some variables that had the same or similar color, which will ease future theme creation. (cherry picked from commit e94e2fb6c5484070d56977644213d735df9e0c10)
2024-02-29 00:11:11 -05:00
--color-footer: var(--color-nav-bg);
Light theme color enhancements (#29830) Same as https://github.com/go-gitea/gitea/pull/29822 but for light theme. Slight shift towards blue and made the themes match more, like on header and footer background. Before <img width="1342" alt="Screenshot 2024-03-16 at 00 43 03" src="https://github.com/go-gitea/gitea/assets/115237/b46021a1-241c-446a-b220-ca25cc90f3bf"> After <img width="1343" alt="Screenshot 2024-03-16 at 00 45 21" src="https://github.com/go-gitea/gitea/assets/115237/1c898875-a6bb-4bd3-b059-f82e1a145c99"> Before <img width="1018" alt="Screenshot 2024-03-16 at 00 43 13" src="https://github.com/go-gitea/gitea/assets/115237/d237ee7d-b4cc-4688-a074-1e96515ac475"> After <img width="1022" alt="Screenshot 2024-03-16 at 00 43 50" src="https://github.com/go-gitea/gitea/assets/115237/89b1da77-6bc9-4b38-9688-546e794aadfa"> (cherry picked from commit 68169133a3b0d29fe348ee065088d33f6dd1b087)
2024-03-15 21:33:01 -04:00
--color-timeline: #d0d7de;
Lighten text colors on dark theme for increased contrast (#29481) Improve contrast by lightening the text colors in dark theme by around 35%. Additionally, share some variables that had the same or similar color, which will ease future theme creation. (cherry picked from commit e94e2fb6c5484070d56977644213d735df9e0c10)
2024-02-29 00:11:11 -05:00
--color-input-text: var(--color-text-dark);
Misc color tweaks (#29943) Minor color tweaks: - Better text contrasts - Better distinguish nav and header wrapper in light theme - Input boxes are now white on light theme - Slightly darker dark theme background <img width="503" alt="Screenshot 2024-03-20 at 19 31 54" src="https://github.com/go-gitea/gitea/assets/115237/c7802a84-2386-4332-bd91-f419473ff644"> <img width="510" alt="Screenshot 2024-03-20 at 19 32 24" src="https://github.com/go-gitea/gitea/assets/115237/21d3529e-6e0a-413a-9e9e-a03bea2405eb"> (cherry picked from commit 444460ea807c6a669d1a1467510868335abee5fb)
2024-03-20 19:48:04 -04:00
--color-input-background: #fff;
Light theme color enhancements (#29830) Same as https://github.com/go-gitea/gitea/pull/29822 but for light theme. Slight shift towards blue and made the themes match more, like on header and footer background. Before <img width="1342" alt="Screenshot 2024-03-16 at 00 43 03" src="https://github.com/go-gitea/gitea/assets/115237/b46021a1-241c-446a-b220-ca25cc90f3bf"> After <img width="1343" alt="Screenshot 2024-03-16 at 00 45 21" src="https://github.com/go-gitea/gitea/assets/115237/1c898875-a6bb-4bd3-b059-f82e1a145c99"> Before <img width="1018" alt="Screenshot 2024-03-16 at 00 43 13" src="https://github.com/go-gitea/gitea/assets/115237/d237ee7d-b4cc-4688-a074-1e96515ac475"> After <img width="1022" alt="Screenshot 2024-03-16 at 00 43 50" src="https://github.com/go-gitea/gitea/assets/115237/89b1da77-6bc9-4b38-9688-546e794aadfa"> (cherry picked from commit 68169133a3b0d29fe348ee065088d33f6dd1b087)
2024-03-15 21:33:01 -04:00
--color-input-toggle-background: #d0d7de;
Rename the default themes to gitea-light, gitea-dark, gitea-auto (#27419) Part of https://github.com/go-gitea/gitea/issues/27097: - `gitea` theme is renamed to `gitea-light` - `arc-green` theme is renamed to `gitea-dark` - `auto` theme is renamed to `gitea-auto` I put both themes in separate CSS files, removing all colors from the base CSS. Existing users will be migrated to the new theme names. The dark theme recolor will follow in a separate PR. ## :warning: BREAKING :warning: 1. If there are existing custom themes with the names `gitea-light` or `gitea-dark`, rename them before this upgrade and update the `theme` column in the `user` table for each affected user. 2. The theme in `<html>` has moved from `class="theme-name"` to `data-theme="name"`, existing customizations that depend on should be updated. --------- Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com> Co-authored-by: Giteabot <teabot@gitea.io>
2023-10-06 03:46:36 -04:00
--color-input-border: var(--color-secondary);
--color-input-border-hover: var(--color-secondary-dark-1);
Light theme color enhancements (#29830) Same as https://github.com/go-gitea/gitea/pull/29822 but for light theme. Slight shift towards blue and made the themes match more, like on header and footer background. Before <img width="1342" alt="Screenshot 2024-03-16 at 00 43 03" src="https://github.com/go-gitea/gitea/assets/115237/b46021a1-241c-446a-b220-ca25cc90f3bf"> After <img width="1343" alt="Screenshot 2024-03-16 at 00 45 21" src="https://github.com/go-gitea/gitea/assets/115237/1c898875-a6bb-4bd3-b059-f82e1a145c99"> Before <img width="1018" alt="Screenshot 2024-03-16 at 00 43 13" src="https://github.com/go-gitea/gitea/assets/115237/d237ee7d-b4cc-4688-a074-1e96515ac475"> After <img width="1022" alt="Screenshot 2024-03-16 at 00 43 50" src="https://github.com/go-gitea/gitea/assets/115237/89b1da77-6bc9-4b38-9688-546e794aadfa"> (cherry picked from commit 68169133a3b0d29fe348ee065088d33f6dd1b087)
2024-03-15 21:33:01 -04:00
--color-light: #00001706;
Rename the default themes to gitea-light, gitea-dark, gitea-auto (#27419) Part of https://github.com/go-gitea/gitea/issues/27097: - `gitea` theme is renamed to `gitea-light` - `arc-green` theme is renamed to `gitea-dark` - `auto` theme is renamed to `gitea-auto` I put both themes in separate CSS files, removing all colors from the base CSS. Existing users will be migrated to the new theme names. The dark theme recolor will follow in a separate PR. ## :warning: BREAKING :warning: 1. If there are existing custom themes with the names `gitea-light` or `gitea-dark`, rename them before this upgrade and update the `theme` column in the `user` table for each affected user. 2. The theme in `<html>` has moved from `class="theme-name"` to `data-theme="name"`, existing customizations that depend on should be updated. --------- Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com> Co-authored-by: Giteabot <teabot@gitea.io>
2023-10-06 03:46:36 -04:00
--color-light-mimic-enabled: rgba(0, 0, 0, calc(6 / 255 * 222 / 255 / var(--opacity-disabled)));
Light theme color enhancements (#29830) Same as https://github.com/go-gitea/gitea/pull/29822 but for light theme. Slight shift towards blue and made the themes match more, like on header and footer background. Before <img width="1342" alt="Screenshot 2024-03-16 at 00 43 03" src="https://github.com/go-gitea/gitea/assets/115237/b46021a1-241c-446a-b220-ca25cc90f3bf"> After <img width="1343" alt="Screenshot 2024-03-16 at 00 45 21" src="https://github.com/go-gitea/gitea/assets/115237/1c898875-a6bb-4bd3-b059-f82e1a145c99"> Before <img width="1018" alt="Screenshot 2024-03-16 at 00 43 13" src="https://github.com/go-gitea/gitea/assets/115237/d237ee7d-b4cc-4688-a074-1e96515ac475"> After <img width="1022" alt="Screenshot 2024-03-16 at 00 43 50" src="https://github.com/go-gitea/gitea/assets/115237/89b1da77-6bc9-4b38-9688-546e794aadfa"> (cherry picked from commit 68169133a3b0d29fe348ee065088d33f6dd1b087)
2024-03-15 21:33:01 -04:00
--color-light-border: #0000171d;
--color-hover: #00001708;
--color-active: #00001714;
--color-menu: #f8f9fb;
--color-card: #f8f9fb;
[PORT] gitea#30282: Markup color and font size fixes 1. Distinguish inline an block code with new CSS variable `--color-markup-code-inline` 2. Various color tweaks, better contrast from background (cherry picked from commit 662eb4b0852f9ce2c161e7fea5ac66bf912fc9f6) --- - Revert the changes of #2874. - Add more contrast to the inline block for light and dark theme. (cherry picked from commit 662eb4b0852f9ce2c161e7fea5ac66bf912fc9f6)
2024-04-06 17:06:27 -04:00
--color-markup-table-row: #0030600a;
--color-markup-code-block: #00306010;
--color-markup-code-inline: #00306012;
Light theme color enhancements (#29830) Same as https://github.com/go-gitea/gitea/pull/29822 but for light theme. Slight shift towards blue and made the themes match more, like on header and footer background. Before <img width="1342" alt="Screenshot 2024-03-16 at 00 43 03" src="https://github.com/go-gitea/gitea/assets/115237/b46021a1-241c-446a-b220-ca25cc90f3bf"> After <img width="1343" alt="Screenshot 2024-03-16 at 00 45 21" src="https://github.com/go-gitea/gitea/assets/115237/1c898875-a6bb-4bd3-b059-f82e1a145c99"> Before <img width="1018" alt="Screenshot 2024-03-16 at 00 43 13" src="https://github.com/go-gitea/gitea/assets/115237/d237ee7d-b4cc-4688-a074-1e96515ac475"> After <img width="1022" alt="Screenshot 2024-03-16 at 00 43 50" src="https://github.com/go-gitea/gitea/assets/115237/89b1da77-6bc9-4b38-9688-546e794aadfa"> (cherry picked from commit 68169133a3b0d29fe348ee065088d33f6dd1b087)
2024-03-15 21:33:01 -04:00
--color-button: #f8f9fb;
--color-code-bg: #fafdff;
--color-shadow: #00001726;
--color-secondary-bg: #f2f5f8;
[Port] gitea#30014: Various code view improvements 1. Restore missing styles for message close icon 2. Move `code-line-button` so that it does not go off-screen on small viewports 3. Make `code-line-button` look and behave like other buttons 4. Make `code-line-button` work in blame 5. Make the active selection span the whole line, not just the code part 6. Tweak colors, make dark theme code bg darker, make line numbers same color in diff and file view. 7. Move code background to parent, fixing border radius and other problems 8. Enable code wrap in blame 9. Improve blame responsiveness 10. Remove `--color-code-sidebar-bg` in blame, now it uses same background as code 11. Rename `--color-active-line` to `--color-highlight-bg` 12. Add `--color-highlight-bg` 13. Fix button group borders on hover and border-right on last button. <img width="1343" alt="Screenshot 2024-03-23 at 22 34 13" src="https://github.com/go-gitea/gitea/assets/115237/fcbb919f-5dc3-43f0-97f6-870d6f412554"> <img width="1334" alt="Screenshot 2024-03-23 at 22 34 26" src="https://github.com/go-gitea/gitea/assets/115237/ca44c3b7-4328-4645-ba49-b0dc6a5ac06d"> <img width="1338" alt="Screenshot 2024-03-23 at 22 34 57" src="https://github.com/go-gitea/gitea/assets/115237/00eb0b5a-1ec7-4669-a94a-4602b9d1c1ac"> <img width="1337" alt="Screenshot 2024-03-23 at 22 34 42" src="https://github.com/go-gitea/gitea/assets/115237/752edc4a-064f-413c-9dff-c086187fcd85"> Fixes: https://github.com/go-gitea/gitea/issues/18074 --- Conflict resolution: Trivial. Ref: https://codeberg.org/forgejo/forgejo/issues/2776 (cherry picked from commit db01bf6cc88a8a7b5132b9306b3af1649566b10f)
2024-03-24 08:14:03 -04:00
--color-expand-button: #cfe8fa;
Lighten text colors on dark theme for increased contrast (#29481) Improve contrast by lightening the text colors in dark theme by around 35%. Additionally, share some variables that had the same or similar color, which will ease future theme creation. (cherry picked from commit e94e2fb6c5484070d56977644213d735df9e0c10)
2024-02-29 00:11:11 -05:00
--color-placeholder-text: var(--color-text-light-3);
Rename the default themes to gitea-light, gitea-dark, gitea-auto (#27419) Part of https://github.com/go-gitea/gitea/issues/27097: - `gitea` theme is renamed to `gitea-light` - `arc-green` theme is renamed to `gitea-dark` - `auto` theme is renamed to `gitea-auto` I put both themes in separate CSS files, removing all colors from the base CSS. Existing users will be migrated to the new theme names. The dark theme recolor will follow in a separate PR. ## :warning: BREAKING :warning: 1. If there are existing custom themes with the names `gitea-light` or `gitea-dark`, rename them before this upgrade and update the `theme` column in the `user` table for each affected user. 2. The theme in `<html>` has moved from `class="theme-name"` to `data-theme="name"`, existing customizations that depend on should be updated. --------- Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com> Co-authored-by: Giteabot <teabot@gitea.io>
2023-10-06 03:46:36 -04:00
--color-editor-line-highlight: var(--color-primary-light-6);
Rename project board -> column to make the UI less confusing (#30170) This PR split the `Board` into two parts. One is the struct has been renamed to `Column` and the second we have a `Template Type`. But to make it easier to review, this PR will not change the database schemas, they are just renames. The database schema changes could be in future PRs. --------- Co-authored-by: silverwind <me@silverwind.io> Co-authored-by: yp05327 <576951401@qq.com> (cherry picked from commit 98751108b11dc748cc99230ca0fc1acfdf2c8929) Conflicts: docs/content/administration/config-cheat-sheet.en-us.md docs/content/index.en-us.md docs/content/installation/comparison.en-us.md docs/content/usage/permissions.en-us.md non existent files options/locale/locale_en-US.ini routers/web/web.go templates/repo/header.tmpl templates/repo/settings/options.tmpl trivial context conflicts
2024-05-27 04:59:54 -04:00
--color-project-column-bg: var(--color-secondary-light-4);
Rename the default themes to gitea-light, gitea-dark, gitea-auto (#27419) Part of https://github.com/go-gitea/gitea/issues/27097: - `gitea` theme is renamed to `gitea-light` - `arc-green` theme is renamed to `gitea-dark` - `auto` theme is renamed to `gitea-auto` I put both themes in separate CSS files, removing all colors from the base CSS. Existing users will be migrated to the new theme names. The dark theme recolor will follow in a separate PR. ## :warning: BREAKING :warning: 1. If there are existing custom themes with the names `gitea-light` or `gitea-dark`, rename them before this upgrade and update the `theme` column in the `user` table for each affected user. 2. The theme in `<html>` has moved from `class="theme-name"` to `data-theme="name"`, existing customizations that depend on should be updated. --------- Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com> Co-authored-by: Giteabot <teabot@gitea.io>
2023-10-06 03:46:36 -04:00
--color-caret: var(--color-text-dark);
Light theme color enhancements (#29830) Same as https://github.com/go-gitea/gitea/pull/29822 but for light theme. Slight shift towards blue and made the themes match more, like on header and footer background. Before <img width="1342" alt="Screenshot 2024-03-16 at 00 43 03" src="https://github.com/go-gitea/gitea/assets/115237/b46021a1-241c-446a-b220-ca25cc90f3bf"> After <img width="1343" alt="Screenshot 2024-03-16 at 00 45 21" src="https://github.com/go-gitea/gitea/assets/115237/1c898875-a6bb-4bd3-b059-f82e1a145c99"> Before <img width="1018" alt="Screenshot 2024-03-16 at 00 43 13" src="https://github.com/go-gitea/gitea/assets/115237/d237ee7d-b4cc-4688-a074-1e96515ac475"> After <img width="1022" alt="Screenshot 2024-03-16 at 00 43 50" src="https://github.com/go-gitea/gitea/assets/115237/89b1da77-6bc9-4b38-9688-546e794aadfa"> (cherry picked from commit 68169133a3b0d29fe348ee065088d33f6dd1b087)
2024-03-15 21:33:01 -04:00
--color-reaction-bg: #0000170a;
Rename the default themes to gitea-light, gitea-dark, gitea-auto (#27419) Part of https://github.com/go-gitea/gitea/issues/27097: - `gitea` theme is renamed to `gitea-light` - `arc-green` theme is renamed to `gitea-dark` - `auto` theme is renamed to `gitea-auto` I put both themes in separate CSS files, removing all colors from the base CSS. Existing users will be migrated to the new theme names. The dark theme recolor will follow in a separate PR. ## :warning: BREAKING :warning: 1. If there are existing custom themes with the names `gitea-light` or `gitea-dark`, rename them before this upgrade and update the `theme` column in the `user` table for each affected user. 2. The theme in `<html>` has moved from `class="theme-name"` to `data-theme="name"`, existing customizations that depend on should be updated. --------- Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com> Co-authored-by: Giteabot <teabot@gitea.io>
2023-10-06 03:46:36 -04:00
--color-reaction-hover-bg: var(--color-primary-light-5);
--color-reaction-active-bg: var(--color-primary-light-6);
Light theme color enhancements (#29830) Same as https://github.com/go-gitea/gitea/pull/29822 but for light theme. Slight shift towards blue and made the themes match more, like on header and footer background. Before <img width="1342" alt="Screenshot 2024-03-16 at 00 43 03" src="https://github.com/go-gitea/gitea/assets/115237/b46021a1-241c-446a-b220-ca25cc90f3bf"> After <img width="1343" alt="Screenshot 2024-03-16 at 00 45 21" src="https://github.com/go-gitea/gitea/assets/115237/1c898875-a6bb-4bd3-b059-f82e1a145c99"> Before <img width="1018" alt="Screenshot 2024-03-16 at 00 43 13" src="https://github.com/go-gitea/gitea/assets/115237/d237ee7d-b4cc-4688-a074-1e96515ac475"> After <img width="1022" alt="Screenshot 2024-03-16 at 00 43 50" src="https://github.com/go-gitea/gitea/assets/115237/89b1da77-6bc9-4b38-9688-546e794aadfa"> (cherry picked from commit 68169133a3b0d29fe348ee065088d33f6dd1b087)
2024-03-15 21:33:01 -04:00
--color-tooltip-text: #fbfdff;
--color-tooltip-bg: #000017f0;
Misc color tweaks (#29943) Minor color tweaks: - Better text contrasts - Better distinguish nav and header wrapper in light theme - Input boxes are now white on light theme - Slightly darker dark theme background <img width="503" alt="Screenshot 2024-03-20 at 19 31 54" src="https://github.com/go-gitea/gitea/assets/115237/c7802a84-2386-4332-bd91-f419473ff644"> <img width="510" alt="Screenshot 2024-03-20 at 19 32 24" src="https://github.com/go-gitea/gitea/assets/115237/21d3529e-6e0a-413a-9e9e-a03bea2405eb"> (cherry picked from commit 444460ea807c6a669d1a1467510868335abee5fb)
2024-03-20 19:48:04 -04:00
--color-nav-bg: #f6f7fa;
Dark theme color enhancements (#29822) - Few very minor colors tweaks to dark theme. Slightly darker background, slightly bluer secondary colors. - Alias `--color-nav-hover-bg` in both themes. Before: <img width="1013" alt="Screenshot 2024-03-15 at 18 43 59" src="https://github.com/go-gitea/gitea/assets/115237/ce4bdb0d-6e25-4fd6-88f5-dc8f9e3093cd"> After: <img width="1016" alt="Screenshot 2024-03-15 at 19 02 04" src="https://github.com/go-gitea/gitea/assets/115237/4a6dd5a1-a5b4-4fc2-9835-05a0c2c58c42"> Before: <img width="1340" alt="Screenshot 2024-03-15 at 18 40 19" src="https://github.com/go-gitea/gitea/assets/115237/4465fa9c-d529-4a05-94d7-e21080e0a153"> After: <img width="1341" alt="Screenshot 2024-03-15 at 19 00 51" src="https://github.com/go-gitea/gitea/assets/115237/6595afef-592b-42c4-a6cd-196968ba5881"> (cherry picked from commit aa3012849ea59cdfb8464b0b71f28bffad19d54c)
2024-03-15 14:14:33 -04:00
--color-nav-hover-bg: var(--color-secondary-light-1);
Rename the default themes to gitea-light, gitea-dark, gitea-auto (#27419) Part of https://github.com/go-gitea/gitea/issues/27097: - `gitea` theme is renamed to `gitea-light` - `arc-green` theme is renamed to `gitea-dark` - `auto` theme is renamed to `gitea-auto` I put both themes in separate CSS files, removing all colors from the base CSS. Existing users will be migrated to the new theme names. The dark theme recolor will follow in a separate PR. ## :warning: BREAKING :warning: 1. If there are existing custom themes with the names `gitea-light` or `gitea-dark`, rename them before this upgrade and update the `theme` column in the `user` table for each affected user. 2. The theme in `<html>` has moved from `class="theme-name"` to `data-theme="name"`, existing customizations that depend on should be updated. --------- Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com> Co-authored-by: Giteabot <teabot@gitea.io>
2023-10-06 03:46:36 -04:00
--color-nav-text: var(--color-text);
[Port] gitea#29982 Introduce `.secondary-nav` and handle `.page-content` spacing universally Fixes: https://github.com/go-gitea/gitea/issues/29981. Introduce `.secondary-nav` as a universal way for styling and margin adjustments inside `.page-content`. If the first child of `.page-content` is `.secondary-nav`, we add margin below it, otherwise we add padding to the first child. Notable changes: - `--color-header-wrapper` is replaced with `--color-secondary-nav-bg`. - `navbar` class is removed. Co-authored-by: Giteabot <teabot@gitea.io> Co-authored-by: wxiaoguang <wxiaoguang@gmail.com> --- Conflict resolution: Trivial conflict & changed selector to reflect new classes. Ref: https://codeberg.org/forgejo/forgejo/issues/2776 (cherry picked from commit 3ccda41a539b8ba7841919ee12dc2877ddc03818)
2024-03-22 19:54:09 -04:00
--color-secondary-nav-bg: #f9fafb;
Lighten text colors on dark theme for increased contrast (#29481) Improve contrast by lightening the text colors in dark theme by around 35%. Additionally, share some variables that had the same or similar color, which will ease future theme creation. (cherry picked from commit e94e2fb6c5484070d56977644213d735df9e0c10)
2024-02-29 00:11:11 -05:00
--color-label-text: var(--color-text);
Light theme color enhancements (#29830) Same as https://github.com/go-gitea/gitea/pull/29822 but for light theme. Slight shift towards blue and made the themes match more, like on header and footer background. Before <img width="1342" alt="Screenshot 2024-03-16 at 00 43 03" src="https://github.com/go-gitea/gitea/assets/115237/b46021a1-241c-446a-b220-ca25cc90f3bf"> After <img width="1343" alt="Screenshot 2024-03-16 at 00 45 21" src="https://github.com/go-gitea/gitea/assets/115237/1c898875-a6bb-4bd3-b059-f82e1a145c99"> Before <img width="1018" alt="Screenshot 2024-03-16 at 00 43 13" src="https://github.com/go-gitea/gitea/assets/115237/d237ee7d-b4cc-4688-a074-1e96515ac475"> After <img width="1022" alt="Screenshot 2024-03-16 at 00 43 50" src="https://github.com/go-gitea/gitea/assets/115237/89b1da77-6bc9-4b38-9688-546e794aadfa"> (cherry picked from commit 68169133a3b0d29fe348ee065088d33f6dd1b087)
2024-03-15 21:33:01 -04:00
--color-label-bg: #949da64b;
--color-label-hover-bg: #949da6a0;
--color-label-active-bg: #949da6ff;
Rename the default themes to gitea-light, gitea-dark, gitea-auto (#27419) Part of https://github.com/go-gitea/gitea/issues/27097: - `gitea` theme is renamed to `gitea-light` - `arc-green` theme is renamed to `gitea-dark` - `auto` theme is renamed to `gitea-auto` I put both themes in separate CSS files, removing all colors from the base CSS. Existing users will be migrated to the new theme names. The dark theme recolor will follow in a separate PR. ## :warning: BREAKING :warning: 1. If there are existing custom themes with the names `gitea-light` or `gitea-dark`, rename them before this upgrade and update the `theme` column in the `user` table for each affected user. 2. The theme in `<html>` has moved from `class="theme-name"` to `data-theme="name"`, existing customizations that depend on should be updated. --------- Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com> Co-authored-by: Giteabot <teabot@gitea.io>
2023-10-06 03:46:36 -04:00
--color-accent: var(--color-primary-light-1);
--color-small-accent: var(--color-primary-light-6);
[Port] gitea#30014: Various code view improvements 1. Restore missing styles for message close icon 2. Move `code-line-button` so that it does not go off-screen on small viewports 3. Make `code-line-button` look and behave like other buttons 4. Make `code-line-button` work in blame 5. Make the active selection span the whole line, not just the code part 6. Tweak colors, make dark theme code bg darker, make line numbers same color in diff and file view. 7. Move code background to parent, fixing border radius and other problems 8. Enable code wrap in blame 9. Improve blame responsiveness 10. Remove `--color-code-sidebar-bg` in blame, now it uses same background as code 11. Rename `--color-active-line` to `--color-highlight-bg` 12. Add `--color-highlight-bg` 13. Fix button group borders on hover and border-right on last button. <img width="1343" alt="Screenshot 2024-03-23 at 22 34 13" src="https://github.com/go-gitea/gitea/assets/115237/fcbb919f-5dc3-43f0-97f6-870d6f412554"> <img width="1334" alt="Screenshot 2024-03-23 at 22 34 26" src="https://github.com/go-gitea/gitea/assets/115237/ca44c3b7-4328-4645-ba49-b0dc6a5ac06d"> <img width="1338" alt="Screenshot 2024-03-23 at 22 34 57" src="https://github.com/go-gitea/gitea/assets/115237/00eb0b5a-1ec7-4669-a94a-4602b9d1c1ac"> <img width="1337" alt="Screenshot 2024-03-23 at 22 34 42" src="https://github.com/go-gitea/gitea/assets/115237/752edc4a-064f-413c-9dff-c086187fcd85"> Fixes: https://github.com/go-gitea/gitea/issues/18074 --- Conflict resolution: Trivial. Ref: https://codeberg.org/forgejo/forgejo/issues/2776 (cherry picked from commit db01bf6cc88a8a7b5132b9306b3af1649566b10f)
2024-03-24 08:14:03 -04:00
--color-highlight-fg: #eed200;
--color-highlight-bg: #fffbdd;
Rename the default themes to gitea-light, gitea-dark, gitea-auto (#27419) Part of https://github.com/go-gitea/gitea/issues/27097: - `gitea` theme is renamed to `gitea-light` - `arc-green` theme is renamed to `gitea-dark` - `auto` theme is renamed to `gitea-auto` I put both themes in separate CSS files, removing all colors from the base CSS. Existing users will be migrated to the new theme names. The dark theme recolor will follow in a separate PR. ## :warning: BREAKING :warning: 1. If there are existing custom themes with the names `gitea-light` or `gitea-dark`, rename them before this upgrade and update the `theme` column in the `user` table for each affected user. 2. The theme in `<html>` has moved from `class="theme-name"` to `data-theme="name"`, existing customizations that depend on should be updated. --------- Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com> Co-authored-by: Giteabot <teabot@gitea.io>
2023-10-06 03:46:36 -04:00
--color-overlay-backdrop: #080808c0;
Replace imgage diff png background pattern with gradient (#3870) Made the checkerboard background be more flexible in terms of scale and coloring. Provides dark theme for image diff. I suppose these colors should not be re-used for a color-picker for a example, because it's usually more convenient to always have it in the light mode. ## Test * go to https://next.forgejo.org/image-test/image-diff/commit/e6d3623c7e0277e09cf9a19278b1259840fb268799d6b65100904ed82d6b05d2 * or migrate https://next.forgejo.org/image-test/image-diff to your local instance ## Before/after ![image](/attachments/3835a455-69e0-4aec-bc67-5b226d8016c1) (Old any - New Forgejo dark - New Gitea dark - New Forgejo/Gitea light) --- Gradient property is taken from [here](https://www.reddit.com/r/css/comments/u08pf3/how_to_make_a_checkerboard_using_background/). [CSS compatibility](https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/conic-gradient#browser_compatibility): about four years of browser versions. Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/3870 Reviewed-by: Mai-Lapyst <mai-lapyst@noreply.codeberg.org>
2024-05-24 13:33:13 -04:00
/* pattern colors for gradient */
--checkerboard-color-1: #ffffff;
--checkerboard-color-2: #e5e5e5;
Rename the default themes to gitea-light, gitea-dark, gitea-auto (#27419) Part of https://github.com/go-gitea/gitea/issues/27097: - `gitea` theme is renamed to `gitea-light` - `arc-green` theme is renamed to `gitea-dark` - `auto` theme is renamed to `gitea-auto` I put both themes in separate CSS files, removing all colors from the base CSS. Existing users will be migrated to the new theme names. The dark theme recolor will follow in a separate PR. ## :warning: BREAKING :warning: 1. If there are existing custom themes with the names `gitea-light` or `gitea-dark`, rename them before this upgrade and update the `theme` column in the `user` table for each affected user. 2. The theme in `<html>` has moved from `class="theme-name"` to `data-theme="name"`, existing customizations that depend on should be updated. --------- Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com> Co-authored-by: Giteabot <teabot@gitea.io>
2023-10-06 03:46:36 -04:00
accent-color: var(--color-accent);
color-scheme: light;
}
Copy permalink