From a19d12c03a759d1ff6d478af0177937ba8eb3fd6 Mon Sep 17 00:00:00 2001 From: Allan Date: Thu, 14 Nov 2024 22:06:32 +0000 Subject: [PATCH 01/10] - start themeing dark --- src/style/_dark.scss | 35 +++++++++++++++++++++++++++++++++++ src/style/main.scss | 1 + 2 files changed, 36 insertions(+) create mode 100644 src/style/_dark.scss diff --git a/src/style/_dark.scss b/src/style/_dark.scss new file mode 100644 index 00000000000..61d27e48d15 --- /dev/null +++ b/src/style/_dark.scss @@ -0,0 +1,35 @@ +// Remember, we are working under the parent class of "swagger-ui" + +$text_light_1: #fff; +$text_light_2: #f1f1f1e5; +$text_light_3: #f1f1f16e; + +$background_main: #1a191e; +$background_topBar: #222129; +$background_body: #0f0e14; +$background_schemeCont: #020104; + + + + + +&.swagger-container { + color: $text_light_2; + background: $background_main; +} + +.info h1, .info h2, .info h3, +.info h4, .info h5, .info .title { + color: $text_light_1; +} + +.topbar { + background: $background_topBar; + .download-url-wrapper .download-url-button { + color: $text_light_2; + } + + .scheme-container { + background: $background_schemeCont; + } +} diff --git a/src/style/main.scss b/src/style/main.scss index 413786180c3..94d19cb4000 100644 --- a/src/style/main.scss +++ b/src/style/main.scss @@ -18,6 +18,7 @@ @include text_body(); @import 'split-pane-mode'; @import 'markdown'; + @import 'dark'; @import '../core/plugins/json-schema-2020-12/components/all'; @import '../core/plugins/oas31/components/all'; } From cd699656476a92d01e2a1ecf0705e00cb42610d6 Mon Sep 17 00:00:00 2001 From: Allan Date: Thu, 14 Nov 2024 22:12:26 +0000 Subject: [PATCH 02/10] - continue --- src/style/_dark.scss | 29 +++++++++++++++++++++-------- 1 file changed, 21 insertions(+), 8 deletions(-) diff --git a/src/style/_dark.scss b/src/style/_dark.scss index 61d27e48d15..7daffbb3ceb 100644 --- a/src/style/_dark.scss +++ b/src/style/_dark.scss @@ -7,7 +7,7 @@ $text_light_3: #f1f1f16e; $background_main: #1a191e; $background_topBar: #222129; $background_body: #0f0e14; -$background_schemeCont: #020104; +$background_schemeCont: #16151a; @@ -16,20 +16,33 @@ $background_schemeCont: #020104; &.swagger-container { color: $text_light_2; background: $background_main; -} -.info h1, .info h2, .info h3, -.info h4, .info h5, .info .title { - color: $text_light_1; + .info h1, .info h2, .info h3, + .info h4, .info h5, .info .title { + color: $text_light_1; + } + .swagger-ui .info li, .swagger-ui .info p, .swagger-ui .info table { + color: $text_light_2; + } + + .opblock-tag small { + color: $text_light_1; + } + + } + + + + .topbar { background: $background_topBar; .download-url-wrapper .download-url-button { color: $text_light_2; } +} - .scheme-container { - background: $background_schemeCont; - } +.scheme-container { + background: $background_schemeCont; } From 83b2cf30e99acfd2b7fe1440d436104ab948052c Mon Sep 17 00:00:00 2001 From: Allan Date: Fri, 15 Nov 2024 08:49:15 +0000 Subject: [PATCH 03/10] - move scss outside of .swagger-ui to target all page elements --- src/style/{_dark.scss => _themeDark.scss} | 29 ++++++++++------------- src/style/main.scss | 4 +++- 2 files changed, 16 insertions(+), 17 deletions(-) rename src/style/{_dark.scss => _themeDark.scss} (70%) diff --git a/src/style/_dark.scss b/src/style/_themeDark.scss similarity index 70% rename from src/style/_dark.scss rename to src/style/_themeDark.scss index 7daffbb3ceb..a1d40d7ae80 100644 --- a/src/style/_dark.scss +++ b/src/style/_themeDark.scss @@ -9,11 +9,11 @@ $background_topBar: #222129; $background_body: #0f0e14; $background_schemeCont: #16151a; +html { + background: $background_body; +} - - - -&.swagger-container { +.swagger-ui { color: $text_light_2; background: $background_main; @@ -29,20 +29,17 @@ $background_schemeCont: #16151a; color: $text_light_1; } - -} - - - + .opblock-control-arrow svg { + fill: $text_light_2; + } -.topbar { - background: $background_topBar; - .download-url-wrapper .download-url-button { - color: $text_light_2; + .topbar { + background: $background_topBar; + .download-url-wrapper .download-url-button { + color: $text_light_2; + } } } -.scheme-container { - background: $background_schemeCont; -} + diff --git a/src/style/main.scss b/src/style/main.scss index 94d19cb4000..28e6d9f7e9a 100644 --- a/src/style/main.scss +++ b/src/style/main.scss @@ -18,7 +18,9 @@ @include text_body(); @import 'split-pane-mode'; @import 'markdown'; - @import 'dark'; @import '../core/plugins/json-schema-2020-12/components/all'; @import '../core/plugins/oas31/components/all'; } + +// Themes must live outside of the '.swagger-ui' class to target HTML parent. +@import 'themeDark'; From d0bb934d3bad625c807bf590d1b201d39cd7cd31 Mon Sep 17 00:00:00 2001 From: Allan Date: Fri, 15 Nov 2024 10:08:22 +0000 Subject: [PATCH 04/10] - more styling, more darkness --- src/style/_themeDark.scss | 152 +++++++++++++++++++++++++++++++++++--- 1 file changed, 142 insertions(+), 10 deletions(-) diff --git a/src/style/_themeDark.scss b/src/style/_themeDark.scss index a1d40d7ae80..b68dec355f6 100644 --- a/src/style/_themeDark.scss +++ b/src/style/_themeDark.scss @@ -1,6 +1,6 @@ // Remember, we are working under the parent class of "swagger-ui" -$text_light_1: #fff; +$text_light_1: #ffffffde; $text_light_2: #f1f1f1e5; $text_light_3: #f1f1f16e; @@ -9,36 +9,168 @@ $background_topBar: #222129; $background_body: #0f0e14; $background_schemeCont: #16151a; +$opblock_post_background: #0025142e; +$opblock_post_border: #09633a; +$opblock_post_section: #16231f99; + +$opblock_deprecated_background: #242129; +$opblock_deprecated_border: #605d67; +$opblock_deprecated_section: #1f2a2b; + +$opblock_put_background: #a1661e1f; +$opblock_put_border: #fca13096; +$opblock_put_section: #1f2a2b; + +$opblock_get_background: #3f78b31f; +$opblock_get_border: #5a99d99c; +$opblock_get_section: #5a99d99c; + + +$models_background: #1f2027; +$models_border: #4b507175; +$models_item_background: #2e2e35d9; +$models_item_hover: #37373f; + + html { - background: $background_body; + background: $background_main; } .swagger-ui { color: $text_light_2; background: $background_main; + // expand/colapse icon + .expand-operation { + fill: $text_light_2; + } + + + // Text color changes. + a.nostyle, a.nostyle:visited, .opblock-tag small { + color: $text_light_1; + } .info h1, .info h2, .info h3, .info h4, .info h5, .info .title { color: $text_light_1; } - .swagger-ui .info li, .swagger-ui .info p, .swagger-ui .info table { + + .info li, .info p, .info table { color: $text_light_2; } - .opblock-tag small { - color: $text_light_1; + // Top + .topbar { + background: $background_topBar; + .download-url-wrapper .download-url-button { + color: $text_light_2; + } } - .opblock-control-arrow svg { - fill: $text_light_2; + // Information section + .info .base-url { + color: $text_light_3; } + // scheme + .scheme-container { + background: $background_schemeCont; + .schemes >.schemes-server-container > label { + color: $text_light_2; + } + } - .topbar { - background: $background_topBar; - .download-url-wrapper .download-url-button { + table thead tr td, table thead tr th { + color: $text_light_2; + } + + // OPblock represents a Req type. + .opblock { + &.opblock-post { + background: $opblock_post_background; + border-color: $opblock_post_border; + .opblock-section-header { + background-color: $opblock_post_section; + } + } + &.opblock-deprecated { + background: $opblock_deprecated_background; + border-color: $opblock_deprecated_border; + .opblock-section-header { + background-color: $opblock_deprecated_section; + } + } + &.opblock-put { + background: $opblock_put_background; + border-color: $opblock_put_border; + .opblock-section-header { + background-color: $opblock_put_section; + } + } + &.opblock-get { + background: $opblock_get_background; + border-color: $opblock_get_border; + .opblock-section-header { + background-color: $opblock_get_section; + } + } + + .opblock-section-header h4 { + color: $text_light_1; + } + + .opblock-summary-operation-id, + .opblock-summary-path, + .opblock-summary-path__deprecated, + .opblock-tag small { color: $text_light_2; } + .opblock-summary-description { + color: $text_light_3; + } + .description-wrapper, .opblock-external-docs-wrapper, .opblock-title_normal { + color: $text_light_3; + } + + // response from req + .response-col_status { + color: $text_light_2; + } + + + + // Recolor SVG icons for contrast. + .authorization__btn svg, + .expand-operation svg, + .opblock-control-arrow svg { + fill: $text_light_2; + } + } + + section.models { + background: $models_background; + border-color: $models_border; + h4 span, + .model-title { + color: $text_light_1; + } + .models-control svg { + fill: $text_light_2; + } + .model-container { + background: $models_item_background; + &:hover { + background: $models_item_hover; + } + .model { + color: $text_light_3; + } + } + } + + // Remove outline from selected "button" on expanding item + .model-box-control:focus, .models-control:focus, .opblock-summary-control:focus { + outline: none; } } From 862574c0c3ed23148d2608f732ee6328e3d41360 Mon Sep 17 00:00:00 2001 From: Allan Date: Fri, 15 Nov 2024 10:28:11 +0000 Subject: [PATCH 05/10] - I believe the theme is finished --- src/style/_themeDark.scss | 93 ++++++++++++++++++++++++++++++++------- 1 file changed, 77 insertions(+), 16 deletions(-) diff --git a/src/style/_themeDark.scss b/src/style/_themeDark.scss index b68dec355f6..7afe1c92e14 100644 --- a/src/style/_themeDark.scss +++ b/src/style/_themeDark.scss @@ -4,7 +4,7 @@ $text_light_1: #ffffffde; $text_light_2: #f1f1f1e5; $text_light_3: #f1f1f16e; -$background_main: #1a191e; +$background_main: #141316; $background_topBar: #222129; $background_body: #0f0e14; $background_schemeCont: #16151a; @@ -13,23 +13,28 @@ $opblock_post_background: #0025142e; $opblock_post_border: #09633a; $opblock_post_section: #16231f99; -$opblock_deprecated_background: #242129; -$opblock_deprecated_border: #605d67; -$opblock_deprecated_section: #1f2a2b; +$opblock_deprecated_background: #1b161e; +$opblock_deprecated_border: #594d69; +$opblock_deprecated_section: #29242f; $opblock_put_background: #a1661e1f; $opblock_put_border: #fca13096; -$opblock_put_section: #1f2a2b; +$opblock_put_section: #412d24; $opblock_get_background: #3f78b31f; $opblock_get_border: #5a99d99c; -$opblock_get_section: #5a99d99c; +$opblock_get_section: #355d855e; +$opblock_delete_background: #77191933; +$opblock_delete_border: #993434; +$opblock_delete_section: #511c1ccc; -$models_background: #1f2027; -$models_border: #4b507175; -$models_item_background: #2e2e35d9; -$models_item_hover: #37373f; + + +$models_background: #1f2027; +$models_border: #4b507175; +$models_item_background: #2e2e35d9; +$models_item_hover: #37373f; html { @@ -92,6 +97,9 @@ html { .opblock-section-header { background-color: $opblock_post_section; } + .opblock-summary { + border-color: $opblock_post_border; + } } &.opblock-deprecated { background: $opblock_deprecated_background; @@ -99,6 +107,9 @@ html { .opblock-section-header { background-color: $opblock_deprecated_section; } + .opblock-summary { + border-color: $opblock_deprecated_border; + } } &.opblock-put { background: $opblock_put_background; @@ -106,6 +117,9 @@ html { .opblock-section-header { background-color: $opblock_put_section; } + .opblock-summary { + border-color: $opblock_put_border; + } } &.opblock-get { background: $opblock_get_background; @@ -113,12 +127,41 @@ html { .opblock-section-header { background-color: $opblock_get_section; } + .opblock-summary { + border-color: $opblock_get_border; + } + } + &.opblock-delete { + background: $opblock_delete_background; + border-color: $opblock_delete_border; + .opblock-section-header { + background-color: $opblock_delete_section; + } + .opblock-summary { + border-color: $opblock_delete_border; + } } - .opblock-section-header h4 { - color: $text_light_1; + .opblock-section-header { + h4 { + color: $text_light_1; + } + label { + color: $text_light_3; + } + .btn { + color: $text_light_2; + border-color: $text_light_3; + box-shadow: none; + } + } + + .markdown p, .markdown pre, .renderedMarkdown p, .renderedMarkdown pre { + color: $text_light_2; } + + .opblock-summary-operation-id, .opblock-summary-path, .opblock-summary-path__deprecated, @@ -132,6 +175,18 @@ html { color: $text_light_3; } + + // params + .parameter__name { + color: $text_light_1; + } + .parameter__type { + color: $text_light_2; + } + .parameter__in { + color: $text_light_3; + } + // response from req .response-col_status { color: $text_light_2; @@ -139,15 +194,21 @@ html { + // Recolor SVG icons for contrast. .authorization__btn svg, .expand-operation svg, .opblock-control-arrow svg { fill: $text_light_2; } + + .tab li button.tablinks { + color: $text_light_3; + } } - section.models { + section.models, + .model-box { background: $models_background; border-color: $models_border; h4 span, @@ -162,9 +223,9 @@ html { &:hover { background: $models_item_hover; } - .model { - color: $text_light_3; - } + } + .model { + color: $text_light_3; } } From 4fe136834039916ef2a3bee3cdcdcc7149710b0a Mon Sep 17 00:00:00 2001 From: Allan Date: Fri, 15 Nov 2024 10:51:13 +0000 Subject: [PATCH 06/10] - refactor theme, make more legible --- src/style/_themeDark.scss | 247 +++++++++++++------------------------- 1 file changed, 85 insertions(+), 162 deletions(-) diff --git a/src/style/_themeDark.scss b/src/style/_themeDark.scss index 7afe1c92e14..9f4f4824b8e 100644 --- a/src/style/_themeDark.scss +++ b/src/style/_themeDark.scss @@ -1,238 +1,161 @@ -// Remember, we are working under the parent class of "swagger-ui" - -$text_light_1: #ffffffde; -$text_light_2: #f1f1f1e5; -$text_light_3: #f1f1f16e; +// Variables for consistent theme +$text_color_1: #ffffffde; +$text_color_2: #f1f1f1e5; +$text_color_3: #f1f1f16e; $background_main: #141316; $background_topBar: #222129; $background_body: #0f0e14; $background_schemeCont: #16151a; -$opblock_post_background: #0025142e; -$opblock_post_border: #09633a; -$opblock_post_section: #16231f99; - -$opblock_deprecated_background: #1b161e; -$opblock_deprecated_border: #594d69; -$opblock_deprecated_section: #29242f; - -$opblock_put_background: #a1661e1f; -$opblock_put_border: #fca13096; -$opblock_put_section: #412d24; - -$opblock_get_background: #3f78b31f; -$opblock_get_border: #5a99d99c; -$opblock_get_section: #355d855e; - -$opblock_delete_background: #77191933; -$opblock_delete_border: #993434; -$opblock_delete_section: #511c1ccc; - - - -$models_background: #1f2027; -$models_border: #4b507175; -$models_item_background: #2e2e35d9; -$models_item_hover: #37373f; - +$opblock_colors: ( + post: (#0025142e, #09633a, #16231f99), + deprecated: (#1b161e, #594d69, #29242f), + put: (#a1661e1f, #fca13096, #412d24), + get: (#3f78b31f, #5a99d99c, #355d855e), + delete: (#77191933, #993434, #511c1ccc), +); + +$models_colors: ( + background: #1f2027, + border: #4b507175, + item_background: #2e2e35d9, + item_hover: #37373f, +); html { background: $background_main; } .swagger-ui { - color: $text_light_2; + color: $text_color_2; background: $background_main; - // expand/colapse icon - .expand-operation { - fill: $text_light_2; + .expand-operation, + .authorization__btn svg, + .expand-operation svg, + .opblock-control-arrow svg { + fill: $text_color_2; } - - // Text color changes. - a.nostyle, a.nostyle:visited, .opblock-tag small { - color: $text_light_1; - } - .info h1, .info h2, .info h3, - .info h4, .info h5, .info .title { - color: $text_light_1; + a.nostyle, + a.nostyle:visited, + .opblock-tag small { + color: $text_color_1; } - .info li, .info p, .info table { - color: $text_light_2; + .info { + h1, h2, h3, h4, h5, .title { + color: $text_color_1; + } + li, p, table { + color: $text_color_2; + } + .base-url { + color: $text_color_3; + } } - // Top .topbar { background: $background_topBar; .download-url-wrapper .download-url-button { - color: $text_light_2; + color: $text_color_2; } } - // Information section - .info .base-url { - color: $text_light_3; - } - - // scheme .scheme-container { background: $background_schemeCont; - .schemes >.schemes-server-container > label { - color: $text_light_2; + .schemes > .schemes-server-container > label { + color: $text_color_2; } } - table thead tr td, table thead tr th { - color: $text_light_2; + table thead tr { + td, th { + color: $text_color_2; + } } - // OPblock represents a Req type. - .opblock { - &.opblock-post { - background: $opblock_post_background; - border-color: $opblock_post_border; - .opblock-section-header { - background-color: $opblock_post_section; - } - .opblock-summary { - border-color: $opblock_post_border; - } - } - &.opblock-deprecated { - background: $opblock_deprecated_background; - border-color: $opblock_deprecated_border; - .opblock-section-header { - background-color: $opblock_deprecated_section; - } - .opblock-summary { - border-color: $opblock_deprecated_border; - } - } - &.opblock-put { - background: $opblock_put_background; - border-color: $opblock_put_border; - .opblock-section-header { - background-color: $opblock_put_section; - } - .opblock-summary { - border-color: $opblock_put_border; - } - } - &.opblock-get { - background: $opblock_get_background; - border-color: $opblock_get_border; - .opblock-section-header { - background-color: $opblock_get_section; - } - .opblock-summary { - border-color: $opblock_get_border; - } - } - &.opblock-delete { - background: $opblock_delete_background; - border-color: $opblock_delete_border; + // OPblock styles + @each $type, $colors in $opblock_colors { + .opblock-#{$type} { + background: nth($colors, 1); + border-color: nth($colors, 2); .opblock-section-header { - background-color: $opblock_delete_section; + background-color: nth($colors, 3); } .opblock-summary { - border-color: $opblock_delete_border; + border-color: nth($colors, 2); } } + } + .opblock { .opblock-section-header { h4 { - color: $text_light_1; + color: $text_color_1; } label { - color: $text_light_3; + color: $text_color_3; } .btn { - color: $text_light_2; - border-color: $text_light_3; + color: $text_color_2; + border-color: $text_color_3; box-shadow: none; } } - .markdown p, .markdown pre, .renderedMarkdown p, .renderedMarkdown pre { - color: $text_light_2; + .markdown p, + .markdown pre, + .renderedMarkdown p, + .renderedMarkdown pre { + color: $text_color_2; } - - .opblock-summary-operation-id, .opblock-summary-path, .opblock-summary-path__deprecated, - .opblock-tag small { - color: $text_light_2; - } - .opblock-summary-description { - color: $text_light_3; - } - .description-wrapper, .opblock-external-docs-wrapper, .opblock-title_normal { - color: $text_light_3; - } - - - // params - .parameter__name { - color: $text_light_1; - } - .parameter__type { - color: $text_light_2; - } - .parameter__in { - color: $text_light_3; - } - - // response from req + .opblock-summary-description, + .description-wrapper, + .opblock-external-docs-wrapper, + .opblock-title_normal, + .parameter__name, + .parameter__type, + .parameter__in, .response-col_status { - color: $text_light_2; - } - - - - - // Recolor SVG icons for contrast. - .authorization__btn svg, - .expand-operation svg, - .opblock-control-arrow svg { - fill: $text_light_2; - } - - .tab li button.tablinks { - color: $text_light_3; + color: $text_color_3; } } section.models, .model-box { - background: $models_background; - border-color: $models_border; + background: map-get($models_colors, background); + border-color: map-get($models_colors, border); + h4 span, .model-title { - color: $text_light_1; + color: $text_color_1; } + .models-control svg { - fill: $text_light_2; + fill: $text_color_2; } + .model-container { - background: $models_item_background; + background: map-get($models_colors, item_background); &:hover { - background: $models_item_hover; + background: map-get($models_colors, item_hover); } } + .model { - color: $text_light_3; + color: $text_color_3; } } - // Remove outline from selected "button" on expanding item - .model-box-control:focus, .models-control:focus, .opblock-summary-control:focus { + .model-box-control:focus, + .models-control:focus, + .opblock-summary-control:focus { outline: none; } } - - From 70a382dfba6da620fea674cdef59ab2dc65f5c68 Mon Sep 17 00:00:00 2001 From: Allan Date: Fri, 15 Nov 2024 11:59:17 +0000 Subject: [PATCH 07/10] - restrict topbar to 600px width --- src/style/_topbar.scss | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/style/_topbar.scss b/src/style/_topbar.scss index da3196030f1..a1c77a86c87 100644 --- a/src/style/_topbar.scss +++ b/src/style/_topbar.scss @@ -45,6 +45,8 @@ display: flex; flex: 3; justify-content: flex-end; + max-width: 600px; + margin-left: auto; input[type=text] { From 5eb13da5b6f350eeef2f111d3f3cb14aa139cd67 Mon Sep 17 00:00:00 2001 From: Allan Date: Fri, 15 Nov 2024 12:33:48 +0000 Subject: [PATCH 08/10] - Add SVG icons - Add DarkMode component - Add darkmode comp styling --- .../plugins/top-bar/assets/lightbulb-off.svg | 1 + .../plugins/top-bar/assets/lightbulb.svg | 1 + .../plugins/top-bar/components/DarkMode.jsx | 27 +++ .../plugins/top-bar/components/TopBar.jsx | 2 + src/standalone/plugins/top-bar/index.js | 3 +- src/style/_themeDark.scss | 211 +++++++++--------- src/style/_topbar.scss | 19 +- 7 files changed, 159 insertions(+), 105 deletions(-) create mode 100644 src/standalone/plugins/top-bar/assets/lightbulb-off.svg create mode 100644 src/standalone/plugins/top-bar/assets/lightbulb.svg create mode 100644 src/standalone/plugins/top-bar/components/DarkMode.jsx diff --git a/src/standalone/plugins/top-bar/assets/lightbulb-off.svg b/src/standalone/plugins/top-bar/assets/lightbulb-off.svg new file mode 100644 index 00000000000..19b398fa6a7 --- /dev/null +++ b/src/standalone/plugins/top-bar/assets/lightbulb-off.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/standalone/plugins/top-bar/assets/lightbulb.svg b/src/standalone/plugins/top-bar/assets/lightbulb.svg new file mode 100644 index 00000000000..d9bfec1b070 --- /dev/null +++ b/src/standalone/plugins/top-bar/assets/lightbulb.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/standalone/plugins/top-bar/components/DarkMode.jsx b/src/standalone/plugins/top-bar/components/DarkMode.jsx new file mode 100644 index 00000000000..b769df768d8 --- /dev/null +++ b/src/standalone/plugins/top-bar/components/DarkMode.jsx @@ -0,0 +1,27 @@ +/** + * @prettier + */ +import React, { useState, useCallback } from "react" +import LightBulb from "../assets/lightbulb.svg" +import LightBulbOff from "../assets/lightbulb-off.svg" + +const LightBulbIcon = () => { + const [isDarkMode, setIsDarkMode] = useState(false) + + const toggleDarkMode = useCallback(() => { + document.documentElement.classList.toggle("dark") + setIsDarkMode((prevState) => !prevState) // Toggle the state + }, []) + + return ( +
+ {!isDarkMode ? ( + + ) : ( + + )} +
+ ) +} + +export default LightBulbIcon diff --git a/src/standalone/plugins/top-bar/components/TopBar.jsx b/src/standalone/plugins/top-bar/components/TopBar.jsx index 1344d347939..16e512980a4 100644 --- a/src/standalone/plugins/top-bar/components/TopBar.jsx +++ b/src/standalone/plugins/top-bar/components/TopBar.jsx @@ -113,6 +113,7 @@ class TopBar extends React.Component { const Button = getComponent("Button") const Link = getComponent("Link") const Logo = getComponent("Logo") + const DarkMode = getComponent("DarkMode") let isLoading = specSelectors.loadingStatus() === "loading" let isFailed = specSelectors.loadingStatus() === "failed" @@ -164,6 +165,7 @@ class TopBar extends React.Component {
{control.map((el, i) => cloneElement(el, { key: i }))}
+ diff --git a/src/standalone/plugins/top-bar/index.js b/src/standalone/plugins/top-bar/index.js index 03092fc692d..b46592bbe81 100644 --- a/src/standalone/plugins/top-bar/index.js +++ b/src/standalone/plugins/top-bar/index.js @@ -3,9 +3,10 @@ */ import TopBar from "./components/TopBar" import Logo from "./components/Logo" +import DarkMode from "./components/DarkMode" const TopBarPlugin = () => ({ - components: { Topbar: TopBar, Logo }, + components: { Topbar: TopBar, Logo, DarkMode }, }) export default TopBarPlugin diff --git a/src/style/_themeDark.scss b/src/style/_themeDark.scss index 9f4f4824b8e..5bdd93a6c96 100644 --- a/src/style/_themeDark.scss +++ b/src/style/_themeDark.scss @@ -23,139 +23,150 @@ $models_colors: ( item_hover: #37373f, ); -html { +html.dark { background: $background_main; -} -.swagger-ui { - color: $text_color_2; - background: $background_main; - .expand-operation, - .authorization__btn svg, - .expand-operation svg, - .opblock-control-arrow svg { - fill: $text_color_2; - } + .swagger-ui { + color: $text_color_2; + background: $background_main; - a.nostyle, - a.nostyle:visited, - .opblock-tag small { - color: $text_color_1; - } + .expand-operation, + .authorization__btn svg, + .expand-operation svg, + .opblock-control-arrow svg { + fill: $text_color_2; + } - .info { - h1, h2, h3, h4, h5, .title { + a.nostyle, + a.nostyle:visited, + .opblock-tag small { color: $text_color_1; } - li, p, table { - color: $text_color_2; - } - .base-url { - color: $text_color_3; - } - } - .topbar { - background: $background_topBar; - .download-url-wrapper .download-url-button { - color: $text_color_2; + .info { + h1, h2, h3, h4, h5, .title { + color: $text_color_1; + } + li, p, table { + color: $text_color_2; + } + .base-url { + color: $text_color_3; + } } - } - .scheme-container { - background: $background_schemeCont; - .schemes > .schemes-server-container > label { - color: $text_color_2; + .topbar { + background: $background_topBar; + .download-url-wrapper .download-url-button { + color: $text_color_2; + } } - } - table thead tr { - td, th { - color: $text_color_2; + .scheme-container { + background: $background_schemeCont; + .schemes > .schemes-server-container > label { + color: $text_color_2; + } } - } - // OPblock styles - @each $type, $colors in $opblock_colors { - .opblock-#{$type} { - background: nth($colors, 1); - border-color: nth($colors, 2); - .opblock-section-header { - background-color: nth($colors, 3); + table thead tr { + td, th { + color: $text_color_2; } - .opblock-summary { + } + + // OPblock styles + @each $type, $colors in $opblock_colors { + .opblock-#{$type} { + background: nth($colors, 1); border-color: nth($colors, 2); + .opblock-section-header { + background-color: nth($colors, 3); + } + .opblock-summary { + border-color: nth($colors, 2); + } } } - } - .opblock { - .opblock-section-header { - h4 { - color: $text_color_1; + .opblock { + .opblock-section-header { + h4 { + color: $text_color_1; + } + label { + color: $text_color_3; + } + .btn { + color: $text_color_2; + border-color: $text_color_3; + box-shadow: none; + } } - label { - color: $text_color_3; + + .model-box { + background: map-get($models_colors, background); + border-color: map-get($models_colors, border); + .model-title { + color: $text_color_1; + } + .model { + color: $text_color_2; + } } - .btn { + + .markdown p, + .markdown pre, + .renderedMarkdown p, + .renderedMarkdown pre { color: $text_color_2; - border-color: $text_color_3; - box-shadow: none; } - } - .markdown p, - .markdown pre, - .renderedMarkdown p, - .renderedMarkdown pre { - color: $text_color_2; + .opblock-summary-operation-id, + .opblock-summary-path, + .opblock-summary-path__deprecated, + .opblock-summary-description, + .description-wrapper, + .opblock-external-docs-wrapper, + .opblock-title_normal, + .parameter__name, + .parameter__type, + .parameter__in, + .response-col_status { + color: $text_color_3; + } } - .opblock-summary-operation-id, - .opblock-summary-path, - .opblock-summary-path__deprecated, - .opblock-summary-description, - .description-wrapper, - .opblock-external-docs-wrapper, - .opblock-title_normal, - .parameter__name, - .parameter__type, - .parameter__in, - .response-col_status { - color: $text_color_3; - } - } + section.models { + background: map-get($models_colors, background); + border-color: map-get($models_colors, border); - section.models, - .model-box { - background: map-get($models_colors, background); - border-color: map-get($models_colors, border); + h4 span, + .model-title { + color: $text_color_1; + } - h4 span, - .model-title { - color: $text_color_1; - } + .models-control svg { + fill: $text_color_2; + } - .models-control svg { - fill: $text_color_2; - } + .model-container { + background: map-get($models_colors, item_background); + &:hover { + background: map-get($models_colors, item_hover); + } + } - .model-container { - background: map-get($models_colors, item_background); - &:hover { - background: map-get($models_colors, item_hover); + .model { + color: $text_color_3; } } - .model { - color: $text_color_3; + .model-box-control:focus, + .models-control:focus, + .opblock-summary-control:focus { + outline: none; } } - - .model-box-control:focus, - .models-control:focus, - .opblock-summary-control:focus { - outline: none; - } } diff --git a/src/style/_topbar.scss b/src/style/_topbar.scss index a1c77a86c87..48fac1673f4 100644 --- a/src/style/_topbar.scss +++ b/src/style/_topbar.scss @@ -1,7 +1,6 @@ .topbar { padding: 10px 0; - background-color: $topbar-background-color; .topbar-wrapper { @@ -22,13 +21,10 @@ { font-size: 1.5em; font-weight: bold; - display: flex; align-items: center; flex: 1; - max-width: 300px; - text-decoration: none; @include text_headline($topbar-link-font-color); @@ -112,4 +108,19 @@ width: 100%; } } + + .dark-toggle { + margin-left: 10px; + opacity: 0.8; + transition: all .2s; + svg { + fill: #f1f1f1cb; + } + &:hover { + opacity: 1; + svg { + fill: #ffff0081; + } + } + } } From 2834f2188dac0dc2f01387fcd134fbc4eddabe13 Mon Sep 17 00:00:00 2001 From: Allan Date: Fri, 15 Nov 2024 13:57:21 +0000 Subject: [PATCH 09/10] - add unit test for the darkMode component --- .../plugins/top-bar/components/DarkMode.jsx | 4 +-- test/unit/components/darkMode.jsx | 32 +++++++++++++++++++ 2 files changed, 34 insertions(+), 2 deletions(-) create mode 100644 test/unit/components/darkMode.jsx diff --git a/src/standalone/plugins/top-bar/components/DarkMode.jsx b/src/standalone/plugins/top-bar/components/DarkMode.jsx index b769df768d8..9c49074829f 100644 --- a/src/standalone/plugins/top-bar/components/DarkMode.jsx +++ b/src/standalone/plugins/top-bar/components/DarkMode.jsx @@ -16,9 +16,9 @@ const LightBulbIcon = () => { return (
{!isDarkMode ? ( - + ) : ( - + )}
) diff --git a/test/unit/components/darkMode.jsx b/test/unit/components/darkMode.jsx new file mode 100644 index 00000000000..e890be8f716 --- /dev/null +++ b/test/unit/components/darkMode.jsx @@ -0,0 +1,32 @@ +import React from "react" +import { mount } from "enzyme" +import DarkMode from "../../../src/standalone/plugins/top-bar/components/DarkMode" + +// Mock SVG imports +jest.mock("../../../src/assets/lightbulb.svg", () => () =>
LightBulb
) +jest.mock("../../../src/assets/lightbulb-off.svg", () => () =>
LightBulbOff
) + +describe("LightBulbIcon Component", () => { + it("toggles the dark class on the html element and switches icons on click", () => { + // Mount the component + const wrapper = mount() + + // Access the root html element + const htmlElement = document.documentElement + + // Ensure initial state no "dark" class + expect(htmlElement.classList.contains("dark")).toBe(false) + + // Simulate the first click + wrapper.find(".dark-toggle").simulate("click") + + // After the first click "dark" class is added + expect(htmlElement.classList.contains("dark")).toBe(true) + + // Simulate the second click + wrapper.find(".dark-toggle").simulate("click") + + // After the second click "dark" class is removed + expect(htmlElement.classList.contains("dark")).toBe(false) + }) +}) From 5b09e0c963ae0ed66c7151ac03b4ac78095a3fb7 Mon Sep 17 00:00:00 2001 From: Allan Date: Sun, 2 Mar 2025 12:57:38 +0000 Subject: [PATCH 10/10] Update src/standalone/plugins/top-bar/components/DarkMode.jsx Co-authored-by: Ed Brannin (BW) <86373302+ebrannin-bw@users.noreply.github.com> --- src/standalone/plugins/top-bar/components/DarkMode.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/standalone/plugins/top-bar/components/DarkMode.jsx b/src/standalone/plugins/top-bar/components/DarkMode.jsx index 9c49074829f..cfe3f21a753 100644 --- a/src/standalone/plugins/top-bar/components/DarkMode.jsx +++ b/src/standalone/plugins/top-bar/components/DarkMode.jsx @@ -6,7 +6,7 @@ import LightBulb from "../assets/lightbulb.svg" import LightBulbOff from "../assets/lightbulb-off.svg" const LightBulbIcon = () => { - const [isDarkMode, setIsDarkMode] = useState(false) + const [isDarkMode, setIsDarkMode] = useState(() => window.matchMedia('(prefers-color-scheme: dark)').matches) const toggleDarkMode = useCallback(() => { document.documentElement.classList.toggle("dark")