From 83db64d0844028e3a86dc805d67fe12c70ed6b0e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=81ron=20Hegymegi-Kiss?= <hegymegi@outlook.com>
Date: Sun, 9 Jan 2022 21:28:30 +0100
Subject: [PATCH] address isssues for pull request

---
 public/_locales/en/messages.json            |  12 +-
 public/help/styles.css                      | 148 +++++++++++---
 public/options/options.css                  | 213 ++++++++++----------
 public/options/options.html                 | 118 +++++------
 src/components/KeybindComponent.tsx         |   4 +-
 src/components/KeybindDialogComponent.tsx   |   2 +
 src/components/SponsorTimeEditComponent.tsx |   2 +-
 src/help.ts                                 |   7 +
 src/options.ts                              |  45 +++--
 9 files changed, 327 insertions(+), 224 deletions(-)

diff --git a/public/_locales/en/messages.json b/public/_locales/en/messages.json
index d41065a6..7a7ae0c8 100644
--- a/public/_locales/en/messages.json
+++ b/public/_locales/en/messages.json
@@ -863,13 +863,9 @@
         "message": "h",
         "description": "100h"
     },
-    "optionsTabCategories": {
-        "message": "Categories",
-        "description": "Appears in Options as a tab header for setting up categories. To fit inside the button, it should not be longer than ~20-25 characters (depending on their width)."
-    },
     "optionsTabBehavior": {
         "message": "Behavior",
-        "description": "Appears in Options as a tab header for options related to the general behavior of the extension. To fit inside the button, it should not be longer than ~20-25 characters (depending on their width)."
+        "description": "Appears in Options as a tab header for options related to categories and skipping behavior. To fit inside the button, it should not be longer than ~20-25 characters (depending on their width)."
     },
     "optionsTabInterface": {
         "message": "Interface",
@@ -879,16 +875,12 @@
         "message": "Keyboard shortcuts",
         "description": "Appears in Options as a tab header for keybinds. To fit inside the button, it should not be longer than ~20-25 characters (depending on their width)."
     },
