[speedreader] Dark/Light theme support

[iefremov]

Speedreader should automatically show a light or dark distilled page, according to the browser settings.
We need to negotiate the exact theme colors with the design team

[stephendonner]

Verified PASSED using

Brave	1.44.75 Chromium: 105.0.5195.102 (Official Build) beta (x86_64)
Revision	4c16f5ffcc2da70ee2600d5db77bed423ac03a5a-refs/branch-heads/5195_55@{#4}
OS	macOS Version 11.6.8 (Build 20G730)

Steps:

1. installed 1.44.75
2. launched Brave
3. deleted the jicbkmdloagakknpihibphagfckhjdih component directory
4. loaded https://www.bbc.com/news/business-58559179
5. clicked on the Speedreader icon
6. opened Developer Tools -> Console panel
7. entered document.documentElement.setAttribute('data-theme', 'dark') and pressed return
8. confirmed the Light theme changed to Dark and was applied in Speedreader mode to the article
9. entered document.documentElement.setAttribute('data-theme', 'light') and pressed return
10. confirmed the Dark theme changed to Light and was applied
11. entered document.documentElement.setAttribute('data-theme', 'sepia') and pressed return
12. confirmed the Light theme changed to Sepia and was applied
13. entered document.documentElement.removeAttribute('data-theme') and pressed return
14. confirmed the Dark mode returned

step 3	step 4-5	steps 7-8	steps 9-10	steps 11-12	steps 13-14

[MadhaviSeelam]

Verification PASSED using

Brave | 1.44.82 Chromium: 105.0.5195.102 (Official Build) beta (64-bit)
-- | --
Revision | 4c16f5ffcc2da70ee2600d5db77bed423ac03a5a-refs/branch-heads/5195_55@{#4}
OS | Windows 11 Version 21H2 (Build 22000.856)

1. Installed 1..44.82
2. launched Brave
3. deleted the jicbkmdloagakknpihibphagfckhjdih component directory
4. confirmed brave://settings/appearance is Dark
5. loaded https://www.bbc.com/news/business-58559179
6. clicked on the Speedreader icon
7. opened Developer Tools -> Console panel
8. entered document.documentElement.setAttribute('data-theme', 'dark') and pressed return
9. confirmed the Light theme on the page changed to Dark and was applied in Speedreader mode to the article
10. entered document.documentElement.setAttribute('data-theme', 'light') and pressed return
11. confirmed the Dark theme changed to Light and was applied
12. entered document.documentElement.setAttribute('data-theme', 'sepia') and pressed return
13. confirmed the Light theme changed to Sepia and was applied
14. entered document.documentElement.removeAttribute('data-theme') and pressed return
15. confirmed the Dark mode returned

step 3	step 4	step5-6	step8-9	step10-11	step12-13	step 14-15

[btlechowski]

Verification passed on

Brave	1.44.97 Chromium: 106.0.5249.55 (Official Build) (64-bit)
Revision	4d5f098fca6ab7f4b6b7c240be3d9593c2357709-refs/branch-heads/5249@{#531}
OS	Ubuntu 18.04 LTS

1. Installed 1..44.82
2. launched Brave
3. deleted the jicbkmdloagakknpihibphagfckhjdih component directory
4. confirmed brave://settings/appearance is Dark
5. loaded https://www.bbc.com/news/business-58559179
6. clicked on the Speedreader icon
7. opened Developer Tools -> Console panel
8. entered document.documentElement.setAttribute('data-theme', 'dark') and pressed return
9. confirmed the Light theme on the page changed to Dark and was applied in Speedreader mode to the article
10. entered document.documentElement.setAttribute('data-theme', 'light') and pressed return
11. confirmed the Dark theme changed to Light and was applied
12. entered document.documentElement.setAttribute('data-theme', 'sepia') and pressed return
13. confirmed the Light theme changed to Sepia and was applied
14. entered document.documentElement.removeAttribute('data-theme') and pressed return
15. confirmed the Dark mode returned