Theme in options page

This commit is contained in:
kkapsner 2019-04-30 23:29:38 +02:00
parent 31bc324019
commit 650f325702
8 changed files with 222 additions and 3 deletions

View File

@ -62,7 +62,7 @@
]
}],
"options_ui": {
"browser_style": true,
"browser_style": false,
"page": "options/options.html"
},
"browser_action": {

View File

@ -0,0 +1,76 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="30"
height="20"
viewBox="0 0 7.9374998 5.2916668"
version="1.1"
id="svg8"
inkscape:version="0.92.4 5da689c313, 2019-01-14"
sodipodi:docname="notVisible-dark.svg">
<defs
id="defs2" />
<sodipodi:namedview
id="base"
pagecolor="#000000"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:zoom="3.959798"
inkscape:cx="-31.241245"
inkscape:cy="54.832316"
inkscape:document-units="mm"
inkscape:current-layer="layer1"
showgrid="false"
inkscape:window-width="1600"
inkscape:window-height="841"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="1"
units="px" />
<metadata
id="metadata5">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Ebene 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(0,-291.70832)">
<path
style="fill:none;stroke:#ffffff;stroke-width:0.07936867;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;opacity:1"
d="m 0.14548308,294.43593 c 2.59575882,2.03078 4.92396642,2.03973 7.67986362,-0.06 -3.6044602,-0.64366 -3.6257846,-2.34887 -7.67986362,0.06 z"
id="path4520"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccc" />
<ellipse
style="fill:#bbbbbb;fill-opacity:1;stroke:#bbbbbb;stroke-width:0.04199925;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;opacity:1"
id="path4522"
cx="4.0754137"
cy="294.64594"
rx="0.92998338"
ry="0.86998433" />
<path
style="opacity:1;fill:none;stroke:#919191;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 1.2695302,296.79953 5.6794774,-4.27631"
id="path4543"
inkscape:connector-curvature="0" />
</g>
</svg>

After

Width:  |  Height:  |  Size: 2.6 KiB

26
options/options-dark.css Normal file
View File

@ -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);
}

View File

@ -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);
}

19
options/options-light.css Normal file
View File

@ -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);
}

View File

@ -9,8 +9,6 @@ header {
header .bookmarkNotice {
margin: 0.5em;
padding: 0.5em;
border: 1px dotted #880000;
color: #880000;
}
header .bookmarkNotice .dontShowOptionsOnUpdate {

View File

@ -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}){

71
options/visible-dark.svg Normal file
View File

@ -0,0 +1,71 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="30"
height="20"
viewBox="0 0 7.9374998 5.2916668"
version="1.1"
id="svg8"
inkscape:version="0.92.4 5da689c313, 2019-01-14"
sodipodi:docname="visible-dark.svg">
<defs
id="defs2" />
<sodipodi:namedview
id="base"
pagecolor="#000000"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:zoom="3.959798"
inkscape:cx="-31.241245"
inkscape:cy="54.832316"
inkscape:document-units="mm"
inkscape:current-layer="layer1"
showgrid="false"
inkscape:window-width="1600"
inkscape:window-height="841"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="1"
units="px" />
<metadata
id="metadata5">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Ebene 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(0,-291.70832)">
<path
style="fill:none;stroke:#ffffff;stroke-width:0.07936867;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m 0.14548308,294.43593 c 2.59575882,2.03078 4.92396642,2.03973 7.67986362,-0.06 -3.6044602,-0.64366 -3.6257846,-2.34887 -7.67986362,0.06 z"
id="path4520"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccc" />
<ellipse
style="fill:#919191;fill-opacity:1;stroke:#919191;stroke-width:0.04199925;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="path4522"
cx="4.0754137"
cy="294.64594"
rx="0.92998338"
ry="0.86998433" />
</g>
</svg>

After

Width:  |  Height:  |  Size: 2.3 KiB