-    "optionsTabPrivacy": {
-        "message": "Privacy",
-        "description": "Appears in Options as a tab header for options related to privacy (data stored/sent to server). To fit inside the button, it should not be longer than ~20-25 characters (depending on their width)."
-    },
     "optionsTabBackup": {
         "message": "Backup/Restore",
         "description": "Appears in Options as a tab header for options related to saving/restoring your settings. To fit inside the button, it should not be longer than ~20-25 characters (depending on their width)."
     },
     "optionsTabAdvanced": {
-        "message": "Advanced",
+        "message": "Miscellaneous",
         "description": "Appears in Options as a tab header for advanced/niche options. To fit inside the button, it should not be longer than ~20-25 characters (depending on their width)."
     },
     "noticeVisibilityLabel": {
diff --git a/public/help/styles.css b/public/help/styles.css
index 8e336a46..99ff809d 100644
--- a/public/help/styles.css
+++ b/public/help/styles.css
@@ -1,5 +1,31 @@
+:root {
+  --color-scheme: dark;
+  --background: #333333;
+  --header-color: #212121;
+  --dialog-background: #181818;
+  --dialog-border: white;
+  --text: #c4c4c4;
+  --title: #dad8d8;
+  --disabled: #520000;
+  --black: black;
+  --white: white;
+}
+
+[data-theme="light"] {
+  --color-scheme: light;
+  --background: #f9f9f9;
+  --header-color: white;
+  --dialog-background: #f9f9f9;
+  --dialog-border: #282828;
+  --text: #262626;
+  --title: #707070;
+  --disabled: #ffcaca;
+  --black: white;
+  --white: black;
+}
+
 html {
-  color-scheme: dark;
+  color-scheme: var(--color-scheme);
 }
 
 .bigText {
@@ -7,7 +33,7 @@ html {
 }
 
 body {
-  background-color: #333333;
+  background-color: var(--background);
   font-family: sans-serif;
 }
 
@@ -15,6 +41,10 @@ body {
   text-align: center;
 }
 
+.inline {
+  display: inline-block;
+}
+
 .container {
   max-width: 60%;
   margin: auto;
@@ -54,7 +84,7 @@ body {
   vertical-align: middle;
 
   font-size: 50px;
-  color: #212121;
+  color: var(--header-color);
 
   padding: 20px;
   
@@ -127,8 +157,8 @@ p,li {
   font-size: 16px;
 }
 
-p,li,a {
-  color: #c4c4c4;
+p,li,a,span,div {
+  color: var(--text);
 }
 
 p,li,code,a {
@@ -162,7 +192,7 @@ img {
 }
 
 h1,h2,h3,h4,h5,h6 {
-  color: #dad8d8;
+  color: var(--title);
   text-align: center;
 }
 
@@ -203,21 +233,93 @@ svg {
   }
 }
 
-/* Light mode, if requested */
-@media only screen and (prefers-color-scheme: light) {
-  html {
-      color-scheme: light;
-  }
-  body {
-      background-color: #f9f9f9;
-  }
-  p,li,a {
-      color: #262626;
-  }
-  h1,h2,h3,h4,h5,h6 {
-      color: #707070;
-  }
-  #title {
-    color: white;
-  }
+/* keybind dialog */
+.key {
+  border-width: 1px;
+  border-style: solid;
+  border-radius: 5px;
+  display: inline-block;
+  min-width: 33px;
+  text-align: center;
+  font-weight: bold;
+  border-color: var(--white);
+  box-sizing: border-box;
+}
+
+.unbound, .key {
+  padding: 8px;
+}
+
+#keybind-dialog .dialog {
+  position: fixed;
+  border-width: 3px;
+  border-style: solid;
+  border-radius: 15px;
+  max-height: 100vh;
+  width: 400px;
+  overflow-x: auto;
+  z-index: 100;
+  padding: 15px;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  font-size: 14px;
+  background-color: var(--dialog-background);
+  border-color: var(--dialog-border);
+}
+
+#change-keybind-buttons {
+  float: right;
+}
+
+#change-keybind-buttons > .option-button {
+  margin: 0 2px;
+}
+
+#change-keybind-settings {
+  margin: 15px 15px 30px;
+}
+
+#change-keybind-settings .key {
+  vertical-align: top;
+  margin: 15px 0 0 40px;
+  height: 34px;
+}
+
+#change-keybind-error {
+  margin-bottom: 15px;
+  color: red;
+  font-weight: bold;
+}
+
+.blocker {
+  position: fixed;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  z-index: 90;
+  background-color: #00000080;
+}
+
+.option-button {
+  cursor: pointer;
+
+  background-color: #c00000;
+  padding: 10px;
+  color: white;
+  border-radius: 5px;
+  font-size: 14px;
+
+  width: max-content;
+}
+
+.option-button:hover:not(.disabled) {
+  background-color: #fc0303;
+}
+
+.option-button.disabled {
+  cursor: default;
+  background-color: var(--disabled);
+  color: grey;
 }
\ No newline at end of file
diff --git a/public/options/options.css b/public/options/options.css
index fabd9c4e..7bfcc035 100644
--- a/public/options/options.css
+++ b/public/options/options.css
@@ -1,101 +1,59 @@
 /* Options page CSS */
 
