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" "/img/container-site-d-24.png"
], ],
"options_ui": { "options_ui": {
"page": "options.html" "page": "options.html",
"browser_style": true
} }
} }

View file

@ -3,20 +3,25 @@
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<link rel="stylesheet" href="css/options.css">
</head> </head>
<body> <body>
<form> <form>
<h3>Optional Permissions:</h3>
<label> <label>
<input type="checkbox" id="bookmarksPermissions"> <input type="checkbox" id="bookmarksPermissions">
Enable Bookmark Menus Enable Bookmark Menus
</label> </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> <label>
<input type="checkbox" id="syncCheck"> <input type="checkbox" id="syncCheck">
Enable Sync Enable Sync
</label> </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> <p><label>
Container to open with Keyboard Shortcut 1 Container to open with Keyboard Shortcut 1
<select id="open_container_0"> <select id="open_container_0">
@ -67,7 +72,9 @@
<select id="open_container_9"> <select id="open_container_9">
</select> </select>
</label></p> </label></p>
<h3>Onboarding:</h3>
<button>Reset Onboarding Panels</button> <button>Reset Onboarding Panels</button>
<p><em>Toggle this to see the onboarding panels again.</em></p>
</form> </form>
<script src="js/options.js"></script> <script src="js/options.js"></script>
</body> </body>