references/openproject
1
0
Fork 0
mirror of https://github.com/opf/openproject.git synced 2026-06-14 03:30:14 +00:00
Code Issues Packages Projects Releases Wiki Activity

Enable dark mode in personal settings

Browse Source
This commit is contained in:
Henriette Darge
2024-03-14 17:45:27 +01:00
parent e3275c6572
commit 14da063cde
5 changed files with 19 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/helpers/application_helper.rb
+3 -2
View File
@@ -279,8 +279,9 @@ module ApplicationHelper
def theme_options_for_select
[
[t('themes.light'), 'light'],
[t('themes.light_high_contrast'), 'light_high_contrast']
[t("themes.light"), "light"],
[t("themes.light_high_contrast"), "light_high_contrast"],
[t("themes.dark"), "dark"]
]
end
app/views/custom_styles/_primer_color_mapping.erb
+2 -1
View File
@@ -13,7 +13,8 @@
--button-primary-bgColor-rest: var(--button--primary-background-color) !important;
--button-primary-bgColor-hover: var(--button--primary-background-hover-color) !important;
}
[data-light-theme=light_high_contrast]{
[data-light-theme=light_high_contrast],
[data-light-theme=dark] {
--avatar-border-color: var(--color-avatar-border);
--list-item-hover--border-color: var(--color-action-list-item-default-active-border);
--list-item-hover--color: var(--color-fg-default);
config/locales/en.yml
+1
View File
@@ -431,6 +431,7 @@ en:
no_results_content_text: Add a new status
themes:
dark: "Dark"
light: "Light"
light_high_contrast: "Light high contrast"
config/schemas/user_preferences.schema.json
+1 -1
View File
@@ -14,7 +14,7 @@
},
"theme": {
"type": "string",
"enum": ["light", "light_high_contrast"]
"enum": ["light", "light_high_contrast", "dark"]
},
"warn_on_leaving_unsaved": {
"type": "boolean"
frontend/src/app/shared/components/colors/colors.service.ts
+12 -1
View File
@@ -3,6 +3,7 @@ import { Injectable } from '@angular/core';
export const colorModes = {
lightHighContrast: 'lightHighContrast',
light: 'light',
dark: 'dark',
};
@Injectable({ providedIn: 'root' })
@@ -25,6 +26,16 @@ export class ColorsService {
}
public colorMode():string {
return document.body.getAttribute('data-light-theme') === 'light_high_contrast' ? colorModes.lightHighContrast : colorModes.light;
switch (document.body.getAttribute('data-light-theme')) {
case 'light_high_contrast':
return colorModes.lightHighContrast;
case 'dark':
return colorModes.dark;
case 'light':
return colorModes.light;
default: {
return colorModes.light;
}
}
}
}