Feature Requests

Feature Requests
0

#1

freeCodeCamp, which I just discovered a few days ago in the Scout Report, is awesome. I can’t believe people have done so much work to provide a well thought out linear path to competence. Thank you!

My Feature Request: A way to change the background color of the code window from black to white, and the default code color from white to black. I am color impaired and have trouble seeing red characters on a black background.

I know that as a workaround I can use an external editor and past the results in the code window, but that might be a little daunting for some absolute novices.


Background and Character Color of Coding Window
#2

Is there any way to change the background color of the code window from black to white, and the default code color from white to black? I am color impaired and have trouble seeing red characters on a black background.


#3

Yes. It depends on the code editor you use but I guess that if u go into view tab and settings or theme you can change the theme. If u don’t find the view tab you can search for setting and then change the theme.


#4

I’m using the coding window in the Chrome browser that is provided with the freeCodeCamp challenges, but I don’t see anyplace in settings for background and foreground colors.


#5

I don’t think there is a light themed code editor on FreeCodeCamp at the moment :frowning: One possible solution would be to use an editor on your PC and copy the code to FCC to check if it works correctly.


#6

Perhaps they could add the color change functionality and store the data in the user localstorage.


#7

Thanks. If it’s not there, I can stop wasting time looking for it. I used to use Vim anyway, and might just go back to it if I have enough trouble reading the code editor provided by freeCodeCamp in the browser window.


#8

I don’t know how helpful this would be because I don’t know what colors cause problems, but editor colors do change a bit if you use the “night mode” feature in FCC. It’s still a black editor, but it looks like there is a higher contrast at least.

To try this, go to your profile. Click “Update your settings”. Click “Night Mode”. It’s a little buggy still (new feature), but worth a try.

This is also the type of thing that it’s very helpful to know about. If you haven’t yet, I think this would be a great thing to create an issue for on FCC’s GitHub [link]. If you could include what type of colors and color combinations can present problems. Maybe someone could work on a high contrast or accessibility theme for FCC. That might also be a good opportunity to pay attention to font types and sizes that may improve the experience for other campers. (Maybe before long, you’ll have the skills to contribute it!)


#9

Thanks. While the night mode preference does not stay selected for me after I leave the preferences page, I have created issue #8845. Thanks to you, and the helpful explanations on the FCC pages at Github, I now know how to report an issue.


#10

This highlights an important point: how accessibility friendly are the pages on FCC? Has anyone run them through a tool like Deque FireEyes or a regular screen reader?


#11

Custom JavaScript for Websites is a chrome extension that let’s you add JavaScript to your local cache of a website, and you can keep it the way you want it with every page load.

I took the liberty of a writing a script that might make it easier for you to read. You can test it without the Chrome extension by pressing F12, clicking Console, and pasting the code.

If you decide not to use it, don’t worry. I did it as much for learning as I did for helping.


#12

@VincentDiCarlo
There is an addon called Stylish for firefox and chrome that allows you to write custom css for any website, which will always be applied when you visit the site. In this screenshot, I colored keywords yellow. You can inspect the element you want to change using the dev tools of your browser (in ff the shortcut is ctrl-shift-c). Click on the stylish icon, select Write new style->For freecodecamp.com and you can add the css you want.


#13

Hello Vincent, did you find a solution to your problem? I have exactly the same issue, a search on the forums didn’t help me. Thanks :slight_smile:


#14

did you find a solution to your problem?

No. I have been working on other things and haven’t tried it again since asking the question. Thanks for posting your update.


#15

Did none of the suggested extensions work? Not that the feature shouldn’t be added, but they look like decent workarounds (and would work for other inaccessible sites too).