diff --git a/manifest.json b/manifest.json
index 9f127f2..d735b35 100644
--- a/manifest.json
+++ b/manifest.json
@@ -62,7 +62,7 @@
]
}],
"options_ui": {
- "browser_style": true,
+ "browser_style": false,
"page": "options/options.html"
},
"browser_action": {
diff --git a/options/notVisible-dark.svg b/options/notVisible-dark.svg
new file mode 100644
index 0000000..126ff09
--- /dev/null
+++ b/options/notVisible-dark.svg
@@ -0,0 +1,76 @@
+
+
+
+
diff --git a/options/options-dark.css b/options/options-dark.css
new file mode 100644
index 0000000..b6da05f
--- /dev/null
+++ b/options/options-dark.css
@@ -0,0 +1,26 @@
+body {
+ background-color: rgb(74, 74, 79);
+ color: rgb(249, 249, 250);
+}
+
+a:link, a:visited, a:active {
+ color: lightblue;
+}
+
+header .bookmarkNotice {
+ border: 1px dotted #E72020;
+ color: #FF8E8E;
+}
+
+input, textarea, select, button {
+ background-color: rgb(53, 56, 54);
+ color: rgb(249, 249, 250);
+ border-color: rgb(53, 56, 54);
+}
+
+.content .hide ~ .display, .displayHidden ~ .display {
+ background-image: url(visible-dark.svg);
+}
+.content .hide:checked ~ .display, .displayHidden:checked ~ .display {
+ background-image: url(notVisible-dark.svg);
+}
\ No newline at end of file
diff --git a/options/options-default.css b/options/options-default.css
new file mode 100644
index 0000000..12c1906
--- /dev/null
+++ b/options/options-default.css
@@ -0,0 +1,19 @@
+body {
+ color: rgb(60, 62, 60);
+ background-color: rgb(249, 250, 249);
+}
+
+a:link, a:visited, a:active {
+ color: blue;
+}
+
+header .bookmarkNotice {
+ border: 1px dotted #880000;
+ color: #880000;
+}
+
+input, textarea, select, button {
+ background-color: rgb(236, 237, 236);
+ color: rgb(60, 62, 60);
+ border-color: rgb(236, 237, 236);
+}
\ No newline at end of file
diff --git a/options/options-light.css b/options/options-light.css
new file mode 100644
index 0000000..cb61fdf
--- /dev/null
+++ b/options/options-light.css
@@ -0,0 +1,19 @@
+body {
+ background-color: rgb(255, 255, 255);
+ color: rgb(12, 12, 13);
+}
+
+a:link, a:visited, a:active {
+ color: blue;
+}
+
+header .bookmarkNotice {
+ border: 1px dotted #880000;
+ color: #880000;
+}
+
+input, textarea, select, button {
+ background-color: rgb(240, 240, 240);
+ color: rgb(12, 12, 13);
+ border-color: rgb(240, 240, 240);
+}
\ No newline at end of file
diff --git a/options/options.css b/options/options.css
index 25fe08a..c0395bb 100644
--- a/options/options.css
+++ b/options/options.css
@@ -9,8 +9,6 @@ header {
header .bookmarkNotice {
margin: 0.5em;
padding: 0.5em;
- border: 1px dotted #880000;
- color: #880000;
}
header .bookmarkNotice .dontShowOptionsOnUpdate {
diff --git a/options/options.js b/options/options.js
index ecc3aeb..57c52a6 100644
--- a/options/options.js
+++ b/options/options.js
@@ -428,6 +428,16 @@
document.body.appendChild(version);
settings.onloaded(function(){
+ // load theme
+ var themeLink = document.createElement("link");
+ themeLink.href = `options-${settings.theme}.css`;
+ themeLink.rel = "stylesheet";
+ themeLink.type = "text/css";
+ document.head.appendChild(themeLink);
+ settings.on("theme", function(){
+ themeLink.href = `options-${settings.theme}.css`;
+ });
+
const reCaptchaEntry = "^https://www\\.google\\.com/recaptcha/api2/(?:b?frame|anchor).*$";
const {url: urlContainer} = settings.getContainers();
settings.on("protectWindow", function({newValue}){
diff --git a/options/visible-dark.svg b/options/visible-dark.svg
new file mode 100644
index 0000000..8bfe5b4
--- /dev/null
+++ b/options/visible-dark.svg
@@ -0,0 +1,71 @@
+
+
+
+