From c91c27bc76a6a5a182fb28666f52251d7dbc0993 Mon Sep 17 00:00:00 2001 From: feraxhp Date: Mon, 1 Dec 2025 19:27:16 -0500 Subject: [PATCH 1/4] Update color settings in catppuccin.user.less --- styles/hoppscotch/catppuccin.user.less | 20 +++++++++++++------- 1 file changed, 13 insertions(+), 7 deletions(-) diff --git a/styles/hoppscotch/catppuccin.user.less b/styles/hoppscotch/catppuccin.user.less index de194d052e..283f8eee79 100644 --- a/styles/hoppscotch/catppuccin.user.less +++ b/styles/hoppscotch/catppuccin.user.less @@ -30,8 +30,9 @@ #lib.palette(); #lib.defaults(); // TODO: Do we need to set the selection color in the defaults? Why is it necessary here but not elsewhere? + // * This is set to `unset` to prevent the text from disappearing, which allows it to maintain the color from the code highlighter. ::selection { - color: @text !important; + color: unset !important; } @accent-light-alpha: 1.1; @@ -41,15 +42,15 @@ @accent-gradient-to-color: 0.85; --primary-color: @base; - --primary-light-color: @surface1; + --primary-light-color: @mantle; --primary-dark-color: @crust; --primary-contrast-color: @mantle; --secondary-color: @subtext0; --secondary-light-color: @subtext0; --secondary-dark-color: @subtext1; - --divider-color: @overlay0; - --divider-light-color: @overlay1; - --divider-dark-color: @surface2; + --divider-color: hsl(from @overlay2 h s l / .1); + --divider-light-color: hsl(from @overlay2 h s l / .1); + --divider-dark-color: hsl(from @overlay2 h s l / .1); --error-color: @red; --tooltip-color: @text; --popover-color: @crust; @@ -73,17 +74,22 @@ --gradient-to-color: fade(@accent, @accent-gradient-to-color); --editor-process-color: @text; + --banner-info-color: hsl(from @blue h s l / .2); .ͼ1 .cm-placeholder { color: @text; } .cm-focused .cm-activeLine { - background-color: @surface0; + background-color: hsl(from @surface1 h s l / .1); } .cm-focused .cm-activeLineGutter { - background-color: @surface2; + background-color: hsl(from @surface1 h s l / .2); + } + + .cm-selectionBackground { + background: hsl(from @overlay2 h s l / .3) !important; } } } From b9fd620a28bb06f2b6e53bd443331877b5ad78ed Mon Sep 17 00:00:00 2001 From: feraxhp Date: Tue, 2 Dec 2025 13:47:46 -0500 Subject: [PATCH 2/4] Refactor color variables to use fade function I also change accent-dark-alpha, to improve the visibility of the buttons hover. --- styles/hoppscotch/catppuccin.user.less | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/styles/hoppscotch/catppuccin.user.less b/styles/hoppscotch/catppuccin.user.less index 283f8eee79..ccd679e213 100644 --- a/styles/hoppscotch/catppuccin.user.less +++ b/styles/hoppscotch/catppuccin.user.less @@ -36,7 +36,7 @@ } @accent-light-alpha: 1.1; - @accent-dark-alpha: 0.9; + @accent-dark-alpha: 80%; @accent-gradient-from-color: 1.05; @accent-gradient-via-color: 1.2; @accent-gradient-to-color: 0.85; @@ -48,9 +48,9 @@ --secondary-color: @subtext0; --secondary-light-color: @subtext0; --secondary-dark-color: @subtext1; - --divider-color: hsl(from @overlay2 h s l / .1); - --divider-light-color: hsl(from @overlay2 h s l / .1); - --divider-dark-color: hsl(from @overlay2 h s l / .1); + --divider-color: fade(@overlay2, 10%); + --divider-light-color: fade(@overlay2, 10%); + --divider-dark-color: fade(@overlay2, 10%); --error-color: @red; --tooltip-color: @text; --popover-color: @crust; @@ -74,22 +74,22 @@ --gradient-to-color: fade(@accent, @accent-gradient-to-color); --editor-process-color: @text; - --banner-info-color: hsl(from @blue h s l / .2); + --banner-info-color: fade(@blue, 20%); .ͼ1 .cm-placeholder { color: @text; } .cm-focused .cm-activeLine { - background-color: hsl(from @surface1 h s l / .1); + background-color: fade(@surface1, 10%); } .cm-focused .cm-activeLineGutter { - background-color: hsl(from @surface1 h s l / .2); + background-color: fade(@surface1, 20%); } - .cm-selectionBackground { - background: hsl(from @overlay2 h s l / .3) !important; + .cm-selectionBackground, .ͼ1h ::selection { + background: fade(@flamingo, 30%) !important; } } } From 4112e5954eb24bf834de9caa234d8fe5a83d8fcb Mon Sep 17 00:00:00 2001 From: feraxhp Date: Tue, 2 Dec 2025 15:25:23 -0500 Subject: [PATCH 3/4] Fix selection related problems --- styles/hoppscotch/catppuccin.user.less | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/styles/hoppscotch/catppuccin.user.less b/styles/hoppscotch/catppuccin.user.less index ccd679e213..f745ba64ff 100644 --- a/styles/hoppscotch/catppuccin.user.less +++ b/styles/hoppscotch/catppuccin.user.less @@ -31,8 +31,9 @@ #lib.defaults(); // TODO: Do we need to set the selection color in the defaults? Why is it necessary here but not elsewhere? // * This is set to `unset` to prevent the text from disappearing, which allows it to maintain the color from the code highlighter. - ::selection { + .cm-editor ::selection { color: unset !important; + background: transparent !important; } @accent-light-alpha: 1.1; @@ -76,7 +77,7 @@ --editor-process-color: @text; --banner-info-color: fade(@blue, 20%); - .ͼ1 .cm-placeholder { + .cm-editor .cm-placeholder { color: @text; } @@ -88,8 +89,9 @@ background-color: fade(@surface1, 20%); } - .cm-selectionBackground, .ͼ1h ::selection { - background: fade(@flamingo, 30%) !important; + .cm-selectionBackground, + .autocomplete-wrapper .cm-editor ::selection { + background: fade(@accent, 30%) !important; } } } From 00553fa4f992bf0c9cd939ed02b666c4d068a3b8 Mon Sep 17 00:00:00 2001 From: feraxhp Date: Wed, 3 Dec 2025 13:05:50 -0500 Subject: [PATCH 4/4] Change divider colors to use surface0 --- styles/hoppscotch/catppuccin.user.less | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/styles/hoppscotch/catppuccin.user.less b/styles/hoppscotch/catppuccin.user.less index f745ba64ff..5a2d3d1e6c 100644 --- a/styles/hoppscotch/catppuccin.user.less +++ b/styles/hoppscotch/catppuccin.user.less @@ -49,9 +49,9 @@ --secondary-color: @subtext0; --secondary-light-color: @subtext0; --secondary-dark-color: @subtext1; - --divider-color: fade(@overlay2, 10%); - --divider-light-color: fade(@overlay2, 10%); - --divider-dark-color: fade(@overlay2, 10%); + --divider-color: @surface0; + --divider-light-color: @surface0; + --divider-dark-color: @surface0; --error-color: @red; --tooltip-color: @text; --popover-color: @crust;