Night mode CSS is buggy when horizontal scroll is needed for open-source version.

[kchen05]

Only on open-source version:
If you type a line long enough that horizontal scroll is needed, night mode has some issues where it'll go back to light mode CSS (for just the coding terminal) if you click anywhere on the terminal. Highlighting is also removed when this happens. Picture for reference:

While the server version has no issues with this, it seems that the open-source version has had this bug for a while (I git checkout'ed some old commits).

[DubeySandeep]

Hi @kchen05, I was investigating around this issue and found it's reproducible even if you will press "tab" key just after changing the theme.

I found that with tab key press or on clicking on the scroll bar the Codemirror get focused (you can see a borderline) and the CodeMirror gets into the accessible mode, whereas when we are changing the theme we are only changing the codeMirrorOptions.theme

tie/client/question/components/LearnerViewDirective.js

Lines 1064 to 1070 in 52160a2

	$scope.changeTheme = function(newThemeName) {
	$scope.pulseAnimationEnabled = false;
	if (newThemeName === THEME_NAME_DARK) {
	$scope.codeMirrorOptions.theme = 'mbo';
	} else {
	$scope.codeMirrorOptions.theme = 'default';
	}

We should also change the $scope.accessibleCodeMirrorOptions.theme.
Currently, I'm not pretty aware of "accessibleMode" so I don't know whether it's an expected behavior or not (clicking on scroll bar should make the Codemirror into accessible mode). If it's an expected behavior then I'll send a PR! :)

One more issue I found:
On changing theme the scrollbar style remains the same till you click on it.