From 548febcbc7af50e8f33c393d481fa253f27aa795 Mon Sep 17 00:00:00 2001 From: Sascha Date: Tue, 2 Mar 2021 13:29:36 +0100 Subject: Define each theme in own file under themes dir --- webui/src/themes/DefaultDark.ts | 12 ++++++++++++ 1 file changed, 12 insertions(+) create mode 100644 webui/src/themes/DefaultDark.ts (limited to 'webui/src/themes/DefaultDark.ts') diff --git a/webui/src/themes/DefaultDark.ts b/webui/src/themes/DefaultDark.ts new file mode 100644 index 00000000..8d961caa --- /dev/null +++ b/webui/src/themes/DefaultDark.ts @@ -0,0 +1,12 @@ +import { createMuiTheme } from '@material-ui/core/styles'; + +const defaultDarkTheme = createMuiTheme({ + palette: { + type: 'dark', + primary: { + main: '#263238', + }, + }, +}); + +export default defaultDarkTheme; -- cgit From 9f6dcc887d31ce5c9cb5438b4e0e6c834c9d81d6 Mon Sep 17 00:00:00 2001 From: Sascha Date: Tue, 2 Mar 2021 17:13:11 +0100 Subject: Use proper semantic color values Adjust header colors on light theme - Use adjusted background-color for header instead of text.hint. - Use slightly darker secondary font color for better readability against the head background color. Use more semantic theme colors for bug list Use more semantic theme colors for bug messages Fix usage of text hint for filter header --- webui/src/themes/DefaultDark.ts | 8 ++++++++ 1 file changed, 8 insertions(+) (limited to 'webui/src/themes/DefaultDark.ts') diff --git a/webui/src/themes/DefaultDark.ts b/webui/src/themes/DefaultDark.ts index 8d961caa..fe31f211 100644 --- a/webui/src/themes/DefaultDark.ts +++ b/webui/src/themes/DefaultDark.ts @@ -5,6 +5,14 @@ const defaultDarkTheme = createMuiTheme({ type: 'dark', primary: { main: '#263238', + light: '#525252', + }, + error: { + main: '#f44336', + dark: '#ff4949', + }, + info: { + main: '#2a393e', }, }, }); -- cgit From 8e8ca99bd5f72de60f6e0e1b334f33312cab5388 Mon Sep 17 00:00:00 2001 From: Sascha Date: Wed, 3 Mar 2021 17:49:53 +0100 Subject: Use colors from theme palette - Use theme colors for title input. - Remove inputTitle classes as they are not applied to the TextField. This will lead to double borders and artifacts at the field corners. --- webui/src/themes/DefaultDark.ts | 5 +++++ 1 file changed, 5 insertions(+) (limited to 'webui/src/themes/DefaultDark.ts') diff --git a/webui/src/themes/DefaultDark.ts b/webui/src/themes/DefaultDark.ts index fe31f211..77871a51 100644 --- a/webui/src/themes/DefaultDark.ts +++ b/webui/src/themes/DefaultDark.ts @@ -15,6 +15,11 @@ const defaultDarkTheme = createMuiTheme({ main: '#2a393e', }, }, + typography: { + button: { + textTransform: 'none', + }, + }, }); export default defaultDarkTheme; -- cgit From 41c3e6ed043a153f2a995c09b8e6261d71f6c155 Mon Sep 17 00:00:00 2001 From: Sascha Date: Thu, 4 Mar 2021 13:56:25 +0100 Subject: Use Green color from Light theme --- webui/src/themes/DefaultDark.ts | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) (limited to 'webui/src/themes/DefaultDark.ts') diff --git a/webui/src/themes/DefaultDark.ts b/webui/src/themes/DefaultDark.ts index 77871a51..27170ff0 100644 --- a/webui/src/themes/DefaultDark.ts +++ b/webui/src/themes/DefaultDark.ts @@ -14,10 +14,9 @@ const defaultDarkTheme = createMuiTheme({ info: { main: '#2a393e', }, - }, - typography: { - button: { - textTransform: 'none', + success: { + main: '#2ea44fd9', + contrastText: '#fff', }, }, }); -- cgit From 79422fafb28294ad1e2ae6fe25a6d2788f57d3af Mon Sep 17 00:00:00 2001 From: Sascha Date: Thu, 4 Mar 2021 14:08:59 +0100 Subject: Use info.contrastText instead of text.secondary This will ensure better color managment for Message titles --- webui/src/themes/DefaultDark.ts | 1 + 1 file changed, 1 insertion(+) (limited to 'webui/src/themes/DefaultDark.ts') diff --git a/webui/src/themes/DefaultDark.ts b/webui/src/themes/DefaultDark.ts index 27170ff0..6a92ec49 100644 --- a/webui/src/themes/DefaultDark.ts +++ b/webui/src/themes/DefaultDark.ts @@ -13,6 +13,7 @@ const defaultDarkTheme = createMuiTheme({ }, info: { main: '#2a393e', + contrastText: '#ffffffb3', }, success: { main: '#2ea44fd9', -- cgit From de26990afc9f21a9017b039ba9d7546a8d8ea5da Mon Sep 17 00:00:00 2001 From: Sascha Date: Thu, 11 Mar 2021 12:47:09 +0100 Subject: Adjust BackToList button color for dark/light-mode The AppBar is commonly used for navigation. As the BackToList button is a navigation element, use similar colors as the AppBar. --- webui/src/themes/DefaultDark.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'webui/src/themes/DefaultDark.ts') diff --git a/webui/src/themes/DefaultDark.ts b/webui/src/themes/DefaultDark.ts index 6a92ec49..65dd6329 100644 --- a/webui/src/themes/DefaultDark.ts +++ b/webui/src/themes/DefaultDark.ts @@ -4,7 +4,8 @@ const defaultDarkTheme = createMuiTheme({ palette: { type: 'dark', primary: { - main: '#263238', + dark: '#263238', + main: '#2a393e', light: '#525252', }, error: { -- cgit