Fix palette/picker colors for imported themes (#3560)

Marshall Bowers created 2 years ago

This PR fixes the palette/picker colors for themes imported from VS
Code.

- We now use the `dropdown.background` to set the background color for
elevated surfaces
- We now pull in `list.activeSelectionBackground` to use as the color
for selected ghost elements

Release Notes:

- N/A

Change summary

crates/theme2/src/themes/andromeda.rs         |  6 ++-
crates/theme2/src/themes/ayu.rs               |  9 +++-
crates/theme2/src/themes/dracula.rs           |  3 +
crates/theme2/src/themes/gruvbox.rs           | 12 +++++++
crates/theme2/src/themes/night_owl.rs         |  2 +
crates/theme2/src/themes/noctis.rs            | 33 ++++++++++++++-------
crates/theme2/src/themes/nord.rs              |  3 +
crates/theme2/src/themes/palenight.rs         |  5 ++
crates/theme2/src/themes/rose_pine.rs         |  3 +
crates/theme2/src/themes/solarized.rs         |  4 ++
crates/theme2/src/themes/synthwave_84.rs      |  2 +
crates/theme_importer/src/vscode/converter.rs |  6 +++
12 files changed, 68 insertions(+), 20 deletions(-)

Detailed changes

crates/theme2/src/themes/andromeda.rs

@@ -25,7 +25,7 @@ pub fn andromeda() -> UserThemeFamily {
                         border_selected: Some(rgba(0x1b1d23ff).into()),
                         border_transparent: Some(rgba(0x1b1d23ff).into()),
                         border_disabled: Some(rgba(0x1b1d23ff).into()),
-                        elevated_surface_background: Some(rgba(0x23262eff).into()),
+                        elevated_surface_background: Some(rgba(0x2b303bff).into()),
                         surface_background: Some(rgba(0x23262eff).into()),
                         background: Some(rgba(0x23262eff).into()),
                         element_background: Some(rgba(0x00e8c5cc).into()),
@@ -33,6 +33,7 @@ pub fn andromeda() -> UserThemeFamily {
                         element_selected: Some(rgba(0x23262eff).into()),
                         drop_target_background: Some(rgba(0x3a404eff).into()),
                         ghost_element_hover: Some(rgba(0x23262eff).into()),
+                        ghost_element_selected: Some(rgba(0x23262eff).into()),
                         text: Some(rgba(0xd5ced9ff).into()),
                         status_bar_background: Some(rgba(0x23262eff).into()),
                         title_bar_background: Some(rgba(0x23262eff).into()),
@@ -230,7 +231,7 @@ pub fn andromeda() -> UserThemeFamily {
                         border_selected: Some(rgba(0x1b1d23ff).into()),
                         border_transparent: Some(rgba(0x1b1d23ff).into()),
                         border_disabled: Some(rgba(0x1b1d23ff).into()),
-                        elevated_surface_background: Some(rgba(0x23262eff).into()),
+                        elevated_surface_background: Some(rgba(0x2b303bff).into()),
                         surface_background: Some(rgba(0x23262eff).into()),
                         background: Some(rgba(0x262a33ff).into()),
                         element_background: Some(rgba(0x00e8c5cc).into()),
@@ -238,6 +239,7 @@ pub fn andromeda() -> UserThemeFamily {
                         element_selected: Some(rgba(0x23262eff).into()),
                         drop_target_background: Some(rgba(0x3a404eff).into()),
                         ghost_element_hover: Some(rgba(0x23262eff).into()),
+                        ghost_element_selected: Some(rgba(0x23262eff).into()),
                         text: Some(rgba(0xd5ced9ff).into()),
                         status_bar_background: Some(rgba(0x23262eff).into()),
                         title_bar_background: Some(rgba(0x23262eff).into()),

crates/theme2/src/themes/ayu.rs

@@ -25,13 +25,14 @@ pub fn ayu() -> UserThemeFamily {
                         border_selected: Some(rgba(0x6b7d8f1f).into()),
                         border_transparent: Some(rgba(0x6b7d8f1f).into()),
                         border_disabled: Some(rgba(0x6b7d8f1f).into()),
-                        elevated_surface_background: Some(rgba(0xf8f9faff).into()),
+                        elevated_surface_background: Some(rgba(0xfcfcfcff).into()),
                         surface_background: Some(rgba(0xf8f9faff).into()),
                         background: Some(rgba(0xf8f9faff).into()),
                         element_background: Some(rgba(0xffaa33ff).into()),
                         element_hover: Some(rgba(0x56728f1f).into()),
                         element_selected: Some(rgba(0x56728f1f).into()),
                         ghost_element_hover: Some(rgba(0x56728f1f).into()),
+                        ghost_element_selected: Some(rgba(0x56728f1f).into()),
                         text: Some(rgba(0x8a9199ff).into()),
                         status_bar_background: Some(rgba(0xf8f9faff).into()),
                         title_bar_background: Some(rgba(0xf8f9faff).into()),
@@ -324,13 +325,14 @@ pub fn ayu() -> UserThemeFamily {
                         border_selected: Some(rgba(0x171b24ff).into()),
                         border_transparent: Some(rgba(0x171b24ff).into()),
                         border_disabled: Some(rgba(0x171b24ff).into()),
-                        elevated_surface_background: Some(rgba(0x1f2430ff).into()),
+                        elevated_surface_background: Some(rgba(0x242936ff).into()),
                         surface_background: Some(rgba(0x1f2430ff).into()),
                         background: Some(rgba(0x1f2430ff).into()),
                         element_background: Some(rgba(0xffcc66ff).into()),
                         element_hover: Some(rgba(0x63759926).into()),
                         element_selected: Some(rgba(0x63759926).into()),
                         ghost_element_hover: Some(rgba(0x63759926).into()),
+                        ghost_element_selected: Some(rgba(0x63759926).into()),
                         text: Some(rgba(0x707a8cff).into()),
                         status_bar_background: Some(rgba(0x1f2430ff).into()),
                         title_bar_background: Some(rgba(0x1f2430ff).into()),
@@ -623,13 +625,14 @@ pub fn ayu() -> UserThemeFamily {
                         border_selected: Some(rgba(0x1e232bff).into()),
                         border_transparent: Some(rgba(0x1e232bff).into()),
                         border_disabled: Some(rgba(0x1e232bff).into()),
-                        elevated_surface_background: Some(rgba(0x0b0e14ff).into()),
+                        elevated_surface_background: Some(rgba(0x0d1017ff).into()),
                         surface_background: Some(rgba(0x0b0e14ff).into()),
                         background: Some(rgba(0x0b0e14ff).into()),
                         element_background: Some(rgba(0xe6b450ff).into()),
                         element_hover: Some(rgba(0x47526640).into()),
                         element_selected: Some(rgba(0x47526640).into()),
                         ghost_element_hover: Some(rgba(0x47526640).into()),
+                        ghost_element_selected: Some(rgba(0x47526640).into()),
                         text: Some(rgba(0x565b66ff).into()),
                         status_bar_background: Some(rgba(0x0b0e14ff).into()),
                         title_bar_background: Some(rgba(0x0b0e14ff).into()),

crates/theme2/src/themes/dracula.rs

@@ -24,7 +24,7 @@ pub fn dracula() -> UserThemeFamily {
                     border_selected: Some(rgba(0xbd93f9ff).into()),
                     border_transparent: Some(rgba(0xbd93f9ff).into()),
                     border_disabled: Some(rgba(0xbd93f9ff).into()),
-                    elevated_surface_background: Some(rgba(0x282a36ff).into()),
+                    elevated_surface_background: Some(rgba(0x343746ff).into()),
                     surface_background: Some(rgba(0x282a36ff).into()),
                     background: Some(rgba(0x282a36ff).into()),
                     element_background: Some(rgba(0x44475aff).into()),
@@ -32,6 +32,7 @@ pub fn dracula() -> UserThemeFamily {
                     element_selected: Some(rgba(0x44475aff).into()),
                     drop_target_background: Some(rgba(0x44475aff).into()),
                     ghost_element_hover: Some(rgba(0x44475a75).into()),
+                    ghost_element_selected: Some(rgba(0x44475aff).into()),
                     text: Some(rgba(0xf8f8f2ff).into()),
                     status_bar_background: Some(rgba(0x191a21ff).into()),
                     title_bar_background: Some(rgba(0x21222cff).into()),

crates/theme2/src/themes/gruvbox.rs

@@ -25,12 +25,14 @@ pub fn gruvbox() -> UserThemeFamily {
                         border_selected: Some(rgba(0x3c3836ff).into()),
                         border_transparent: Some(rgba(0x3c3836ff).into()),
                         border_disabled: Some(rgba(0x3c3836ff).into()),
+                        elevated_surface_background: Some(rgba(0x1d2021ff).into()),
                         background: Some(rgba(0x1d2021ff).into()),
                         element_background: Some(rgba(0x45858880).into()),
                         element_hover: Some(rgba(0x3c383680).into()),
                         element_selected: Some(rgba(0x3c383680).into()),
                         drop_target_background: Some(rgba(0x3c3836ff).into()),
                         ghost_element_hover: Some(rgba(0x3c383680).into()),
+                        ghost_element_selected: Some(rgba(0x3c383680).into()),
                         text: Some(rgba(0xebdbb2ff).into()),
                         status_bar_background: Some(rgba(0x1d2021ff).into()),
                         title_bar_background: Some(rgba(0x1d2021ff).into()),
@@ -309,12 +311,14 @@ pub fn gruvbox() -> UserThemeFamily {
                         border_selected: Some(rgba(0x3c3836ff).into()),
                         border_transparent: Some(rgba(0x3c3836ff).into()),
                         border_disabled: Some(rgba(0x3c3836ff).into()),
+                        elevated_surface_background: Some(rgba(0x282828ff).into()),
                         background: Some(rgba(0x282828ff).into()),
                         element_background: Some(rgba(0x45858880).into()),
                         element_hover: Some(rgba(0x3c383680).into()),
                         element_selected: Some(rgba(0x3c383680).into()),
                         drop_target_background: Some(rgba(0x3c3836ff).into()),
                         ghost_element_hover: Some(rgba(0x3c383680).into()),
+                        ghost_element_selected: Some(rgba(0x3c383680).into()),
                         text: Some(rgba(0xebdbb2ff).into()),
                         status_bar_background: Some(rgba(0x282828ff).into()),
                         title_bar_background: Some(rgba(0x282828ff).into()),
@@ -593,12 +597,14 @@ pub fn gruvbox() -> UserThemeFamily {
                         border_selected: Some(rgba(0x3c3836ff).into()),
                         border_transparent: Some(rgba(0x3c3836ff).into()),
                         border_disabled: Some(rgba(0x3c3836ff).into()),
+                        elevated_surface_background: Some(rgba(0x32302fff).into()),
                         background: Some(rgba(0x32302fff).into()),
                         element_background: Some(rgba(0x45858880).into()),
                         element_hover: Some(rgba(0x3c383680).into()),
                         element_selected: Some(rgba(0x3c383680).into()),
                         drop_target_background: Some(rgba(0x3c3836ff).into()),
                         ghost_element_hover: Some(rgba(0x3c383680).into()),
+                        ghost_element_selected: Some(rgba(0x3c383680).into()),
                         text: Some(rgba(0xebdbb2ff).into()),
                         status_bar_background: Some(rgba(0x32302fff).into()),
                         title_bar_background: Some(rgba(0x32302fff).into()),
@@ -877,12 +883,14 @@ pub fn gruvbox() -> UserThemeFamily {
                         border_selected: Some(rgba(0xebdbb2ff).into()),
                         border_transparent: Some(rgba(0xebdbb2ff).into()),
                         border_disabled: Some(rgba(0xebdbb2ff).into()),
+                        elevated_surface_background: Some(rgba(0xf9f5d7ff).into()),
                         background: Some(rgba(0xf9f5d7ff).into()),
                         element_background: Some(rgba(0x45858880).into()),
                         element_hover: Some(rgba(0xebdbb280).into()),
                         element_selected: Some(rgba(0xebdbb280).into()),
                         drop_target_background: Some(rgba(0xebdbb2ff).into()),
                         ghost_element_hover: Some(rgba(0xebdbb280).into()),
+                        ghost_element_selected: Some(rgba(0xebdbb280).into()),
                         text: Some(rgba(0x3c3836ff).into()),
                         status_bar_background: Some(rgba(0xf9f5d7ff).into()),
                         title_bar_background: Some(rgba(0xf9f5d7ff).into()),
@@ -1161,12 +1169,14 @@ pub fn gruvbox() -> UserThemeFamily {
                         border_selected: Some(rgba(0xebdbb2ff).into()),
                         border_transparent: Some(rgba(0xebdbb2ff).into()),
                         border_disabled: Some(rgba(0xebdbb2ff).into()),
+                        elevated_surface_background: Some(rgba(0xfbf1c7ff).into()),
                         background: Some(rgba(0xfbf1c7ff).into()),
                         element_background: Some(rgba(0x45858880).into()),
                         element_hover: Some(rgba(0xebdbb280).into()),
                         element_selected: Some(rgba(0xebdbb280).into()),
                         drop_target_background: Some(rgba(0xebdbb2ff).into()),
                         ghost_element_hover: Some(rgba(0xebdbb280).into()),
+                        ghost_element_selected: Some(rgba(0xebdbb280).into()),
                         text: Some(rgba(0x3c3836ff).into()),
                         status_bar_background: Some(rgba(0xfbf1c7ff).into()),
                         title_bar_background: Some(rgba(0xfbf1c7ff).into()),
@@ -1445,12 +1455,14 @@ pub fn gruvbox() -> UserThemeFamily {
                         border_selected: Some(rgba(0xebdbb2ff).into()),
                         border_transparent: Some(rgba(0xebdbb2ff).into()),
                         border_disabled: Some(rgba(0xebdbb2ff).into()),
+                        elevated_surface_background: Some(rgba(0xf2e5bcff).into()),
                         background: Some(rgba(0xf2e5bcff).into()),
                         element_background: Some(rgba(0x45858880).into()),
                         element_hover: Some(rgba(0xebdbb280).into()),
                         element_selected: Some(rgba(0xebdbb280).into()),
                         drop_target_background: Some(rgba(0xebdbb2ff).into()),
                         ghost_element_hover: Some(rgba(0xebdbb280).into()),
+                        ghost_element_selected: Some(rgba(0xebdbb280).into()),
                         text: Some(rgba(0x3c3836ff).into()),
                         status_bar_background: Some(rgba(0xf2e5bcff).into()),
                         title_bar_background: Some(rgba(0xf2e5bcff).into()),

crates/theme2/src/themes/night_owl.rs

@@ -33,6 +33,7 @@ pub fn night_owl() -> UserThemeFamily {
                         element_selected: Some(rgba(0x234d708c).into()),
                         drop_target_background: Some(rgba(0x011627ff).into()),
                         ghost_element_hover: Some(rgba(0x011627ff).into()),
+                        ghost_element_selected: Some(rgba(0x234d708c).into()),
                         text: Some(rgba(0xd6deebff).into()),
                         status_bar_background: Some(rgba(0x011627ff).into()),
                         title_bar_background: Some(rgba(0x011627ff).into()),
@@ -283,6 +284,7 @@ pub fn night_owl() -> UserThemeFamily {
                         element_hover: Some(rgba(0xd3e8f8ff).into()),
                         element_selected: Some(rgba(0xd3e8f8ff).into()),
                         ghost_element_hover: Some(rgba(0xd3e8f8ff).into()),
+                        ghost_element_selected: Some(rgba(0xd3e8f8ff).into()),
                         text: Some(rgba(0x403f53ff).into()),
                         status_bar_background: Some(rgba(0xf0f0f0ff).into()),
                         title_bar_background: Some(rgba(0xf0f0f0ff).into()),

crates/theme2/src/themes/noctis.rs

@@ -25,7 +25,7 @@ pub fn noctis() -> UserThemeFamily {
                         border_selected: Some(rgba(0x1679b6ff).into()),
                         border_transparent: Some(rgba(0x1679b6ff).into()),
                         border_disabled: Some(rgba(0x1679b6ff).into()),
-                        elevated_surface_background: Some(rgba(0x051b29ff).into()),
+                        elevated_surface_background: Some(rgba(0x09334eff).into()),
                         surface_background: Some(rgba(0x051b29ff).into()),
                         background: Some(rgba(0x07273bff).into()),
                         element_background: Some(rgba(0x007f99ff).into()),
@@ -33,6 +33,7 @@ pub fn noctis() -> UserThemeFamily {
                         element_selected: Some(rgba(0x0c3f5fff).into()),
                         drop_target_background: Some(rgba(0x002a4dff).into()),
                         ghost_element_hover: Some(rgba(0x00558a65).into()),
+                        ghost_element_selected: Some(rgba(0x0c3f5fff).into()),
                         text: Some(rgba(0xbecfdaff).into()),
                         status_bar_background: Some(rgba(0x07273bff).into()),
                         title_bar_background: Some(rgba(0x07273bff).into()),
@@ -295,7 +296,7 @@ pub fn noctis() -> UserThemeFamily {
                         border_selected: Some(rgba(0x997582ff).into()),
                         border_transparent: Some(rgba(0x997582ff).into()),
                         border_disabled: Some(rgba(0x997582ff).into()),
-                        elevated_surface_background: Some(rgba(0x272022ff).into()),
+                        elevated_surface_background: Some(rgba(0x413036ff).into()),
                         surface_background: Some(rgba(0x272022ff).into()),
                         background: Some(rgba(0x322a2dff).into()),
                         element_background: Some(rgba(0x007f99ff).into()),
@@ -303,6 +304,7 @@ pub fn noctis() -> UserThemeFamily {
                         element_selected: Some(rgba(0x5c2e3e99).into()),
                         drop_target_background: Some(rgba(0x38292eff).into()),
                         ghost_element_hover: Some(rgba(0x533641ff).into()),
+                        ghost_element_selected: Some(rgba(0x5c2e3e99).into()),
                         text: Some(rgba(0xcbbec2ff).into()),
                         status_bar_background: Some(rgba(0x322a2dff).into()),
                         title_bar_background: Some(rgba(0x322a2dff).into()),
@@ -565,7 +567,7 @@ pub fn noctis() -> UserThemeFamily {
                         border_selected: Some(rgba(0x00c6e0ff).into()),
                         border_transparent: Some(rgba(0x00c6e0ff).into()),
                         border_disabled: Some(rgba(0x00c6e0ff).into()),
-                        elevated_surface_background: Some(rgba(0xe1eeefff).into()),
+                        elevated_surface_background: Some(rgba(0xf4f6f6ff).into()),
                         surface_background: Some(rgba(0xe1eeefff).into()),
                         background: Some(rgba(0xf4f6f6ff).into()),
                         element_background: Some(rgba(0x099099ff).into()),
@@ -573,6 +575,7 @@ pub fn noctis() -> UserThemeFamily {
                         element_selected: Some(rgba(0xb6e1e7ff).into()),
                         drop_target_background: Some(rgba(0xb2cacdff).into()),
                         ghost_element_hover: Some(rgba(0xd1eafaff).into()),
+                        ghost_element_selected: Some(rgba(0xb6e1e7ff).into()),
                         text: Some(rgba(0x005661ff).into()),
                         status_bar_background: Some(rgba(0xcaedf2ff).into()),
                         title_bar_background: Some(rgba(0xe7f2f3ff).into()),
@@ -835,7 +838,7 @@ pub fn noctis() -> UserThemeFamily {
                         border_selected: Some(rgba(0xaea4f4ff).into()),
                         border_transparent: Some(rgba(0xaea4f4ff).into()),
                         border_disabled: Some(rgba(0xaea4f4ff).into()),
-                        elevated_surface_background: Some(rgba(0xe9e7f3ff).into()),
+                        elevated_surface_background: Some(rgba(0xf2f1f8ff).into()),
                         surface_background: Some(rgba(0xe9e7f3ff).into()),
                         background: Some(rgba(0xf2f1f8ff).into()),
                         element_background: Some(rgba(0x8e80ffff).into()),
@@ -843,6 +846,7 @@ pub fn noctis() -> UserThemeFamily {
                         element_selected: Some(rgba(0xbcb6e7ff).into()),
                         drop_target_background: Some(rgba(0xafaad4aa).into()),
                         ghost_element_hover: Some(rgba(0xd2ccffff).into()),
+                        ghost_element_selected: Some(rgba(0xbcb6e7ff).into()),
                         text: Some(rgba(0x0c006bff).into()),
                         status_bar_background: Some(rgba(0xe2dff6ff).into()),
                         title_bar_background: Some(rgba(0xedecf8ff).into()),
@@ -1105,7 +1109,7 @@ pub fn noctis() -> UserThemeFamily {
                         border_selected: Some(rgba(0x00c6e0ff).into()),
                         border_transparent: Some(rgba(0x00c6e0ff).into()),
                         border_disabled: Some(rgba(0x00c6e0ff).into()),
-                        elevated_surface_background: Some(rgba(0xf6eddaff).into()),
+                        elevated_surface_background: Some(rgba(0xfef8ecff).into()),
                         surface_background: Some(rgba(0xf6eddaff).into()),
                         background: Some(rgba(0xfef8ecff).into()),
                         element_background: Some(rgba(0x099099ff).into()),
@@ -1113,6 +1117,7 @@ pub fn noctis() -> UserThemeFamily {
                         element_selected: Some(rgba(0xb6e1e7ff).into()),
                         drop_target_background: Some(rgba(0xcdcbb2ff).into()),
                         ghost_element_hover: Some(rgba(0xd2f3f9ff).into()),
+                        ghost_element_selected: Some(rgba(0xb6e1e7ff).into()),
                         text: Some(rgba(0x005661ff).into()),
                         status_bar_background: Some(rgba(0xf0e9d6ff).into()),
                         title_bar_background: Some(rgba(0xf9f1e1ff).into()),
@@ -1375,7 +1380,7 @@ pub fn noctis() -> UserThemeFamily {
                         border_selected: Some(rgba(0x496d83ff).into()),
                         border_transparent: Some(rgba(0x496d83ff).into()),
                         border_disabled: Some(rgba(0x496d83ff).into()),
-                        elevated_surface_background: Some(rgba(0x0e1920ff).into()),
+                        elevated_surface_background: Some(rgba(0x202e37ff).into()),
                         surface_background: Some(rgba(0x0e1920ff).into()),
                         background: Some(rgba(0x1b2932ff).into()),
                         element_background: Some(rgba(0x2e616bff).into()),
@@ -1383,6 +1388,7 @@ pub fn noctis() -> UserThemeFamily {
                         element_selected: Some(rgba(0x2c414eff).into()),
                         drop_target_background: Some(rgba(0x152837ff).into()),
                         ghost_element_hover: Some(rgba(0x00558aff).into()),
+                        ghost_element_selected: Some(rgba(0x2c414eff).into()),
                         text: Some(rgba(0xc5cdd3ff).into()),
                         status_bar_background: Some(rgba(0x1b2932ff).into()),
                         title_bar_background: Some(rgba(0x1b2932ff).into()),
@@ -1645,7 +1651,7 @@ pub fn noctis() -> UserThemeFamily {
                         border_selected: Some(rgba(0x0e6671ff).into()),
                         border_transparent: Some(rgba(0x0e6671ff).into()),
                         border_disabled: Some(rgba(0x0e6671ff).into()),
-                        elevated_surface_background: Some(rgba(0x03191bff).into()),
+                        elevated_surface_background: Some(rgba(0x073940ff).into()),
                         surface_background: Some(rgba(0x03191bff).into()),
                         background: Some(rgba(0x052529ff).into()),
                         element_background: Some(rgba(0x099099ff).into()),
@@ -1653,6 +1659,7 @@ pub fn noctis() -> UserThemeFamily {
                         element_selected: Some(rgba(0x0e6671ff).into()),
                         drop_target_background: Some(rgba(0x00404dff).into()),
                         ghost_element_hover: Some(rgba(0x0b515bff).into()),
+                        ghost_element_selected: Some(rgba(0x0e6671ff).into()),
                         text: Some(rgba(0xb2cacdff).into()),
                         status_bar_background: Some(rgba(0x041d20ff).into()),
                         title_bar_background: Some(rgba(0x041d20ff).into()),
@@ -1915,7 +1922,7 @@ pub fn noctis() -> UserThemeFamily {
                         border_selected: Some(rgba(0x0e6671ff).into()),
                         border_transparent: Some(rgba(0x0e6671ff).into()),
                         border_disabled: Some(rgba(0x0e6671ff).into()),
-                        elevated_surface_background: Some(rgba(0x020c0eff).into()),
+                        elevated_surface_background: Some(rgba(0x031417ff).into()),
                         surface_background: Some(rgba(0x020c0eff).into()),
                         background: Some(rgba(0x031417ff).into()),
                         element_background: Some(rgba(0x099099ff).into()),
@@ -1923,6 +1930,7 @@ pub fn noctis() -> UserThemeFamily {
                         element_selected: Some(rgba(0x0e6671ff).into()),
                         drop_target_background: Some(rgba(0x00404dff).into()),
                         ghost_element_hover: Some(rgba(0x0b515bff).into()),
+                        ghost_element_selected: Some(rgba(0x0e6671ff).into()),
                         text: Some(rgba(0xb2cacdff).into()),
                         status_bar_background: Some(rgba(0x031417ff).into()),
                         title_bar_background: Some(rgba(0x031417ff).into()),
@@ -2185,7 +2193,7 @@ pub fn noctis() -> UserThemeFamily {
                         border_selected: Some(rgba(0x0e6671ff).into()),
                         border_transparent: Some(rgba(0x0e6671ff).into()),
                         border_disabled: Some(rgba(0x0e6671ff).into()),
-                        elevated_surface_background: Some(rgba(0x020c0eff).into()),
+                        elevated_surface_background: Some(rgba(0x031417ff).into()),
                         surface_background: Some(rgba(0x020c0eff).into()),
                         background: Some(rgba(0x031417ff).into()),
                         element_background: Some(rgba(0x099099ff).into()),
@@ -2193,6 +2201,7 @@ pub fn noctis() -> UserThemeFamily {
                         element_selected: Some(rgba(0x0e6671ff).into()),
                         drop_target_background: Some(rgba(0x00404dff).into()),
                         ghost_element_hover: Some(rgba(0x0b515bff).into()),
+                        ghost_element_selected: Some(rgba(0x0e6671ff).into()),
                         text: Some(rgba(0xb2cacdff).into()),
                         status_bar_background: Some(rgba(0x031417ff).into()),
                         title_bar_background: Some(rgba(0x031417ff).into()),
@@ -2455,7 +2464,7 @@ pub fn noctis() -> UserThemeFamily {
                         border_selected: Some(rgba(0x6e67a8ff).into()),
                         border_transparent: Some(rgba(0x6e67a8ff).into()),
                         border_disabled: Some(rgba(0x6e67a8ff).into()),
-                        elevated_surface_background: Some(rgba(0x1f1d30ff).into()),
+                        elevated_surface_background: Some(rgba(0x2f2c49ff).into()),
                         surface_background: Some(rgba(0x1f1d30ff).into()),
                         background: Some(rgba(0x292640ff).into()),
                         element_background: Some(rgba(0x007f99ff).into()),
@@ -2463,6 +2472,7 @@ pub fn noctis() -> UserThemeFamily {
                         element_selected: Some(rgba(0x332e5cff).into()),
                         drop_target_background: Some(rgba(0x202040ff).into()),
                         ghost_element_hover: Some(rgba(0x383866ff).into()),
+                        ghost_element_selected: Some(rgba(0x332e5cff).into()),
                         text: Some(rgba(0xc5c2d6ff).into()),
                         status_bar_background: Some(rgba(0x292640ff).into()),
                         title_bar_background: Some(rgba(0x292640ff).into()),
@@ -2725,7 +2735,7 @@ pub fn noctis() -> UserThemeFamily {
                         border_selected: Some(rgba(0x8767a8ff).into()),
                         border_transparent: Some(rgba(0x8767a8ff).into()),
                         border_disabled: Some(rgba(0x8767a8ff).into()),
-                        elevated_surface_background: Some(rgba(0x291d35ff).into()),
+                        elevated_surface_background: Some(rgba(0x3d2e4dff).into()),
                         surface_background: Some(rgba(0x291d35ff).into()),
                         background: Some(rgba(0x30243dff).into()),
                         element_background: Some(rgba(0x007f99ff).into()),
@@ -2733,6 +2743,7 @@ pub fn noctis() -> UserThemeFamily {
                         element_selected: Some(rgba(0x472e60ff).into()),
                         drop_target_background: Some(rgba(0x302040ff).into()),
                         ghost_element_hover: Some(rgba(0x6a448dff).into()),
+                        ghost_element_selected: Some(rgba(0x472e60ff).into()),
                         text: Some(rgba(0xccbfd9ff).into()),
                         status_bar_background: Some(rgba(0x30243dff).into()),
                         title_bar_background: Some(rgba(0x30243dff).into()),

crates/theme2/src/themes/nord.rs

@@ -24,7 +24,7 @@ pub fn nord() -> UserThemeFamily {
                     border_selected: Some(rgba(0x3b4252ff).into()),
                     border_transparent: Some(rgba(0x3b4252ff).into()),
                     border_disabled: Some(rgba(0x3b4252ff).into()),
-                    elevated_surface_background: Some(rgba(0x2e3440ff).into()),
+                    elevated_surface_background: Some(rgba(0x3b4252ff).into()),
                     surface_background: Some(rgba(0x2e3440ff).into()),
                     background: Some(rgba(0x2e3440ff).into()),
                     element_background: Some(rgba(0x88c0d0ee).into()),
@@ -32,6 +32,7 @@ pub fn nord() -> UserThemeFamily {
                     element_selected: Some(rgba(0x88c0d0ff).into()),
                     drop_target_background: Some(rgba(0x88c0d099).into()),
                     ghost_element_hover: Some(rgba(0x3b4252ff).into()),
+                    ghost_element_selected: Some(rgba(0x88c0d0ff).into()),
                     text: Some(rgba(0xd8dee9ff).into()),
                     status_bar_background: Some(rgba(0x3b4252ff).into()),
                     title_bar_background: Some(rgba(0x2e3440ff).into()),

crates/theme2/src/themes/palenight.rs

@@ -33,6 +33,7 @@ pub fn palenight() -> UserThemeFamily {
                         element_selected: Some(rgba(0x7e57c2ff).into()),
                         drop_target_background: Some(rgba(0x2e3245ff).into()),
                         ghost_element_hover: Some(rgba(0x0000001a).into()),
+                        ghost_element_selected: Some(rgba(0x7e57c2ff).into()),
                         text: Some(rgba(0xffffffff).into()),
                         status_bar_background: Some(rgba(0x282c3dff).into()),
                         title_bar_background: Some(rgba(0x292d3eff).into()),
@@ -312,6 +313,7 @@ pub fn palenight() -> UserThemeFamily {
                         element_selected: Some(rgba(0x7e57c2ff).into()),
                         drop_target_background: Some(rgba(0x2e3245ff).into()),
                         ghost_element_hover: Some(rgba(0x0000001a).into()),
+                        ghost_element_selected: Some(rgba(0x7e57c2ff).into()),
                         text: Some(rgba(0xffffffff).into()),
                         status_bar_background: Some(rgba(0x282c3dff).into()),
                         title_bar_background: Some(rgba(0x292d3eff).into()),
@@ -583,7 +585,7 @@ pub fn palenight() -> UserThemeFamily {
                         border_selected: Some(rgba(0x2c2f40ff).into()),
                         border_transparent: Some(rgba(0x2c2f40ff).into()),
                         border_disabled: Some(rgba(0x2c2f40ff).into()),
-                        elevated_surface_background: Some(rgba(0x25293aff).into()),
+                        elevated_surface_background: Some(rgba(0x292d3eff).into()),
                         surface_background: Some(rgba(0x25293aff).into()),
                         background: Some(rgba(0x292d3eff).into()),
                         element_background: Some(rgba(0x7e57c2cc).into()),
@@ -591,6 +593,7 @@ pub fn palenight() -> UserThemeFamily {
                         element_selected: Some(rgba(0x7e57c2ff).into()),
                         drop_target_background: Some(rgba(0x2e3245ff).into()),
                         ghost_element_hover: Some(rgba(0x0000001a).into()),
+                        ghost_element_selected: Some(rgba(0x7e57c2ff).into()),
                         text: Some(rgba(0xffffffff).into()),
                         status_bar_background: Some(rgba(0x25293aff).into()),
                         title_bar_background: Some(rgba(0x25293aff).into()),

crates/theme2/src/themes/rose_pine.rs

@@ -33,6 +33,7 @@ pub fn rose_pine() -> UserThemeFamily {
                         element_selected: Some(rgba(0x6e6a8633).into()),
                         drop_target_background: Some(rgba(0x1f1d2eff).into()),
                         ghost_element_hover: Some(rgba(0x6e6a861a).into()),
+                        ghost_element_selected: Some(rgba(0x6e6a8633).into()),
                         text: Some(rgba(0xe0def4ff).into()),
                         status_bar_background: Some(rgba(0x191724ff).into()),
                         title_bar_background: Some(rgba(0x191724ff).into()),
@@ -284,6 +285,7 @@ pub fn rose_pine() -> UserThemeFamily {
                         element_selected: Some(rgba(0x817c9c26).into()),
                         drop_target_background: Some(rgba(0x2a273fff).into()),
                         ghost_element_hover: Some(rgba(0x817c9c14).into()),
+                        ghost_element_selected: Some(rgba(0x817c9c26).into()),
                         text: Some(rgba(0xe0def4ff).into()),
                         status_bar_background: Some(rgba(0x232136ff).into()),
                         title_bar_background: Some(rgba(0x232136ff).into()),
@@ -535,6 +537,7 @@ pub fn rose_pine() -> UserThemeFamily {
                         element_selected: Some(rgba(0x6e6a8614).into()),
                         drop_target_background: Some(rgba(0xfffaf3ff).into()),
                         ghost_element_hover: Some(rgba(0x6e6a860d).into()),
+                        ghost_element_selected: Some(rgba(0x6e6a8614).into()),
                         text: Some(rgba(0x575279ff).into()),
                         status_bar_background: Some(rgba(0xfaf4edff).into()),
                         title_bar_background: Some(rgba(0xfaf4edff).into()),

crates/theme2/src/themes/solarized.rs

@@ -25,12 +25,14 @@ pub fn solarized() -> UserThemeFamily {
                         border_selected: Some(rgba(0x003847ff).into()),
                         border_transparent: Some(rgba(0x003847ff).into()),
                         border_disabled: Some(rgba(0x003847ff).into()),
+                        elevated_surface_background: Some(rgba(0x00212bff).into()),
                         background: Some(rgba(0x002b36ff).into()),
                         element_background: Some(rgba(0x2aa19899).into()),
                         element_hover: Some(rgba(0x004454aa).into()),
                         element_selected: Some(rgba(0x005a6fff).into()),
                         drop_target_background: Some(rgba(0x00445488).into()),
                         ghost_element_hover: Some(rgba(0x004454aa).into()),
+                        ghost_element_selected: Some(rgba(0x005a6fff).into()),
                         text: Some(rgba(0xbbbbbbff).into()),
                         status_bar_background: Some(rgba(0x00212bff).into()),
                         title_bar_background: Some(rgba(0x002c39ff).into()),
@@ -288,11 +290,13 @@ pub fn solarized() -> UserThemeFamily {
                         border_selected: Some(rgba(0xddd6c1ff).into()),
                         border_transparent: Some(rgba(0xddd6c1ff).into()),
                         border_disabled: Some(rgba(0xddd6c1ff).into()),
+                        elevated_surface_background: Some(rgba(0xeee8d5ff).into()),
                         background: Some(rgba(0xfdf6e3ff).into()),
                         element_background: Some(rgba(0xac9d57ff).into()),
                         element_hover: Some(rgba(0xdfca8844).into()),
                         element_selected: Some(rgba(0xdfca88ff).into()),
                         ghost_element_hover: Some(rgba(0xdfca8844).into()),
+                        ghost_element_selected: Some(rgba(0xdfca88ff).into()),
                         text: Some(rgba(0x333333ff).into()),
                         status_bar_background: Some(rgba(0xeee8d5ff).into()),
                         title_bar_background: Some(rgba(0xeee8d5ff).into()),

crates/theme2/src/themes/synthwave_84.rs

@@ -19,12 +19,14 @@ pub fn synthwave_84() -> UserThemeFamily {
             styles: UserThemeStylesRefinement {
                 colors: ThemeColorsRefinement {
                     border_focused: Some(rgba(0x1f212bff).into()),
+                    elevated_surface_background: Some(rgba(0x232530ff).into()),
                     background: Some(rgba(0x262335ff).into()),
                     element_background: Some(rgba(0x614d85ff).into()),
                     element_hover: Some(rgba(0x37294d99).into()),
                     element_selected: Some(rgba(0xffffff20).into()),
                     drop_target_background: Some(rgba(0x34294f66).into()),
                     ghost_element_hover: Some(rgba(0x37294d99).into()),
+                    ghost_element_selected: Some(rgba(0xffffff20).into()),
                     text: Some(rgba(0xffffffff).into()),
                     status_bar_background: Some(rgba(0x241b2fff).into()),
                     title_bar_background: Some(rgba(0x241b2fff).into()),

crates/theme_importer/src/vscode/converter.rs

@@ -153,7 +153,7 @@ impl VsCodeThemeConverter {
                 .as_ref()
                 .traverse(|color| try_parse_color(&color))?,
             elevated_surface_background: vscode_colors
-                .panel_background
+                .dropdown_background
                 .as_ref()
                 .traverse(|color| try_parse_color(&color))?,
             surface_background: vscode_colors
@@ -185,6 +185,10 @@ impl VsCodeThemeConverter {
                 .list_hover_background
                 .as_ref()
                 .traverse(|color| try_parse_color(&color))?,
+            ghost_element_selected: vscode_colors
+                .list_active_selection_background
+                .as_ref()
+                .traverse(|color| try_parse_color(&color))?,
             drop_target_background: vscode_colors
                 .list_drop_background
                 .as_ref()