-/* Dark mode CSS, this is the default if unsupported */
-html {
-    color-scheme: dark;
-}
-body {
-    background-color: #333333;
-}
-#navigation, #keybind-dialog .dialog {
-    background-color: #181818;
-    color: white;
-}
-.tab-heading {
-    background-color: #242424;
-    color: white;
-}
-.tab-heading:hover {
-    outline: 3px solid white;
-}
-.medium-description, .switch-container, .optionLabel, .categoryTableElement {
-    color: white;
-}
-.small-description, p, li, span, div {
-    color: #dfdfdf;
-}
-.option-button.disabled {
-    background-color: #520000;
-    color: grey;
-}
-.slider {
-    background-color: #707070;
-}
-h1,h2,h3,h4,h5,h6 {
-    color: #dad8d8;
-}
-.option-group > div {
-    border-bottom: 1px solid #484848;
-    border-image: linear-gradient(to right, #484848, #00000000 80%)  1;
-}
-.categoryTableElement td {
-    border-top: 1px solid #484848;
-}
-.key, #keybind-dialog .dialog {
-    border-color: white;
+:root {
+    --color-scheme: dark;
+    --background: #333333;
+    --menu-background: #181818;
+    --menu-foreground: white;
+    --dialog-background: #181818;
+    --dialog-border: white;
+    --tab-color: #242424;
+    --tab-hover: white;
+    --description: #dfdfdf;
+    --disabled: #520000;
+    --slider: #707070;
+    --title: #dad8d8;
+    --border-color: #484848;
+    --black: black;
+    --white: white;
 }
 
-/* Light mode, if requested */
-@media only screen and (prefers-color-scheme: light) {
-    html {
-        color-scheme: light;
-    }
-    body {
-        background-color: #f9f9f9;
-    }
-    #navigation, #keybind-dialog .dialog {
-        background-color: #dbdbdb;
-        color: #212121;
-    }
-    .tab-heading {
-        background-color: #ababab;
-        color: black;
-    }
-    .tab-heading:hover {
-        outline: 3px solid #2e2e2e;
-    }
-    .medium-description, .switch-container, .optionLabel, .categoryTableElement {
-        color: black;
-    }
-    .small-description, p, li, span, div {
-        color: #262626;
-    }
-    .option-button.disabled {
-        background-color: #ffcaca;
-        color: grey;
-    }
-    .slider {
-        background-color: #bfbebe;
-    }
-    h1,h2,h3,h4,h5,h6 {
-        color: #707070;
-    }
-    .option-group > div {
-        border-bottom: 1px solid #d9d9d9;
-        border-image: linear-gradient(to right, #d9d9d9, #00000000 80%)  1;
-    }
-    .categoryTableElement td {
-        border-top: 1px solid #d9d9d9;
-    }
-    .key, #keybind-dialog .dialog {
-        border-color: black;
-    }
+[data-theme="light"] {
+    --color-scheme: light;
+    --background: #f9f9f9;
+    --menu-background: #dbdbdb;
+    --menu-foreground: #212121;
+    --dialog-background: #f9f9f9;
+    --dialog-border: #282828;
+    --tab-color: #ababab;
+    --tab-hover: #2e2e2e;
+    --description: #262626;
+    --disabled: #ffcaca;
+    --slider: #bfbebe;
+    --title: #707070;
+    --border-color: #d9d9d9;
+    --black: white;
+    --white: black;
+}
+
+.medium-description, .switch-container, .optionLabel, .categoryTableElement {
+    color: var(--white);
+}
+
+.small-description, p, li, span, div {
+    color: var(--description);
+}
+
+h1,h2,h3,h4,h5,h6 {
+    color: var(--title);
 }
 
 html, body {
+    color-scheme: var(--color-scheme);
     font-family: sans-serif;
     margin: 0;
     font-size: 14px;
+    background-color: var(--background);
 }
 
 * {
@@ -104,10 +62,9 @@ html, body {
 
 #options-container {
     display: flex;
-    justify-content: space-between;
 }
 
-#navigation {
+#menubar {
     display: flex;
     flex-direction: column;
     gap: 20px;
@@ -117,12 +74,20 @@ html, body {
     border-radius: 15px;
     margin: 15px;
     z-index: 10;
+    background-color: var(--menu-background);
+    color: var(--menu-foreground);
+}
+
+#navigation {
+    display: flex;
+    flex-direction: column;
+    gap: 30px;
 }
 
 .tab-heading {
     font-size: 18px;
-    height: 50px;
-    line-height: 50px;
+    height: 55px;
+    line-height: 55px;
     width: 80%;
     margin: 0 auto;
     border-radius: 15px;
@@ -130,6 +95,12 @@ html, body {
     text-overflow: ellipsis;
     white-space: nowrap;
     overflow: hidden;
+    background-color: var(--tab-color);
+    color: var(--white);
+}
+
+.tab-heading:hover {
+    outline: 3px solid var(--tab-hover);
 }
 
 .tab-heading.selected {
@@ -144,6 +115,8 @@ html, body {
 .option-group > div {
     min-height: 50px;
     padding: 20px 0;
+    border-bottom: 1px solid var(--border-color);
+    border-image: linear-gradient(to right, var(--border-color), #00000000 80%)  1;
 }
 
 .option-group > div:last-child, .option-group > #keybind-dialog {
@@ -152,6 +125,7 @@ html, body {
 
 .optionLabel, #version {
     font-size: 14px;
+    height: 15px;
 }
 
 div[data-type="keybind-change"] .optionLabel {
@@ -172,6 +146,7 @@ input[type='number'] {
     min-width: 33px;
     text-align: center;
     font-weight: bold;
+    border-color: var(--white);
 }
 
 .unbound, .key {
@@ -186,7 +161,7 @@ input[type='number'] {
 }
 
 .keybind-buttons:hover {
-    background-color: #00000080;
+    background-color: #00000030;
 }
 
 .keybind-buttons > div, .keybind-buttons > span {
@@ -206,6 +181,8 @@ input[type='number'] {
     left: 50%;
     top: 50%;
     transform: translate(-50%, -50%);
+    background-color: var(--dialog-background);
+    border-color: var(--dialog-border);
 }
 
 #change-keybind-buttons {
@@ -291,6 +268,7 @@ input[type='number'] {
 
 .categoryTableElement td {
     padding-top: 10px;
+    border-top: 1px solid var(--border-color);
 }
 
 .medium-description {
@@ -319,6 +297,8 @@ input[type='number'] {
 
 .option-button.disabled {
     cursor: default;
+    background-color: var(--disabled);
+    color: grey;
 }
 
 #options {
@@ -326,7 +306,7 @@ input[type='number'] {
     flex-basis: 80%;
     overflow: auto;
     text-align: left;
-    padding: 80px 15px 0 3%;
+    padding: 80px 15% 0 3%;
     box-sizing: border-box;
 
     transition: padding 0.3s;
@@ -378,6 +358,7 @@ input[type='number'] {
     left: 0;
     right: 0;
     bottom: 0;
+    background-color: var(--slider);
 }
 
 .animated * {
@@ -452,9 +433,13 @@ input:checked + .slider:before {
 }
 
 #createdBy {
-    font-size: 14px;
     text-align: center;
-    margin-top: auto;
+    margin: auto 0 10px 0;
+    height: 50px;
+}
+
+#createdBy > * {
+    font-size: 14px;
 }
 
 #title {
@@ -463,7 +448,7 @@ input:checked + .slider:before {
   
     font-size: 40px;
   
-    padding: 20px;
+    padding: 40px 20px;
   
     text-decoration: none;
 }
@@ -600,20 +585,28 @@ svg {
 
 
 /* Handle smaller screensizes */
+@media only screen and (max-width: 1600px){
+    #options {
+        padding-right: 8%;
+    }
+}
+
 @media only screen and (max-height: 770px), only screen and (max-width: 1200px) {
     #options-container {
         flex-direction: column;
     }
-    #navigation {
-        flex-direction: row;
-        flex-wrap: wrap;
-        justify-content: flex-start;
-        align-items: center;
+    #menubar {
         gap: 8px;
         min-width: unset;
         max-width: unset;
         padding: 8px;
     }
+    #navigation {
+        gap: 8px;
+        flex-direction: row;
+        flex-wrap: wrap;
+        justify-content: center;
+    }
     #options {
         padding: 0 50px;
     }
@@ -625,24 +618,34 @@ svg {
         font-size: 16px;
         padding: 0 10px;
         margin: 0;
-        flex-grow: 1;
     }
     #title {
         width: 100%;
         font-size: 30px;
+        padding: 10px;
     }
     #title .profilepic {
         height: 40px;
     }
     #createdBy {
-        margin: unset;
+        margin: 10px 0 0 0;
+        height: unset;
         width: 100%;
     }
+    #createdBy > div {
+        display: inline-block;
+    }
+    #sbDonate {
+        position: absolute;
+        right: 30px;
+        margin-top: 10px;
+    }
     #version {
         font-size: 10px;
+        height: 10px;
         transform: translate(-50px, -5px);
     }
-    .sticky #navigation {
+    .sticky #menubar {
         position: fixed;
         left: 0;
         right: 0;
diff --git a/public/options/options.html b/public/options/options.html
index d422e50b..f981d43b 100644
--- a/public/options/options.html
+++ b/public/options/options.html
@@ -16,7 +16,7 @@
 
 	<div id="options-container">
 
-		<div id="navigation" class="center">
+		<div id="menubar" class="center">
 
 			<div id="title" class="titleBar">
 				<img src="../icons/LogoSponsorBlocker256px.png" class="profilepic" alt="SponsorBlock logo"/>
@@ -24,55 +24,47 @@
 				<div id="version"></div>
 			</div>
 
-			<div class="tab-heading" data-for="segments">
-				__MSG_optionsTabCategories__
-			</div>
+			<div id="navigation">
+				<div class="tab-heading" data-for="behavior">
+					__MSG_optionsTabBehavior__
+				</div>
 
-			<div class="tab-heading" data-for="behavior">
-				__MSG_optionsTabBehavior__
-			</div>
+				<div class="tab-heading" data-for="interface">
+					__MSG_optionsTabInterface__
+				</div>
 
-			<div class="tab-heading" data-for="interface">
-				__MSG_optionsTabInterface__
-			</div>
+				<div class="tab-heading" data-for="keybinds">
+					__MSG_optionsTabKeyBinds__
+				</div>
 
-			<div class="tab-heading" data-for="keybinds">
-				__MSG_optionsTabKeyBinds__
-			</div>
+				<div class="tab-heading" data-for="import">
+					__MSG_optionsTabBackup__
+				</div>
 
-			<div class="tab-heading" data-for="privacy">
-				__MSG_optionsTabPrivacy__
-			</div>
+				<div class="tab-heading" data-for="advanced">
+					__MSG_optionsTabAdvanced__
+				</div>
+		</div>
 
-			<div class="tab-heading" data-for="import">
-				__MSG_optionsTabBackup__
-			</div>
-
-			<div class="tab-heading" data-for="advanced">
-				__MSG_optionsTabAdvanced__
-			</div>
-
-			<p id="createdBy" class="titleBar">
-				<img src="../icons/newprofilepic.jpg" height="30" class="profilepiccircle" alt="profile picture of creator"/>
-				__MSG_createdBy__ 
-				<a href="https://ajay.app">Ajay Ramachandran</a> 
+			<div id="createdBy" class="titleBar">
+				<div>
+					<img src="../icons/newprofilepic.jpg" height="30" class="profilepiccircle" alt="profile picture of creator"/>
+					__MSG_createdBy__ 
+					<a href="https://ajay.app">Ajay Ramachandran</a> 
+				</div>
 				<a href="https://sponsor.ajay.app/donate" target="_blank" rel="noopener" id="sbDonate">(__MSG_Donate__)</a>
-			</p>
+			</div>
 
 		</div>
 
-		<div id="options" class="hidden">
+		<div id="options">
 
-			<div id="segments" class="option-group hidden">
+			<div id="behavior" class="option-group hidden">
 
 				<div id="category-type" data-type="react-CategoryChooserComponent">
 
 				</div>
 
-			</div>
-
-			<div id="behavior" class="option-group hidden">
-
 				<div data-type="toggle" data-sync="autoSkipOnMusicVideos">
 					<div class="switch-container">
 						<label class="switch">
@@ -318,36 +310,6 @@
 
 			</div>
 
-			<div id="privacy" class="option-group hidden">
-
-				<div data-type="toggle" data-sync="trackViewCount">
-					<div class="switch-container">
-						<label class="switch">
-							<input id="trackViewCount" type="checkbox" checked>
-							<span class="slider round"></span>
-						</label>
-						<label class="switch-label" for="trackViewCount">
-							__MSG_enableViewTracking__
-						</label>
-					</div>
-	
-					<div class="small-description">__MSG_whatViewTracking__</div>
-				</div>
-	
-				<div data-type="toggle" data-sync="trackViewCountInPrivate" data-dependent-on="trackViewCount" data-private-only="true">
-					<div class="switch-container">
-						<label class="switch">
-							<input id="trackViewCountInPrivate" type="checkbox" checked>
-							<span class="slider round"></span>
-						</label>
-						<label class="switch-label" for="trackViewCountInPrivate">
-							__MSG_enableViewTrackingInPrivate__
-						</label>
-					</div>
-				</div>
-
-			</div>
-
 			<div id="import" class="option-group hidden">
 
 				<div data-type="private-text-change" data-sync="userID" data-confirm-message="userIDChangeWarning">
@@ -439,6 +401,32 @@
 						</div>
 					</div>
 				</div>
+
+				<div data-type="toggle" data-sync="trackViewCount">
+					<div class="switch-container">
+						<label class="switch">
+							<input id="trackViewCount" type="checkbox" checked>
+							<span class="slider round"></span>
+						</label>
+						<label class="switch-label" for="trackViewCount">
+							__MSG_enableViewTracking__
+						</label>
+					</div>
+	
+					<div class="small-description">__MSG_whatViewTracking__</div>
+				</div>
+	
+				<div data-type="toggle" data-sync="trackViewCountInPrivate" data-dependent-on="trackViewCount" data-private-only="true">
+					<div class="switch-container">
+						<label class="switch">
+							<input id="trackViewCountInPrivate" type="checkbox" checked>
+							<span class="slider round"></span>
+						</label>
+						<label class="switch-label" for="trackViewCountInPrivate">
+							__MSG_enableViewTrackingInPrivate__
+						</label>
+					</div>
+				</div>
 	
 				<div data-type="button-press" data-sync="copyDebugInformation" data-confirm-message="copyDebugInformation">
 					<div class="option-button trigger-button">
diff --git a/src/components/KeybindComponent.tsx b/src/components/KeybindComponent.tsx
index 2c3146ea..17aefcbb 100644
--- a/src/components/KeybindComponent.tsx
+++ b/src/components/KeybindComponent.tsx
@@ -53,9 +53,9 @@ class KeybindComponent extends React.Component<KeybindProps, KeybindState> {
     }
 
     openEditDialog(): void {
-        dialog = document.createElement("div");
+        dialog = parent.document.createElement("div");
         dialog.id = "keybind-dialog";
-        document.body.prepend(dialog);
+        parent.document.body.prepend(dialog);
         ReactDOM.render(<KeybindDialogComponent option={this.props.option} closeListener={(updateWith) => this.closeEditDialog(updateWith)} />, dialog);
     }
 
diff --git a/src/components/KeybindDialogComponent.tsx b/src/components/KeybindDialogComponent.tsx
index 662256ca..c4e7cf48 100644
--- a/src/components/KeybindDialogComponent.tsx
+++ b/src/components/KeybindDialogComponent.tsx
@@ -76,10 +76,12 @@ class KeybindDialogComponent extends React.Component<KeybindDialogProps, Keybind
     }
 
     componentDidMount(): void {
+        parent.document.addEventListener("keydown", this.keybindKeyPressed);
         document.addEventListener("keydown", this.keybindKeyPressed);
     }
 
     componentWillUnmount(): void {
+        parent.document.removeEventListener("keydown", this.keybindKeyPressed);
         document.removeEventListener("keydown", this.keybindKeyPressed);
     }
 
diff --git a/src/components/SponsorTimeEditComponent.tsx b/src/components/SponsorTimeEditComponent.tsx
index 55efd0d1..7c96d7a5 100644
--- a/src/components/SponsorTimeEditComponent.tsx
+++ b/src/components/SponsorTimeEditComponent.tsx
@@ -371,7 +371,7 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
             if (confirm(chrome.i18n.getMessage("enableThisCategoryFirst")
                             .replace("{0}", chrome.i18n.getMessage("category_" + chosenCategory)))) {
                 // Open options page
-                chrome.runtime.sendMessage({message: "openConfig", hash: "segments"});
+                chrome.runtime.sendMessage({message: "openConfig", hash: "behavior"});
             }
             
             return;
diff --git a/src/help.ts b/src/help.ts
index 80ac974a..9e1027db 100644
--- a/src/help.ts
+++ b/src/help.ts
@@ -9,6 +9,13 @@ window.addEventListener('DOMContentLoaded', init);
 async function init() {
     utils.localizeHtmlPage();
 
+    //switch to light mode when requested, except for Chrome on Linux or older Windows/Mac versions, where Chrome doesn't support themes
+    if (window.matchMedia("(prefers-color-scheme: light)")?.matches &&
+            !(navigator.vendor == "Google Inc." && (navigator.userAgent.includes("Linux") ||
+                                                    navigator.userAgent.includes("Windows NT 6") ||
+                                                    navigator.userAgent.includes("Mac OS X") && navigator.userAgent.match(/Mac OS X [^)]+/)[0] < "Mac OS X 10_14")))
+        document.documentElement.setAttribute("data-theme", "light");
+
     await utils.wait(() => Config.config !== null);
 
     if (!showDonationLink()) {
diff --git a/src/options.ts b/src/options.ts
index 55c26a6c..a2f674e5 100644
--- a/src/options.ts
+++ b/src/options.ts
@@ -13,19 +13,41 @@ import CategoryChooser from "./render/CategoryChooser";
 import KeybindComponent from "./components/KeybindComponent";
 import { showDonationLink } from "./utils/configUtils";
 const utils = new Utils();
+let embed = false;
 
 window.addEventListener('DOMContentLoaded', init);
 
 async function init() {
     utils.localizeHtmlPage();
 
+    //switch to light mode when requested, except for Chrome on Linux or older Windows/Mac versions, where Chrome doesn't support themes
+    if (window.matchMedia("(prefers-color-scheme: light)")?.matches &&
+            !(navigator.vendor == "Google Inc." && (navigator.userAgent.includes("Linux") ||
+                                                    navigator.userAgent.includes("Windows NT 6") ||
+                                                    navigator.userAgent.includes("Mac OS X") && navigator.userAgent.match(/Mac OS X [^)]+/)[0] < "Mac OS X 10_14")))
+        document.documentElement.setAttribute("data-theme", "light");
+
+    // selected tab
+    if (location.hash != "") {
+        const substr = location.hash.substring(1);
+        let menuItem = document.querySelector(`[data-for='${substr}']`);
+        if (menuItem == null)
+            menuItem = document.querySelector(`[data-for='behavior']`);
+        menuItem.classList.add("selected");
+    } else {
+        document.querySelector(`[data-for='behavior']`).classList.add("selected");
+    }
+
+    document.getElementById("version").innerText = "v. " + chrome.runtime.getManifest().version;
+
     // Remove header if needed
     if (window.location.hash === "#embed") {
+        embed = true;
         for (const element of document.getElementsByClassName("titleBar")) {
             element.classList.add("hidden");
         }
-
         document.getElementById("options").classList.add("embed");
+        createStickyHeader();
     }
 
     if (!Config.configListeners.includes(optionsConfigUpdateListener)) {
@@ -35,7 +57,7 @@ async function init() {
     await utils.wait(() => Config.config !== null);
 
     if (!showDonationLink()) {
-        document.getElementById("sbDonate").style.display = "none";
+        document.getElementById("sbDonate").classList.add("hidden");
     }
 
     // Set all of the toggle options to the correct option
@@ -102,9 +124,9 @@ async function init() {
                             break;
                         case "showDonationLink":
                             if (checkbox.checked)
-                                document.getElementById("sbDonate").style.display = "none";
+                                document.getElementById("sbDonate").classList.add("hidden");
                             else
-                                document.getElementById("sbDonate").style.display = "unset";
+                                document.getElementById("sbDonate").classList.remove("hidden");
                             break;
                     }
 
@@ -249,16 +271,6 @@ async function init() {
     }
 
     // Tab interaction
-    if (location.hash != "") {
-        const substr = location.hash.substring(1);
-        let menuItem = document.querySelector(`[data-for='${substr}']`);
-        if (menuItem == null)
-            menuItem = document.querySelector(`[data-for='segments']`);
-        menuItem.classList.add("selected");
-    } else {
-        document.querySelector(`[data-for='segments']`).classList.add("selected");
-    }
-
     const tabElements = document.getElementsByClassName("tab-heading");
     for (let i = 0; i < tabElements.length; i++) {
         const tabFor = tabElements[i].getAttribute("data-for");
@@ -279,11 +291,8 @@ async function init() {
         });
     }
 
-    document.getElementById("version").innerText = "v. " + chrome.runtime.getManifest().version;
-
     window.onscroll = () => createStickyHeader();
 
-    optionsContainer.classList.remove("hidden");
     optionsContainer.classList.add("animated");
 }
 
@@ -291,7 +300,7 @@ function createStickyHeader() {
     const container = document.getElementById("options-container");
     const options = document.getElementById("options");
 
-    if (window.pageYOffset > 115) {
+    if (window.pageYOffset > 90 && (window.innerHeight <= 770 || window.innerWidth <= 1200) || embed) {
         if (!container.classList.contains("sticky")) {
             options.style.marginTop = options.offsetTop.toString()+"px";
             container.classList.add("sticky");