Added dark mode support on the settings page

Updated p, label color for light mode, removed commented code
This commit is contained in:
Maxx Crawford 2020-05-26 22:31:13 -05:00
parent 765a0eb727
commit b47844b43a
3 changed files with 41 additions and 5 deletions

28
src/css/options.css Normal file
View file

@ -0,0 +1,28 @@
body {
background: #fff;
color: #202023;
}
h3 {
margin-block-start: 2.5rem;
}
h3:first-of-type {
margin-block-start: 1rem;
}
p,
label {
color: rgb(74, 74, 79);
}
@media (prefers-color-scheme: dark) {
body {
background: #202023;
color: #fff;
}
p,
label {
color: rgb(177, 177, 179);
}
}

View file

@ -143,6 +143,7 @@
"/img/container-site-d-24.png"
],
"options_ui": {
"page": "options.html"
"page": "options.html",
"browser_style": true
}
}

View file

@ -3,20 +3,25 @@
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/options.css">
</head>
<body>
<form>
<h3>Optional Permissions:</h3>
<label>
<input type="checkbox" id="bookmarksPermissions">
Enable Bookmark Menus
</label>
<p>This setting allows you to open a bookmark or folder of bookmarks in a container.</p>
<p><em>This setting allows you to open a bookmark or folder of bookmarks in a container.</em></p>
<h3>Firefox Accounts Sync:</h3>
<label>
<input type="checkbox" id="syncCheck">
Enable Sync
</label>
<p>This setting allows you to sync your containers and site assignments across devices.</p>
<p><em>This setting allows you to sync your containers and site assignments across devices.</em></p>
<h3>Keyboard Shortcuts:</h3>
<p><em>Edit which container is opened when using the numbered shortcuts.</em></p>
<p><label>
Container to open with Keyboard Shortcut 1
<select id="open_container_0">
@ -67,7 +72,9 @@
<select id="open_container_9">
</select>
</label></p>
<h3>Onboarding:</h3>
<button>Reset Onboarding Panels</button>
<p><em>Toggle this to see the onboarding panels again.</em></p>
</form>
<script src="js/options.js"></script>
</body>