doesnm/JabberCard
1
0
Fork 0
Code Issues 15 Pull requests Projects Releases Packages Wiki Activity Actions

General : Add dark mode.

Browse source 
CSS     : Add dark mode;
Python  : Custom QR code colors;
SVG     : Add graphics for dark mode;
SVG     : Optimize vector code;
XHTML   : Modify for dark mode.
This commit is contained in:
Schimon Jehudah, Adv. 2024-10-09 16:40:51 +03:00
parent 16338fabb2
commit 19e8910a4e
16 changed files with 205 additions and 502 deletions
Download patch file Download diff file Expand all files Collapse all files

39
xhtml/jid.xhtml
View file

@ -22,13 +22,26 @@
<link rel="stylesheet" href="/css/stylesheet.css" media="screen" type="text/css" />
{% if selection %}
<style>
html {
background-repeat: no-repeat;
background: linear-gradient(
to right,
RGB({{selection[0][2]}}, {{selection[0][1]}}, {{selection[0][0]}}),
RGB({{selection[1][2]}}, {{selection[1][1]}}, {{selection[1][0]}})
);
body {
/* background-repeat: no-repeat; */
background:
url(/img/background.svg),
linear-gradient(
to right,
rgba({{selection[0][2]}}, {{selection[0][1]}}, {{selection[0][0]}}, 0.7),
rgba({{selection[1][2]}}, {{selection[1][1]}}, {{selection[1][0]}}, 0.7)
);
}
@media (prefers-color-scheme: dark) {
body {
background:
url(/img/background.svg),
linear-gradient(
to right,
rgba({{selection[0][2]-50}}, {{selection[0][1]-50}}, {{selection[0][0]-50}}, 0.7),
rgba({{selection[1][2]-50}}, {{selection[1][1]-50}}, {{selection[1][0]-50}}, 0.7)
);
}
}
</style>
{% endif %}
@ -37,7 +50,7 @@
<div id="overlay">
<div id="bar">
<a href="https://xmpp.org">
<img id="logo" src="/img/xmpp-logo-wordmark-horizontal.svg" />
<img id="logo" src="/img/logo-wordmark-horizontal.svg" />
</a>
<a id="download" href="https://xmpp.org/software/">
Download
@ -47,7 +60,7 @@
<div id="profile">
<div>
<a id="download-narrow" href="https://xmpp.org/software/">
<img id="logo-narrow" src="/img/xmpp-logo.svg" />
<img id="logo-narrow" src="/img/logo.svg" />
Download
</a>
</div>
@ -93,14 +106,14 @@
{% endif %}
<!-- div>
<a href="https://xmpp.org">
<img id="logo-bottom" src="/img/xmpp-logo-wordmark-vertical.svg" />
<img id="logo-bottom" src="/img/logo-wordmark-vertical.svg" />
</a>
</div -->
<!-- div id="note">
The Universal Messaging Standard
</div -->
</div>
</div>
<!-- div id="note">
The Universal Messaging Standard
</div -->
{% if message %}
<div id="message">{{message}}</div>
{% endif %}