Change:
} }); <del> registerThemingParticipant((theme) => { registerColor('interactive.activeCodeBorder', { dark: theme.getColor(peekViewBorder) ?? '#007acc', light: theme.getColor(peekViewBorder) ?? '#007acc', hcDark: contrastBorder, hcLight: contrastBorder }, localize('interactive.activeCodeBorder', 'The border color for the current interactive code cell when the editor has focus.')); // registerColor('interactive.activeCodeBackground', { // 	dark: (theme.getColor(peekViewEditorBackground) ?? Color.fromHex('#001F33')).transparent(0.25), // 	light: (theme.getColor(peekViewEditorBackground) ?? Color.fromHex('#F2F8FC')).transparent(0.25), // 	hc: Color.black // }, localize('interactive.activeCodeBackground', 'The background color for the current interactive code cell when the editor has focus.')); registerColor('interactive.inactiveCodeBorder', { dark: theme.getColor(listInactiveSelectionBackground) ?? transparent(listInactiveSelectionBackground, 1), light: theme.getColor(listInactiveSelectionBackground) ?? transparent(listInactiveSelectionBackground, 1), hcDark: PANEL_BORDER, hcLight: PANEL_BORDER }, localize('interactive.inactiveCodeBorder', 'The border color for the current interactive code cell when the editor does not have focus.')); // registerColor('interactive.inactiveCodeBackground', { // 	dark: (theme.getColor(peekViewResultsBackground) ?? Color.fromHex('#252526')).transparent(0.25), // 	light: (theme.getColor(peekViewResultsBackground) ?? Color.fromHex('#F3F3F3')).transparent(0.25), // 	hc: Color.black // }, localize('interactive.inactiveCodeBackground', 'The backgorund color for the current interactive code cell when the editor does not have focus.')); }); </del> <ins> registerColor('interactive.activeCodeBorder', { dark: ifDefinedThenElse(peekViewBorder, peekViewBorder, '#007acc'), light: ifDefinedThenElse(peekViewBorder, peekViewBorder, '#007acc'), hcDark: contrastBorder, hcLight: contrastBorder }, localize('interactive.activeCodeBorder', 'The border color for the current interactive code cell when the editor has focus.')); registerColor('interactive.inactiveCodeBorder', { //dark: theme.getColor(listInactiveSelectionBackground) ?? transparent(listInactiveSelectionBackground, 1), dark: ifDefinedThenElse(listInactiveSelectionBackground, listInactiveSelectionBackground, '#37373D'), light: ifDefinedThenElse(listInactiveSelectionBackground, listInactiveSelectionBackground, '#E4E6F1'), hcDark: PANEL_BORDER, hcLight: PANEL_BORDER }, localize('interactive.inactiveCodeBorder', 'The border color for the current interactive code cell when the editor does not have focus.')); </ins> Registry.as<IConfigurationRegistry>(ConfigurationExtensions.Configuration).registerConfiguration({ id: 'interactiveWindow',

Discussion:
Don't call registerColor from registerThemingParticipant, as this only works by accident. applies the theme to the registered color variables. At this point, no new colors should be registered. Consider assigning these colors a 100% transparent color as default value. Then you can use a conditional check to only use this color if it is non-transparent, otherwise use the default color.
Where would that take place? Inside of registerThemingParticipant? We're using the Color as a object within the , so we can't just adjust the css.
do you know what they should do best here?
You want to register a color where the default colors are computed based on other colors? You can do this with color transformers. We have some predefined ones like , , but also more complex ones as and . is likely what you want: