FOLDING AT HOME IN THE DARK Themes

These are additional themes developed for the "FOLDING AT HOME IN THE DARK" browser extension.

Usage

1. Find the extension's directory

2. Duplicate it

3. Add the .css files under assets/css/team to the same location in the duplicated directory

4. Update the fah_custom.html file to make the themes selectable

   1. Search for box-theme-id

   2. Locate this line:

      <option value="assets/css/team/encom_os.css">Encom OS</option>

   3. After that line, add the following lines:

      <option value="assets/css/team/original_light.css">Original Light</option>
      <option value="assets/css/team/original_dark.css">Original Dark</option>
      <option value="assets/css/team/original_dynamic.css">Original Dynamic</option>

   Note: These can be placed anywhere under the <select> tag

5. Update the fah.js file to ensure the "Team" section doesn't disappear

   1. Search for function update_theme_style_rollover

   2. Find this bit of code:

      themestylecss == "" || themestylecss == undefined

   3. Replace it with this code:

      ["", undefined].includes(themestylecss) || themestylecss.includes("original")

6. Open the extensions manager

7. Enable "Developer Mode" in the top right corner

8. Find the existing extension installation and disable or remove it

9. Click the "Load Unpacked" button

10. Select your updated, duplicated directory

Documentation

All themes have CSS variables declared at the top of their files. This makes them easy to tweak or duplicate to build your own theme.

It's worth noting that there have been tweaks to things like borders, box shadows, padding, and margin to achieve a look & feel similar to the original interface. Also, certain elements are grouped for coloring. These factors may make building your own theme more complicated than changing CSS variables, depending on your vision.

Original Light

This is based on the original interface that can be seen when the aforementioned browser extension is not installed.

Original Dark

This is a darkened version of Original Light.

Original Dynamic

This relies on the prefers-color-scheme CSS media feature to detect your light or dark preference. This is useful if you use any tools to change your theme based on the time of day.

Links

• extension
• Folding.LAR.systems