feat(web): add a theme selector to the Options menu · mitmproxy/mitmproxy@d6b3dbb · GitHub
Skip to content

Commit d6b3dbb

Browse files
sleeyaxsleeyax
committed
feat(web): add a theme selector to the Options menu
The web_theme option was only reachable by scrolling to the bottom of the raw options list in the Edit Options modal. Surface it as an Appearance dropdown (system/dark/light) in the header Options menu so the theme is discoverable and switchable in one click.
1 parent 67f1256 commit d6b3dbb

4 files changed

Lines changed: 165 additions & 1 deletion

File tree

‎web/src/css/header.less‎

Lines changed: 6 additions & 0 deletions

‎web/src/js/__tests__/components/Header/__snapshots__/OptionMenuSpec.tsx.snap‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -217,6 +217,45 @@ exports[`OptionMenu Component should render correctly 1`] = `
217217
View Options
218218
</div>
219219
</div>
220+
<div
221+
class="menu-group"
222+
>
223+
<div
224+
class="menu-content"
225+
>
226+
<div
227+
class="menu-entry"
228+
>
229+
<label>
230+
Theme
231+
<select
232+
class="theme-select"
233+
>
234+
<option
235+
value="system"
236+
>
237+
system
238+
</option>
239+
<option
240+
value="dark"
241+
>
242+
dark
243+
</option>
244+
<option
245+
value="light"
246+
>
247+
light
248+
</option>
249+
</select>
250+
</label>
251+
</div>
252+
</div>
253+
<div
254+
class="menu-legend"
255+
>
256+
Appearance
257+
</div>
258+
</div>
220259
</div>
221260
</DocumentFragment>
222261
`;

‎web/src/js/__tests__/components/__snapshots__/HeaderSpec.tsx.snap‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -639,6 +639,45 @@ exports[`Header 2`] = `
639639
View Options
640640
</div>
641641
</div>
642+
<div
643+
class="menu-group"
644+
>
645+
<div
646+
class="menu-content"
647+
>
648+
<div
649+
class="menu-entry"
650+
>
651+
<label>
652+
Theme
653+
<select
654+
class="theme-select"
655+
>
656+
<option
657+
value="system"
658+
>
659+
system
660+
</option>
661+
<option
662+
value="dark"
663+
>
664+
dark
665+
</option>
666+
<option
667+
value="light"
668+
>
669+
light
670+
</option>
671+
</select>
672+
</label>
673+
</div>
674+
</div>
675+
<div
676+
class="menu-legend"
677+
>
678+
Appearance
679+
</div>
680+
</div>
642681
</div>
643682
</div>
644683
</header>
@@ -1068,6 +1107,45 @@ exports[`Header 3`] = `
10681107
View Options
10691108
</div>
10701109
</div>
1110+
<div
1111+
class="menu-group"
1112+
>
1113+
<div
1114+
class="menu-content"
1115+
>
1116+
<div
1117+
class="menu-entry"
1118+
>
1119+
<label>
1120+
Theme
1121+
<select
1122+
class="theme-select"
1123+
>
1124+
<option
1125+
value="system"
1126+
>
1127+
system
1128+
</option>
1129+
<option
1130+
value="dark"
1131+
>
1132+
dark
1133+
</option>
1134+
<option
1135+
value="light"
1136+
>
1137+
light
1138+
</option>
1139+
</select>
1140+
</label>
1141+
</div>
1142+
</div>
1143+
<div
1144+
class="menu-legend"
1145+
>
1146+
Appearance
1147+
</div>
1148+
</div>
10711149
</div>
10721150
</div>
10731151
</header>

‎web/src/js/components/Header/OptionMenu.tsx‎

Lines changed: 42 additions & 1 deletion

0 commit comments

Comments
 (0)