Implemented theme switcher (light/dark)

setting things up for themes switcher
2023-05-06 18:13:12 +02:00 · 2023-05-05 22:16:03 +02:00
40 changed files with 561 additions and 198 deletions
--- a/README.md
+++ b/README.md
@ -6,7 +6,12 @@ Redisign of dmz.rs .

 ### TODO:

- create themes switcher
+- [x] create themes switcher
+  - [x] "demo"
+  - [x] propagate to all pages
+  - [x] store theme to localStorage
+  - [x] read "user agent" for default theme
+  - [x] invert images and icons
 - update projects section
 - create blogging system
 - create xmpp bot that connects to events section.
--- a/img/cc-dark.svg
+++ b/img/cc-dark.svg
@ -0,0 +1,64 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="40"
+   height="40"
+   viewBox="0 0 10.583333 10.583333"
+   version="1.1"
+   id="svg5"
+   inkscape:version="1.1.2 (0a00cf5339, 2022-02-04)"
+   sodipodi:docname="cc-dark.svg"
+   inkscape:export-filename="cc.png"
+   inkscape:export-xdpi="96"
+   inkscape:export-ydpi="96"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview7"
+     pagecolor="#505050"
+     bordercolor="#eeeeee"
+     borderopacity="1"
+     inkscape:showpageshadow="0"
+     inkscape:pageopacity="0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#505050"
+     inkscape:document-units="px"
+     showgrid="false"
+     inkscape:zoom="10.628544"
+     inkscape:cx="12.372344"
+     inkscape:cy="22.627747"
+     inkscape:window-width="1920"
+     inkscape:window-height="1048"
+     inkscape:window-x="0"
+     inkscape:window-y="32"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1"
+     inkscape:pageshadow="0" />
+  <defs
+     id="defs2" />
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1">
+    <path
+       id="path140"
+       style="fill:#ffffff;stroke-width:0.355403;fill-opacity:1"
+       d="M 5.2916665 0 A 5.2916665 5.2916665 0 0 0 0 5.2916665 A 5.2916665 5.2916665 0 0 0 5.2916665 10.583333 A 5.2916665 5.2916665 0 0 0 10.583333 5.2916665 A 5.2916665 5.2916665 0 0 0 5.2916665 0 z M 5.2916665 0.66145831 A 4.630208 4.630208 0 0 1 9.9218747 5.2916665 A 4.630208 4.630208 0 0 1 5.2916665 9.9218747 A 4.630208 4.630208 0 0 1 0.66145831 5.2916665 A 4.630208 4.630208 0 0 1 5.2916665 0.66145831 z " />
+    <g
+       aria-label="cc"
+       id="text2158"
+       style="font-size:7.05556px;font-family:'JetBrains Mono';-inkscape-font-specification:'JetBrains Mono, Normal';fill:#181715;stroke-width:0.355335">
+      <path
+         d="m 3.1749971,7.3025011 q -0.3598336,0 -0.6491115,-0.1058334 Q 2.2436632,7.0908343 2.0390519,6.8932786 1.8414962,6.6957229 1.7286073,6.4135005 1.6227739,6.1312781 1.6227739,5.7855557 V 4.7977773 q 0,-0.3457225 0.1058334,-0.6279449 Q 1.8414962,3.88761 2.0390519,3.6900543 2.2436632,3.4924987 2.5258856,3.3866653 2.8151635,3.2808319 3.1749971,3.2808319 q 0.642056,0 1.0512785,0.352778 0.416278,0.3457224 0.5009447,0.9525006 H 4.0922199 Q 4.042831,4.2474436 3.7888308,4.0498879 3.5418862,3.8452767 3.1749971,3.8452767 q -0.4233336,0 -0.6702782,0.2540001 Q 2.2577743,4.353277 2.2577743,4.7977773 v 0.9877784 q 0,0.4445003 0.239889,0.6985004 0.2469446,0.2540002 0.6773338,0.2540002 0.3668891,0 0.6138337,-0.1975557 Q 4.042831,6.3358894 4.0922199,5.9972225 H 4.7272203 Q 4.635498,6.6110562 4.21922,6.9567787 3.8099975,7.3025011 3.1749971,7.3025011 Z"
+         id="path290"
+         style="fill:#ffffff" />
+      <path
+         d="m 7.4083359,7.3025011 q -0.3598335,0 -0.6491115,-0.1058334 Q 6.477002,7.0908343 6.2723907,6.8932786 6.0748351,6.6957229 5.9619461,6.4135005 5.8561127,6.1312781 5.8561127,5.7855557 V 4.7977773 q 0,-0.3457225 0.1058334,-0.6279449 Q 6.0748351,3.88761 6.2723907,3.6900543 6.477002,3.4924987 6.7592244,3.3866653 7.0485024,3.2808319 7.4083359,3.2808319 q 0.642056,0 1.0512785,0.352778 0.416278,0.3457224 0.5009448,0.9525006 H 8.3255587 Q 8.2761698,4.2474436 8.0221697,4.0498879 7.7752251,3.8452767 7.4083359,3.8452767 q -0.4233336,0 -0.6702782,0.2540001 Q 6.4911131,4.353277 6.4911131,4.7977773 v 0.9877784 q 0,0.4445003 0.2398891,0.6985004 0.2469446,0.2540002 0.6773337,0.2540002 0.3668892,0 0.6138338,-0.1975557 0.2540001,-0.2046112 0.303389,-0.5432781 H 8.9605592 Q 8.8688369,6.6110562 8.4525588,6.9567787 8.0433363,7.3025011 7.4083359,7.3025011 Z"
+         id="path292"
+         style="fill:#ffffff" />
+    </g>
+  </g>
+</svg>
--- a/img/cc-light.svg
+++ b/img/cc-light.svg
--- a/img/favicon_bg.svg
+++ b/img/favicon_bg.svg
@ -1,69 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   width="40"
-   height="40"
-   viewBox="0 0 10.583333 10.583333"
-   version="1.1"
-   id="svg5"
-   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
-   sodipodi:docname="favicon_bg.svg"
-   inkscape:export-filename="favicon_transparent_64.png"
-   inkscape:export-xdpi="153.60001"
-   inkscape:export-ydpi="153.60001"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:svg="http://www.w3.org/2000/svg">
-  <sodipodi:namedview
-     id="namedview7"
-     pagecolor="#505050"
-     bordercolor="#eeeeee"
-     borderopacity="1"
-     inkscape:showpageshadow="0"
-     inkscape:pageopacity="0"
-     inkscape:pagecheckerboard="0"
-     inkscape:deskcolor="#505050"
-     inkscape:document-units="px"
-     showgrid="false"
-     inkscape:zoom="10.628544"
-     inkscape:cx="10.631748"
-     inkscape:cy="18.393865"
-     inkscape:window-width="1362"
-     inkscape:window-height="764"
-     inkscape:window-x="0"
-     inkscape:window-y="0"
-     inkscape:window-maximized="1"
-     inkscape:current-layer="layer2" />
-  <defs
-     id="defs2" />
-  <g
-     inkscape:groupmode="layer"
-     id="layer2"
-     inkscape:label="Layer 2">
-    <circle
-       style="fill:#ffffff;stroke-width:0.505137"
-       id="path613"
-       cx="5.2916665"
-       cy="5.2916665"
-       r="5.2916665" />
-  </g>
-  <g
-     inkscape:label="Layer 1"
-     inkscape:groupmode="layer"
-     id="layer1">
-    <path
-       id="path140"
-       style="fill:#181715;stroke-width:0.355403;fill-opacity:1"
-       d="M 5.2916665 0 A 5.2916665 5.2916665 0 0 0 0 5.2916665 A 5.2916665 5.2916665 0 0 0 5.2916665 10.583333 A 5.2916665 5.2916665 0 0 0 10.583333 5.2916665 A 5.2916665 5.2916665 0 0 0 5.2916665 0 z M 5.2916665 0.66145831 A 4.630208 4.630208 0 0 1 9.9218747 5.2916665 A 4.630208 4.630208 0 0 1 5.2916665 9.9218747 A 4.630208 4.630208 0 0 1 0.66145831 5.2916665 A 4.630208 4.630208 0 0 1 5.2916665 0.66145831 z " />
-    <g
-       aria-label="D"
-       id="text441"
-       style="font-weight:500;font-size:7.05556px;font-family:'Iosevka Aile';-inkscape-font-specification:'Iosevka Aile, Medium';fill:#181715;stroke-width:0.355335">
-      <path
-         d="M 3.7464988,7.8845849 V 2.6987482 h 1.4322787 q 0.2187224,0 0.4303892,0.035278 0.2187223,0.035278 0.416278,0.1340557 0.1975557,0.091722 0.3598336,0.2469446 0.1622779,0.1481667 0.2610557,0.3457224 0.1058334,0.1905001 0.1481668,0.4092225 0.042333,0.2116668 0.042333,0.4303892 v 1.9826124 q 0,0.2187223 -0.042333,0.4374447 Q 6.7521674,6.9320843 6.646334,7.12964 6.5475562,7.3201401 6.3852783,7.4753624 6.2230004,7.6235292 6.0254447,7.722307 5.827889,7.8140293 5.6091667,7.8493071 5.3974999,7.8845849 5.1787775,7.8845849 Z m 1.4322787,-0.592667 q 0.1340557,0 0.2610557,-0.021167 0.1340557,-0.028222 0.2540002,-0.084667 0.1199445,-0.0635 0.2116668,-0.1622779 0.091722,-0.098778 0.1481668,-0.2187224 0.0635,-0.1199445 0.084667,-0.2540002 0.021167,-0.1340556 0.021167,-0.2681112 V 4.3003604 q 0,-0.1340557 -0.021167,-0.2681113 Q 6.117167,3.8981934 6.053667,3.7782489 5.9972225,3.6583044 5.9055002,3.5595266 5.8137779,3.4607487 5.6938334,3.4043042 5.5738889,3.3408042 5.4398332,3.3196375 5.3128332,3.2914153 5.1787775,3.2914153 H 4.4238326 v 4.0005026 z"
-         id="path535" />
-    </g>
-  </g>
-</svg>
--- a/img/favicon_bg_16.png
+++ b/img/favicon_bg_16.png
--- a/img/favicon_bg_32.png
+++ b/img/favicon_bg_32.png
--- a/img/favicon_bg_48.png
+++ b/img/favicon_bg_48.png
--- a/img/favicon_bg_64.png
+++ b/img/favicon_bg_64.png
--- a/img/favicon_transparent.svg
+++ b/img/favicon_transparent.svg
@ -1,58 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   width="40"
-   height="40"
-   viewBox="0 0 10.583333 10.583333"
-   version="1.1"
-   id="svg5"
-   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
-   sodipodi:docname="favicon_transparent.svg"
-   inkscape:export-filename="cc.png"
-   inkscape:export-xdpi="96"
-   inkscape:export-ydpi="96"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:svg="http://www.w3.org/2000/svg">
-  <sodipodi:namedview
-     id="namedview7"
-     pagecolor="#505050"
-     bordercolor="#eeeeee"
-     borderopacity="1"
-     inkscape:showpageshadow="0"
-     inkscape:pageopacity="0"
-     inkscape:pagecheckerboard="0"
-     inkscape:deskcolor="#505050"
-     inkscape:document-units="px"
-     showgrid="false"
-     inkscape:zoom="10.628544"
-     inkscape:cx="12.419387"
-     inkscape:cy="18.393865"
-     inkscape:window-width="1362"
-     inkscape:window-height="764"
-     inkscape:window-x="0"
-     inkscape:window-y="0"
-     inkscape:window-maximized="1"
-     inkscape:current-layer="layer1" />
-  <defs
-     id="defs2" />
-  <g
-     inkscape:label="Layer 1"
-     inkscape:groupmode="layer"
-     id="layer1">
-    <path
-       id="path140"
-       style="fill:#181715;stroke-width:0.355403;fill-opacity:1"
-       d="M 5.2916665 0 A 5.2916665 5.2916665 0 0 0 0 5.2916665 A 5.2916665 5.2916665 0 0 0 5.2916665 10.583333 A 5.2916665 5.2916665 0 0 0 10.583333 5.2916665 A 5.2916665 5.2916665 0 0 0 5.2916665 0 z M 5.2916665 0.66145831 A 4.630208 4.630208 0 0 1 9.9218747 5.2916665 A 4.630208 4.630208 0 0 1 5.2916665 9.9218747 A 4.630208 4.630208 0 0 1 0.66145831 5.2916665 A 4.630208 4.630208 0 0 1 5.2916665 0.66145831 z " />
-    <g
-       aria-label="D"
-       id="text441"
-       style="font-weight:500;font-size:7.05556px;font-family:'Iosevka Aile';-inkscape-font-specification:'Iosevka Aile, Medium';fill:#181715;stroke-width:0.355335">
-      <path
-         d="M 3.7464988,7.8845849 V 2.6987482 h 1.4322787 q 0.2187224,0 0.4303892,0.035278 0.2187223,0.035278 0.416278,0.1340557 0.1975557,0.091722 0.3598336,0.2469446 0.1622779,0.1481667 0.2610557,0.3457224 0.1058334,0.1905001 0.1481668,0.4092225 0.042333,0.2116668 0.042333,0.4303892 v 1.9826124 q 0,0.2187223 -0.042333,0.4374447 Q 6.7521674,6.9320843 6.646334,7.12964 6.5475562,7.3201401 6.3852783,7.4753624 6.2230004,7.6235292 6.0254447,7.722307 5.827889,7.8140293 5.6091667,7.8493071 5.3974999,7.8845849 5.1787775,7.8845849 Z m 1.4322787,-0.592667 q 0.1340557,0 0.2610557,-0.021167 0.1340557,-0.028222 0.2540002,-0.084667 0.1199445,-0.0635 0.2116668,-0.1622779 0.091722,-0.098778 0.1481668,-0.2187224 0.0635,-0.1199445 0.084667,-0.2540002 0.021167,-0.1340556 0.021167,-0.2681112 V 4.3003604 q 0,-0.1340557 -0.021167,-0.2681113 Q 6.117167,3.8981934 6.053667,3.7782489 5.9972225,3.6583044 5.9055002,3.5595266 5.8137779,3.4607487 5.6938334,3.4043042 5.5738889,3.3408042 5.4398332,3.3196375 5.3128332,3.2914153 5.1787775,3.2914153 H 4.4238326 v 4.0005026 z"
-         id="path535" />
-    </g>
-  </g>
-</svg>
--- a/img/favicon_transparent_16.png
+++ b/img/favicon_transparent_16.png
--- a/img/favicon_transparent_32.png
+++ b/img/favicon_transparent_32.png
--- a/img/favicon_transparent_48.png
+++ b/img/favicon_transparent_48.png
--- a/img/favicon_transparent_64.png
+++ b/img/favicon_transparent_64.png
--- a/img/git-dark.svg
+++ b/img/git-dark.svg
@ -0,0 +1,47 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="40"
+   height="40"
+   viewBox="0 0 10.583333 10.583333"
+   version="1.1"
+   id="svg5"
+   xml:space="preserve"
+   inkscape:version="1.1.2 (0a00cf5339, 2022-02-04)"
+   sodipodi:docname="git-dark.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"><sodipodi:namedview
+     id="namedview7"
+     pagecolor="#505050"
+     bordercolor="#eeeeee"
+     borderopacity="1"
+     inkscape:showpageshadow="false"
+     inkscape:pageopacity="0"
+     inkscape:pagecheckerboard="true"
+     inkscape:deskcolor="#505050"
+     inkscape:document-units="px"
+     showgrid="false"
+     inkscape:zoom="16.25197"
+     inkscape:cx="-4.3994667"
+     inkscape:cy="20.828244"
+     inkscape:window-width="1920"
+     inkscape:window-height="1048"
+     inkscape:window-x="0"
+     inkscape:window-y="32"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1"
+     inkscape:pageshadow="0" /><defs
+     id="defs2" /><g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"><path
+       id="path234"
+       style="fill:#ffffff;stroke-width:0.439323"
+       d="M 5.2916665,0 C 2.3691598,0 0,2.3691598 0,5.2916665 c 0,2.9225067 2.3691598,5.2916665 5.2916665,5.2916665 2.9225067,0 5.2916665,-2.3691598 5.2916665,-5.2916665 C 10.583333,2.3691598 8.2141732,0 5.2916665,0 Z m 0,0.66145831 c 2.5571934,1e-7 4.6302083,2.07301479 4.6302082,4.63020819 10e-8,2.5571934 -2.0730148,4.6302083 -4.6302082,4.6302082 C 2.7344731,9.9218748 0.66145841,7.8488599 0.66145831,5.2916665 0.66145828,4.6663401 0.78542032,4.0699666 1.0101112,3.5257792 1.7042655,1.8445808 3.3597995,0.66145823 5.2916665,0.66145831 Z"
+       sodipodi:nodetypes="sssssssssss" /><path
+       id="rect1196"
+       style="fill:#ffffff;fill-opacity:1;stroke-width:0.372926"
+       d="m 5.272546,1.2965229 c -0.196509,0.0047 -0.391473,0.082448 -0.542085,0.2330608 l -0.587045,0.587561 0.012403,0.012919 0.136425,0.135909 0.813904,0.8144205 a 0.62532276,0.62532276 0 0 1 0.204122,-0.03514 0.62532276,0.62532276 0 0 1 0.625285,0.6252848 0.62532276,0.62532276 0 0 1 -0.03514,0.2041219 l 0.88315,0.8831502 A 0.62532276,0.62532276 0 0 1 6.994405,4.7206032 0.62532276,0.62532276 0 0 1 7.61969,5.3458881 0.62532276,0.62532276 0 0 1 6.994405,5.9711729 0.62532276,0.62532276 0 0 1 6.36912,5.3458881 0.62532276,0.62532276 0 0 1 6.393408,5.1758726 L 5.567102,4.3495665 V 6.4558978 A 0.62532276,0.62532276 0 0 1 5.935555,7.0258888 0.62532276,0.62532276 0 0 1 5.31027,7.6511736 0.62532276,0.62532276 0 0 1 4.684985,7.0258888 0.62532276,0.62532276 0 0 1 5.053438,6.4564146 V 4.2400124 A 0.62532276,0.62532276 0 0 1 4.684985,3.6705382 0.62532276,0.62532276 0 0 1 4.710823,3.493288 L 3.751709,2.5341735 3.752742,2.5336567 3.739307,2.5202208 1.529622,4.7304218 c -0.31094,0.3109407 -0.31094,0.8114714 0,1.122412 L 4.730461,9.053672 c 0.31094,0.3109406 0.811471,0.3109406 1.122412,0 L 9.053711,5.8528338 c 0.31094,-0.3109406 0.31094,-0.8114713 0,-1.122412 L 5.852873,1.5295837 C 5.697402,1.374113 5.494564,1.2965222 5.291667,1.2965229 c -0.00634,0 -0.012782,-1.515e-4 -0.019121,0 z" /></g></svg>
--- a/img/git-light.svg
+++ b/img/git-light.svg
--- a/img/mastodon-dark.svg
+++ b/img/mastodon-dark.svg
@ -0,0 +1,46 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="40"
+   height="40"
+   viewBox="0 0 10.583333 10.583333"
+   version="1.1"
+   id="svg1332"
+   xml:space="preserve"
+   inkscape:version="1.1.2 (0a00cf5339, 2022-02-04)"
+   sodipodi:docname="mastodon-dark.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"><sodipodi:namedview
+     id="namedview1334"
+     pagecolor="#505050"
+     bordercolor="#eeeeee"
+     borderopacity="1"
+     inkscape:showpageshadow="0"
+     inkscape:pageopacity="0"
+     inkscape:pagecheckerboard="true"
+     inkscape:deskcolor="#505050"
+     inkscape:document-units="px"
+     showgrid="false"
+     inkscape:zoom="16.019528"
+     inkscape:cx="22.753479"
+     inkscape:cy="23.939532"
+     inkscape:window-width="1920"
+     inkscape:window-height="1048"
+     inkscape:window-x="0"
+     inkscape:window-y="32"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1"
+     inkscape:pageshadow="0" /><defs
+     id="defs1329" /><g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"><path
+       id="rect1756"
+       style="fill:#ffffff;fill-opacity:1;stroke-width:0.355335"
+       d="m 4.3183404,1.9765891 c -1.17263,0 -2.116666,0.8260312 -2.116666,1.8520832 v 1.4381551 c 0,0.1342579 0.015785,0.2651846 0.046509,0.3911906 -0.036015,0.377942 0.017995,0.870137 0.237194,1.508435 0.782893,2.2797331 4.0193931,1.170471 4.0193931,1.170471 0,0 -0.021792,-0.0096 -0.045475,-0.554488 -2.1752389,0.492479 -2.4571729,-0.327074 -2.4809859,-0.68678 0.110588,0.01549 0.224303,0.02326 0.340031,0.02326 h 1.9466515 c 1.1726309,0 2.1166666,-0.826032 2.1166666,-1.8520836 V 3.8286723 c 0,-1.026052 -0.9440357,-1.8520832 -2.1166666,-1.8520832 z m 0.03359,1.0877888 a 1.0208462,1.0208462 0 0 1 0.961182,0.6764445 1.0208462,1.0208462 0 0 1 0.9601477,-0.6764445 1.0208462,1.0208462 0 0 1 1.0211263,1.0206095 1.0208462,1.0208462 0 0 1 -5.168e-4,0.00672 h 5.168e-4 V 5.997015 H 6.6070899 V 5.3448588 h 0.00413 V 4.2451844 h -0.00672 A 0.47585312,0.47462767 0 0 0 6.1285599,3.7785462 0.47585312,0.47462767 0 0 0 5.65262,4.2529358 0.47585312,0.47462767 0 0 0 5.65934,4.3294168 V 5.3314229 H 4.9741144 V 4.8937236 a 1.0208462,1.0208462 0 0 1 -0.00258,0.00207 V 4.2177959 h -0.00672 a 0.47585312,0.47462767 0 0 0 -0.47594,-0.467155 0.47585312,0.47462767 0 0 0 -0.475424,0.4749064 0.47585312,0.47462767 0 0 0 0.0062,0.075964 V 5.049786 a 1.0208462,1.0208462 0 0 1 -0.00103,-5.168e-4 V 6.004767 H 3.3313214 V 4.1345968 h 0.00155 a 1.0208462,1.0208462 0 0 1 -0.00155,-0.049609 1.0208462,1.0208462 0 0 1 1.020609,-1.0206099 z" /><path
+       id="path2228"
+       style="fill:#ffffff;fill-opacity:1;stroke-width:0.380589"
+       d="M 5.2916665 0 A 5.2916665 5.2916665 0 0 0 0 5.2916665 A 5.2916665 5.2916665 0 0 0 5.2916665 10.583333 A 5.2916665 5.2916665 0 0 0 10.583333 5.2916665 A 5.2916665 5.2916665 0 0 0 5.2916665 0 z M 5.2916665 0.66145831 A 4.630208 4.630208 0 0 1 9.9218747 5.2916665 A 4.630208 4.630208 0 0 1 5.2916665 9.9218747 A 4.630208 4.630208 0 0 1 0.66145831 5.2916665 A 4.630208 4.630208 0 0 1 5.2916665 0.66145831 z " /></g></svg>
--- a/img/mastodon-light.svg
+++ b/img/mastodon-light.svg
--- a/img/mesh-dark.png
+++ b/img/mesh-dark.png
--- a/img/mesh-dark.svg
+++ b/img/mesh-dark.svg
@ -0,0 +1,23 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="500" height="700"
+  background-color="rgba(0,0,0,0)">
+  <line x1="500" x2="475" y1="0" y2="700" stroke="rgba(255,255,255,1)" />
+  <line x1="500" x2="450" y1="35" y2="700" stroke="rgba(255,255,255,1)" />
+  <line x1="500" x2="425" y1="70" y2="700" stroke="rgba(255,255,255,1)" />
+  <line x1="500" x2="400" y1="105" y2="700" stroke="rgba(255,255,255,1)" />
+  <line x1="500" x2="375" y1="140" y2="700" stroke="rgba(255,255,255,1)" />
+  <line x1="500" x2="350" y1="175" y2="700" stroke="rgba(255,255,255,1)" />
+  <line x1="500" x2="325" y1="210" y2="700" stroke="rgba(255,255,255,1)" />
+  <line x1="500" x2="300" y1="245" y2="700" stroke="rgba(255,255,255,1)" />
+  <line x1="500" x2="275" y1="280" y2="700" stroke="rgba(255,255,255,1)" />
+  <line x1="500" x2="250" y1="315" y2="700" stroke="rgba(255,255,255,1)" />
+  <line x1="500" x2="225" y1="350" y2="700" stroke="rgba(255,255,255,1)" />
+  <line x1="500" x2="200" y1="385" y2="700" stroke="rgba(255,255,255,1)" />
+  <line x1="500" x2="175" y1="420" y2="700" stroke="rgba(255,255,255,1)" />
+  <line x1="500" x2="150" y1="455" y2="700" stroke="rgba(255,255,255,1)" />
+  <line x1="500" x2="125" y1="490" y2="700" stroke="rgba(255,255,255,1)" />
+  <line x1="500" x2="100" y1="525" y2="700" stroke="rgba(255,255,255,1)" />
+  <line x1="500" x2="75" y1="560" y2="700" stroke="rgba(255,255,255,1)" />
+  <line x1="500" x2="50" y1="595" y2="700" stroke="rgba(255,255,255,1)" />
+  <line x1="500" x2="25" y1="630" y2="700" stroke="rgba(255,255,255,1)" />
+  <line x1="500" x2="0" y1="665" y2="700" stroke="rgba(255,255,255,1)" />
+</svg>
--- a/img/mesh-light.png
+++ b/img/mesh-light.png
--- a/img/mesh-light.svg
+++ b/img/mesh-light.svg
@ -0,0 +1,23 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="500" height="700"
+  background-color="rgba(0,0,0,0)">
+  <line x1="500" x2="475" y1="0" y2="700" stroke="rgba(24, 23, 21, 1)" />
+  <line x1="500" x2="450" y1="35" y2="700" stroke="rgba(24, 23, 21, 1)" />
+  <line x1="500" x2="425" y1="70" y2="700" stroke="rgba(24, 23, 21, 1)" />
+  <line x1="500" x2="400" y1="105" y2="700" stroke="rgba(24, 23, 21, 1)" />
+  <line x1="500" x2="375" y1="140" y2="700" stroke="rgba(24, 23, 21, 1)" />
+  <line x1="500" x2="350" y1="175" y2="700" stroke="rgba(24, 23, 21, 1)" />
+  <line x1="500" x2="325" y1="210" y2="700" stroke="rgba(24, 23, 21, 1)" />
+  <line x1="500" x2="300" y1="245" y2="700" stroke="rgba(24, 23, 21, 1)" />
+  <line x1="500" x2="275" y1="280" y2="700" stroke="rgba(24, 23, 21, 1)" />
+  <line x1="500" x2="250" y1="315" y2="700" stroke="rgba(24, 23, 21, 1)" />
+  <line x1="500" x2="225" y1="350" y2="700" stroke="rgba(24, 23, 21, 1)" />
+  <line x1="500" x2="200" y1="385" y2="700" stroke="rgba(24, 23, 21, 1)" />
+  <line x1="500" x2="175" y1="420" y2="700" stroke="rgba(24, 23, 21, 1)" />
+  <line x1="500" x2="150" y1="455" y2="700" stroke="rgba(24, 23, 21, 1)" />
+  <line x1="500" x2="125" y1="490" y2="700" stroke="rgba(24, 23, 21, 1)" />
+  <line x1="500" x2="100" y1="525" y2="700" stroke="rgba(24, 23, 21, 1)" />
+  <line x1="500" x2="75" y1="560" y2="700" stroke="rgba(24, 23, 21, 1)" />
+  <line x1="500" x2="50" y1="595" y2="700" stroke="rgba(24, 23, 21, 1)" />
+  <line x1="500" x2="25" y1="630" y2="700" stroke="rgba(24, 23, 21, 1)" />
+  <line x1="500" x2="0" y1="665" y2="700" stroke="rgba(24, 23, 21, 1)" />
+</svg>
--- a/img/srce-dark.svg
+++ b/img/srce-dark.svg
@ -0,0 +1,63 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="40"
+   height="40"
+   viewBox="0 0 10.583333 10.583333"
+   version="1.1"
+   id="svg2421"
+   sodipodi:docname="srce-dark.svg"
+   inkscape:version="1.1.2 (0a00cf5339, 2022-02-04)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview2423"
+     pagecolor="#505050"
+     bordercolor="#eeeeee"
+     borderopacity="1"
+     inkscape:showpageshadow="0"
+     inkscape:pageopacity="0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#505050"
+     inkscape:document-units="mm"
+     showgrid="false"
+     inkscape:zoom="7.967789"
+     inkscape:cx="4.2044286"
+     inkscape:cy="19.892595"
+     inkscape:window-width="1920"
+     inkscape:window-height="1048"
+     inkscape:window-x="0"
+     inkscape:window-y="32"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1"
+     inkscape:pageshadow="0" />
+  <defs
+     id="defs2418" />
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1">
+    <path
+       id="path2477"
+       style="fill:#ffffff;stroke-width:0.355037"
+       d="M 5.2916667 0 A 5.2916665 5.2916665 0 0 0 0 5.2916667 A 5.2916665 5.2916665 0 0 0 5.2916667 10.583333 A 5.2916665 5.2916665 0 0 0 10.583333 5.2916667 A 5.2916665 5.2916665 0 0 0 5.2916667 0 z M 5.2916667 0.66145833 A 4.6302085 4.6302085 0 0 1 9.921875 5.2916667 A 4.6302085 4.6302085 0 0 1 5.2916667 9.921875 A 4.6302085 4.6302085 0 0 1 0.66145833 5.2916667 A 4.6302085 4.6302085 0 0 1 5.2916667 0.66145833 z " />
+    <text
+       xml:space="preserve"
+       style="font-size:7.05556px;font-family:'JetBrains Mono';-inkscape-font-specification:'JetBrains Mono, Normal';fill:#181715;fill-opacity:1;stroke-width:0.355335"
+       x="-2.7021213"
+       y="4.7616987"
+       id="text3068"><tspan
+         sodipodi:role="line"
+         id="tspan3066"
+         style="fill:#181715;fill-opacity:1;stroke-width:0.355335"
+         x="-2.7021213"
+         y="4.7616987" /></text>
+    <path
+       id="path3659"
+       style="fill:#ffffff;fill-opacity:1;stroke-width:0.384877"
+       d="m 2.4853365,3.1439096 a 1.984375,1.984375 0 0 0 0,2.80633 l 2.806331,2.8063301 2.8063299,-2.8063301 a 1.984375,1.984375 0 0 0 0,-2.80633 1.984375,1.984375 0 0 0 -2.8063299,0 1.984375,1.984375 0 0 0 -2.806331,0 z" />
+  </g>
+</svg>
--- a/img/srce-light.svg
+++ b/img/srce-light.svg
--- a/img/w-dark.svg
+++ b/img/w-dark.svg
@ -0,0 +1,57 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="40"
+   height="40"
+   viewBox="0 0 10.583333 10.583333"
+   version="1.1"
+   id="svg2421"
+   sodipodi:docname="w-dark.svg"
+   inkscape:version="1.1.2 (0a00cf5339, 2022-02-04)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview2423"
+     pagecolor="#505050"
+     bordercolor="#eeeeee"
+     borderopacity="1"
+     inkscape:showpageshadow="0"
+     inkscape:pageopacity="0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#505050"
+     inkscape:document-units="mm"
+     showgrid="false"
+     inkscape:zoom="11.268155"
+     inkscape:cx="19.657167"
+     inkscape:cy="17.882253"
+     inkscape:window-width="1920"
+     inkscape:window-height="1048"
+     inkscape:window-x="0"
+     inkscape:window-y="32"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="text3068"
+     inkscape:pageshadow="0" />
+  <defs
+     id="defs2418" />
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1">
+    <path
+       id="path2477"
+       style="fill:#ffffff;stroke-width:0.355037"
+       d="M 5.2916667 0 A 5.2916665 5.2916665 0 0 0 0 5.2916667 A 5.2916665 5.2916665 0 0 0 5.2916667 10.583333 A 5.2916665 5.2916665 0 0 0 10.583333 5.2916667 A 5.2916665 5.2916665 0 0 0 5.2916667 0 z M 5.2916667 0.66145833 A 4.6302085 4.6302085 0 0 1 9.921875 5.2916667 A 4.6302085 4.6302085 0 0 1 5.2916667 9.921875 A 4.6302085 4.6302085 0 0 1 0.66145833 5.2916667 A 4.6302085 4.6302085 0 0 1 5.2916667 0.66145833 z " />
+    <g
+       aria-label="w"
+       id="text3068"
+       style="font-size:10.5833px;font-family:'JetBrains Mono';-inkscape-font-specification:'JetBrains Mono, Normal';fill:#181715;stroke-width:0.355335">
+      <path
+         d="M 2.434176,2.3812593 H 3.28084 l 0.5185817,3.9899039 q 0.021167,0.1904994 0.042333,0.423332 0.021167,0.2328326 0.042333,0.4339153 0.021167,0.2328326 0.042333,0.4656652 h 0.1164163 q 0.021167,-0.2328326 0.052916,-0.4656652 0.021167,-0.2010827 0.052917,-0.4339153 0.03175,-0.2328326 0.0635,-0.423332 L 4.8260018,2.3812593 h 0.9101637 l 0.6138314,3.9899039 q 0.03175,0.2010827 0.0635,0.4339153 0.03175,0.2328326 0.052917,0.4339153 0.03175,0.2328326 0.052917,0.4550819 h 0.1269996 q 0.021167,-0.2328326 0.042333,-0.4656652 0.021167,-0.2010827 0.052916,-0.423332 0.03175,-0.2328326 0.052917,-0.4339153 L 7.3236605,2.3812593 H 8.1491578 L 7.3236605,8.2020741 H 6.0219146 L 5.4186665,4.0851705 Q 5.3974999,3.9052544 5.3763333,3.714755 5.36575,3.5136723 5.3551667,3.3443395 q 0,-0.1904994 0,-0.3809988 H 5.2175838 q 0,0.1904994 -0.010583,0.3809988 -0.010583,0.1693328 -0.021167,0.3704155 -0.010583,0.1904994 -0.042333,0.3704155 L 4.5190861,8.2020741 h -1.269996 z"
+         id="path698"
+         style="fill:#ffffff" />
+    </g>
+  </g>
+</svg>
--- a/img/w-light.svg
+++ b/img/w-light.svg
--- a/img/www-dark.svg
+++ b/img/www-dark.svg
@ -0,0 +1,60 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="40"
+   height="40"
+   viewBox="0 0 10.583333 10.583333"
+   version="1.1"
+   id="svg2421"
+   inkscape:version="1.1.2 (0a00cf5339, 2022-02-04)"
+   sodipodi:docname="www-dark.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview2423"
+     pagecolor="#505050"
+     bordercolor="#eeeeee"
+     borderopacity="1"
+     inkscape:showpageshadow="0"
+     inkscape:pageopacity="0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#505050"
+     inkscape:document-units="mm"
+     showgrid="false"
+     inkscape:zoom="11.268155"
+     inkscape:cx="19.39093"
+     inkscape:cy="17.793507"
+     inkscape:window-width="1920"
+     inkscape:window-height="1048"
+     inkscape:window-x="0"
+     inkscape:window-y="32"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1"
+     inkscape:pageshadow="0" />
+  <defs
+     id="defs2418" />
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1">
+    <path
+       id="path2477"
+       style="fill:#ffffff;stroke-width:0.355037"
+       d="M 5.2916667 0 A 5.2916665 5.2916665 0 0 0 0 5.2916667 A 5.2916665 5.2916665 0 0 0 5.2916667 10.583333 A 5.2916665 5.2916665 0 0 0 10.583333 5.2916667 A 5.2916665 5.2916665 0 0 0 5.2916667 0 z M 5.2916667 0.66145833 A 4.6302085 4.6302085 0 0 1 9.921875 5.2916667 A 4.6302085 4.6302085 0 0 1 5.2916667 9.921875 A 4.6302085 4.6302085 0 0 1 0.66145833 5.2916667 A 4.6302085 4.6302085 0 0 1 5.2916667 0.66145833 z " />
+    <path
+       d="M 1.6086655,4.1275011 H 1.9473319 L 2.154765,5.7234664 q 0.00847,0.0762 0.016933,0.1693332 0.00847,0.093133 0.016933,0.1735665 0.00847,0.093133 0.016933,0.1862666 h 0.046567 q 0.00847,-0.093133 0.021167,-0.1862666 0.00847,-0.080433 0.021167,-0.1735665 0.0127,-0.093133 0.0254,-0.1693332 L 2.565398,4.1275011 h 0.3640664 l 0.2455331,1.5959653 q 0.0127,0.080433 0.0254,0.1735666 0.0127,0.093133 0.021167,0.1735665 0.0127,0.093133 0.021167,0.1820332 h 0.0508 q 0.00847,-0.093133 0.016933,-0.1862666 0.00847,-0.080433 0.021167,-0.1693331 0.0127,-0.093133 0.021167,-0.1735666 L 3.5644639,4.1275011 H 3.8946636 L 3.5644639,6.4558325 H 3.0437643 L 2.8024645,4.8090672 q -0.00847,-0.071967 -0.016933,-0.1481665 -0.00423,-0.080433 -0.00847,-0.1481666 0,-0.0762 0,-0.1523999 h -0.055033 q 0,0.0762 -0.00423,0.1523999 -0.00423,0.067733 -0.00847,0.1481666 -0.00423,0.0762 -0.016933,0.1481665 L 2.4426315,6.4558325 H 1.9346319 Z"
+       id="path503"
+       style="font-size:4.23333px;font-family:'JetBrains Mono';-inkscape-font-specification:'JetBrains Mono, Normal';fill:#ffffff;stroke-width:0.355335" />
+    <path
+       d="m 4.148665,4.1275011 h 0.3386664 l 0.2074331,1.5959653 q 0.00847,0.0762 0.016933,0.1693332 0.00847,0.093133 0.016933,0.1735665 0.00847,0.093133 0.016933,0.1862666 h 0.046567 q 0.00847,-0.093133 0.021167,-0.1862666 0.00847,-0.080433 0.021167,-0.1735665 0.0127,-0.093133 0.0254,-0.1693332 L 5.1053975,4.1275011 H 5.4694639 L 5.714997,5.7234664 q 0.0127,0.080433 0.0254,0.1735666 0.0127,0.093133 0.021167,0.1735665 0.0127,0.093133 0.021167,0.1820332 h 0.0508 Q 5.842001,6.1594997 5.850464,6.0663661 5.858934,5.9859331 5.871631,5.897033 5.884331,5.8039 5.892798,5.7234664 L 6.1044633,4.1275011 H 6.4346631 L 6.1044633,6.4558325 H 5.5837638 L 5.342464,4.8090672 Q 5.333994,4.7371002 5.325531,4.6609007 5.321301,4.5804677 5.317061,4.5127341 q 0,-0.0762 0,-0.1523999 H 5.262028 q 0,0.0762 -0.00423,0.1523999 -0.00423,0.067733 -0.00847,0.1481666 -0.00423,0.0762 -0.016933,0.1481665 L 4.982631,6.4558325 H 4.4746314 Z"
+       id="path505"
+       style="font-size:4.23333px;font-family:'JetBrains Mono';-inkscape-font-specification:'JetBrains Mono, Normal';fill:#ffffff;stroke-width:0.355335" />
+    <path
+       d="M 6.6886645,4.1275011 H 7.0273309 L 7.234764,5.7234664 q 0.00847,0.0762 0.016933,0.1693332 0.00847,0.093133 0.016933,0.1735665 0.00847,0.093133 0.016933,0.1862666 H 7.33213 q 0.00847,-0.093133 0.021167,-0.1862666 0.00847,-0.080433 0.021167,-0.1735665 0.0127,-0.093133 0.0254,-0.1693332 L 7.645397,4.1275011 h 0.3640664 l 0.2455331,1.5959653 q 0.0127,0.080433 0.0254,0.1735666 0.0127,0.093133 0.021167,0.1735665 0.0127,0.093133 0.021167,0.1820332 h 0.0508 q 0.00847,-0.093133 0.016933,-0.1862666 0.00847,-0.080433 0.021167,-0.1693331 0.0127,-0.093133 0.021167,-0.1735666 L 8.6444628,4.1275011 H 8.9746626 L 8.6444628,6.4558325 H 8.1237633 L 7.8824635,4.8090672 q -0.00847,-0.071967 -0.016933,-0.1481665 -0.00423,-0.080433 -0.00847,-0.1481666 0,-0.0762 0,-0.1523999 h -0.055033 q 0,0.0762 -0.00423,0.1523999 -0.00423,0.067733 -0.00847,0.1481666 -0.00423,0.0762 -0.016933,0.1481665 L 7.5226304,6.4558325 H 7.0146309 Z"
+       id="path507"
+       style="font-size:4.23333px;font-family:'JetBrains Mono';-inkscape-font-specification:'JetBrains Mono, Normal';fill:#ffffff;stroke-width:0.355335" />
+  </g>
+</svg>
--- a/img/www-light.svg
+++ b/img/www-light.svg
--- a/index.html
+++ b/index.html
@ -7,12 +7,17 @@
  <link rel="stylesheet" href="/styles/style.css">
  <link rel="stylesheet" href="/styles/home.css">
  <link rel="shortcut icon" href="/img/favicon.ico" type="image/x-icon">
+  <script src="/scripts/main.js" defer></script>
  <title>Decentrala</title>
 </head>

 <body>
  <header>
-    <a class="logo" href="/index.html">Decentrala</a> <a class="account" href="/pages/account.html">Nalog</a>
+    <a class="logo" href="/index.html">Decentrala</a>
+    <span>
+      <button id="theme-switcher">turn the lights off</button>
+      <a class="account" href="/pages/account.html">Nalog</a>
+    </span>
  </header>
  <div class="main">
    <h1>Dobrodosli!</h1>
@ -40,7 +45,7 @@
      sve izgleda u realnosti, mozes da dodjes na neki od nasih <a href="/pages/events.html">dogadjaja</a>, i tamo nas
      upoznas!
    </p>
-    <img src="/img/mesh-light.png">
+    <img id="mesh" src="/img/mesh-light.svg">
  </div>
  <footer>
    <span class="sections">
@ -51,10 +56,12 @@
      <a href="/pages/contact.html">Kontakt</a>
    </span>
    <span class="copyleft">
-      <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/"><img src="/img/cc.svg" alt="CreativeCommons"></a>
-      <a href=""><img src="/img/w.svg" alt="Webring"></a>
-      <a href="https://gitea.dmz.rs/eline/decentrala-website-static-new"><img src="/img/git.svg" alt="SourceCode"></a>
-      <a href="https://balkan.fedive.rs/@decentrala"><img src="/img/mastodon.svg" alt="Mastodon"></a>
+      <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/"><img src="/img/cc-light.svg"
+          alt="CreativeCommons"></a>
+      <a href=""><img src="/img/w-light.svg" alt="Webring"></a>
+      <a href="https://gitea.dmz.rs/eline/decentrala-website-static-new"><img src="/img/git-light.svg"
+          alt="SourceCode"></a>
+      <a href="https://balkan.fedive.rs/@decentrala"><img src="/img/mastodon-light.svg" alt="Mastodon"></a>
      <span>Decentrala &copy; 2023</span>
    </span>
  </footer>
--- a/mesh.js
+++ b/mesh.js
@ -1,11 +0,0 @@
-// this is a p5.js script that generates mesh image for the website
-function setup() {
-  createCanvas(500, 700);
-  background("rgba(0,0,0,0)");
-  stroke("rgba(255,255,255,1)");
-  let j = 475;
-  for (let i = 0; i < 700; i += 35) {
-    line(500, i, j, 700);
-    j -= 25;
-  }
-}
--- a/pages/account.html
+++ b/pages/account.html
@ -7,16 +7,21 @@
  <link rel="stylesheet" href="/styles/style.css">
  <link rel="stylesheet" href="/styles/account.css">
  <link rel="shortcut icon" href="/img/favicon.ico" type="image/x-icon">
+  <script src="/scripts/main.js" defer></script>
  <title>Decentrala - Nalog</title>
 </head>

 <body>
  <header>
-    <a class="logo" href="/index.html">Decentrala</a> <a class="account" href="/pages/account.html">Nalog</a>
+    <a class="logo" href="/index.html">Decentrala</a>
+    <span>
+      <button id="theme-switcher">turn the lights off</button>
+      <a class="account" href="/pages/account.html">Nalog</a>
+    </span>
  </header>
  <div class="main">
    Ova stranica je trenutno u izradi...
-    <img src="/img/mesh-light.png">
+    <img id="mesh" src="/img/mesh-light.svg">
  </div>
  <footer>
    <span class="sections">
@ -27,10 +32,12 @@
      <a href="/pages/contact.html">Kontakt</a>
    </span>
    <span class="copyleft">
-      <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/"><img src="/img/cc.svg" alt="CreativeCommons"></a>
-      <a href=""><img src="/img/w.svg" alt="Webring"></a>
-      <a href="https://gitea.dmz.rs/eline/decentrala-website-static-new"><img src="/img/git.svg" alt="SourceCode"></a>
-      <a href="https://balkan.fedive.rs/@decentrala"><img src="/img/mastodon.svg" alt="Mastodon"></a>
+      <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/"><img src="/img/cc-light.svg"
+          alt="CreativeCommons"></a>
+      <a href=""><img src="/img/w-light.svg" alt="Webring"></a>
+      <a href="https://gitea.dmz.rs/eline/decentrala-website-static-new"><img src="/img/git-light.svg"
+          alt="SourceCode"></a>
+      <a href="https://balkan.fedive.rs/@decentrala"><img src="/img/mastodon-light.svg" alt="Mastodon"></a>
      <span>Decentrala &copy; 2023</span>
    </span>
  </footer>
--- a/pages/blog.html
+++ b/pages/blog.html
@ -7,16 +7,21 @@
  <link rel="stylesheet" href="/styles/style.css">
  <link rel="stylesheet" href="/styles/blog.css">
  <link rel="shortcut icon" href="/img/favicon.ico" type="image/x-icon">
+  <script src="/scripts/main.js" defer></script>
  <title>Decentrala - Blog</title>
 </head>

 <body>
  <header>
-    <a class="logo" href="/index.html">Decentrala</a> <a class="account" href="/pages/account.html">Nalog</a>
+    <a class="logo" href="/index.html">Decentrala</a>
+    <span>
+      <button id="theme-switcher">turn the lights off</button>
+      <a class="account" href="/pages/account.html">Nalog</a>
+    </span>
  </header>
  <div class="main">
    Ova stranica je trenutno u izradi...
-    <img src="/img/mesh-light.png">
+    <img id="mesh" src="/img/mesh-light.svg">
  </div>
  <footer>
    <span class="sections">
@ -27,10 +32,12 @@
      <a href="/pages/contact.html">Kontakt</a>
    </span>
    <span class="copyleft">
-      <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/"><img src="/img/cc.svg" alt="CreativeCommons"></a>
-      <a href=""><img src="/img/w.svg" alt="Webring"></a>
-      <a href="https://gitea.dmz.rs/eline/decentrala-website-static-new"><img src="/img/git.svg" alt="SourceCode"></a>
-      <a href="https://balkan.fedive.rs/@decentrala"><img src="/img/mastodon.svg" alt="Mastodon"></a>
+      <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/"><img src="/img/cc-light.svg"
+          alt="CreativeCommons"></a>
+      <a href=""><img src="/img/w-light.svg" alt="Webring"></a>
+      <a href="https://gitea.dmz.rs/eline/decentrala-website-static-new"><img src="/img/git-light.svg"
+          alt="SourceCode"></a>
+      <a href="https://balkan.fedive.rs/@decentrala"><img src="/img/mastodon-light.svg" alt="Mastodon"></a>
      <span>Decentrala &copy; 2023</span>
    </span>
  </footer>
--- a/pages/contact.html
+++ b/pages/contact.html
@ -7,19 +7,24 @@
  <link rel="stylesheet" href="/styles/style.css">
  <link rel="stylesheet" href="/styles/contact.css">
  <link rel="shortcut icon" href="/img/favicon.ico" type="image/x-icon">
+  <script src="/scripts/main.js" defer></script>
  <title>Decentrala - Kontakt</title>
 </head>

 <body>
  <header>
-    <a class="logo" href="/index.html">Decentrala</a> <a class="account" href="/pages/account.html">Nalog</a>
+    <a class="logo" href="/index.html">Decentrala</a>
+    <span>
+      <button id="theme-switcher">turn the lights off</button>
+      <a class="account" href="/pages/account.html">Nalog</a>
+    </span>
  </header>
  <div class="main">
    <h1>Kontakt</h1>
    <p>Mozes nam poslati mail na <a href="mailto:dmz@dmz.rs">dmz@dmz.rs</a> ili se mozes pridruziti nasem <a
        href="https://forum.dmz.rs">Forumu</a>.</p>
    <p>Takodje smo i na <a href="https://balkan.fedive.rs/@decentrala">Fediversu!</a></p>
-    <img src="/img/mesh-light.png">
+    <img id="mesh" src="/img/mesh-light.svg">
  </div>
  <footer>
    <span class="sections">
@ -30,10 +35,12 @@
      <a href="/pages/contact.html">Kontakt</a>
    </span>
    <span class="copyleft">
-      <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/"><img src="/img/cc.svg" alt="CreativeCommons"></a>
-      <a href=""><img src="/img/w.svg" alt="Webring"></a>
-      <a href="https://gitea.dmz.rs/eline/decentrala-website-static-new"><img src="/img/git.svg" alt="SourceCode"></a>
-      <a href="https://balkan.fedive.rs/@decentrala"><img src="/img/mastodon.svg" alt="Mastodon"></a>
+      <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/"><img src="/img/cc-light.svg"
+          alt="CreativeCommons"></a>
+      <a href=""><img src="/img/w-light.svg" alt="Webring"></a>
+      <a href="https://gitea.dmz.rs/eline/decentrala-website-static-new"><img src="/img/git-light.svg"
+          alt="SourceCode"></a>
+      <a href="https://balkan.fedive.rs/@decentrala"><img src="/img/mastodon-light.svg" alt="Mastodon"></a>
      <span>Decentrala &copy; 2023</span>
    </span>
  </footer>
--- a/pages/events.html
+++ b/pages/events.html
@ -7,12 +7,17 @@
  <link rel="stylesheet" href="/styles/style.css">
  <link rel="stylesheet" href="/styles/events.css">
  <link rel="shortcut icon" href="/img/favicon.ico" type="image/x-icon">
+  <script src="/scripts/main.js" defer></script>
  <title>Decentrala - Dogadjaji</title>
 </head>

 <body>
  <header>
-    <a class="logo" href="/index.html">Decentrala</a> <a class="account" href="/pages/account.html">Nalog</a>
+    <a class="logo" href="/index.html">Decentrala</a>
+    <span>
+      <button id="theme-switcher">turn the lights off</button>
+      <a class="account" href="/pages/account.html">Nalog</a>
+    </span>
  </header>
  <div class="main">
    <h1>Dogadjaji</h1>
@ -64,7 +69,7 @@

    </table>
    <!-- dogadjaji end -->
-    <img src="/img/mesh-light.png">
+    <img id="mesh" src="/img/mesh-light.svg">
  </div>
  <footer>
    <span class="sections">
@ -75,10 +80,12 @@
      <a href="/pages/contact.html">Kontakt</a>
    </span>
    <span class="copyleft">
-      <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/"><img src="/img/cc.svg" alt="CreativeCommons"></a>
-      <a href=""><img src="/img/w.svg" alt="Webring"></a>
-      <a href="https://gitea.dmz.rs/eline/decentrala-website-static-new"><img src="/img/git.svg" alt="SourceCode"></a>
-      <a href="https://balkan.fedive.rs/@decentrala"><img src="/img/mastodon.svg" alt="Mastodon"></a>
+      <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/"><img src="/img/cc-light.svg"
+          alt="CreativeCommons"></a>
+      <a href=""><img src="/img/w-light.svg" alt="Webring"></a>
+      <a href="https://gitea.dmz.rs/eline/decentrala-website-static-new"><img src="/img/git-light.svg"
+          alt="SourceCode"></a>
+      <a href="https://balkan.fedive.rs/@decentrala"><img src="/img/mastodon-light.svg" alt="Mastodon"></a>
      <span>Decentrala &copy; 2023</span>
    </span>
  </footer>
--- a/pages/projects.html
+++ b/pages/projects.html
@ -7,16 +7,21 @@
  <link rel="stylesheet" href="/styles/style.css">
  <link rel="stylesheet" href="/styles/projects.css">
  <link rel="shortcut icon" href="/img/favicon.ico" type="image/x-icon">
+  <script src="/scripts/main.js" defer></script>
  <title>Decentrala - Projekti</title>
 </head>

 <body>
  <header>
-    <a class="logo" href="/index.html">Decentrala</a> <a class="account" href="/pages/account.html">Nalog</a>
+    <a class="logo" href="/index.html">Decentrala</a>
+    <span>
+      <button id="theme-switcher">turn the lights off</button>
+      <a class="account" href="/pages/account.html">Nalog</a>
+    </span>
  </header>
  <div class="main">
    Ova stranica je trenutno u izradi...
-    <img src="/img/mesh-light.png">
+    <img id="mesh" src="/img/mesh-light.svg">
  </div>
  <footer>
    <span class="sections">
@ -27,10 +32,12 @@
      <a href="/pages/contact.html">Kontakt</a>
    </span>
    <span class="copyleft">
-      <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/"><img src="/img/cc.svg" alt="CreativeCommons"></a>
-      <a href=""><img src="/img/w.svg" alt="Webring"></a>
-      <a href="https://gitea.dmz.rs/eline/decentrala-website-static-new"><img src="/img/git.svg" alt="SourceCode"></a>
-      <a href="https://balkan.fedive.rs/@decentrala"><img src="/img/mastodon.svg" alt="Mastodon"></a>
+      <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/"><img src="/img/cc-light.svg"
+          alt="CreativeCommons"></a>
+      <a href=""><img src="/img/w-light.svg" alt="Webring"></a>
+      <a href="https://gitea.dmz.rs/eline/decentrala-website-static-new"><img src="/img/git-light.svg"
+          alt="SourceCode"></a>
+      <a href="https://balkan.fedive.rs/@decentrala"><img src="/img/mastodon-light.svg" alt="Mastodon"></a>
      <span>Decentrala &copy; 2023</span>
    </span>
  </footer>
--- a/pages/services.html
+++ b/pages/services.html
@ -7,12 +7,17 @@
  <link rel="stylesheet" href="/styles/style.css">
  <link rel="stylesheet" href="/styles/services.css">
  <link rel="shortcut icon" href="/img/favicon.ico" type="image/x-icon">
+  <script src="/scripts/main.js" defer></script>
  <title>Decentrala - Servisi</title>
 </head>

 <body>
  <header>
-    <a class="logo" href="/index.html">Decentrala</a> <a class="account" href="/pages/account.html">Nalog</a>
+    <a class="logo" href="/index.html">Decentrala</a>
+    <span>
+      <button id="theme-switcher">turn the lights off</button>
+      <a class="account" href="/pages/account.html">Nalog</a>
+    </span>
  </header>
  <div class="main">
    <h1>Servisi</h1>
@ -57,7 +62,7 @@
    <p>Ovo su neki od servisa koje trenutno odrzavamo na nasim serverima. Da bi koristio ove servise, <em>mozes</em> se
      registrujes za svaki servis posebno, ali mozes i da da napravis <a href="/pages/account.html">nalog</a> na nasem
      serveru i koristis sve servis sa istim nalogom.</p>
-    <img src="/img/mesh-light.png">
+    <img id="mesh" src="/img/mesh-light.svg">
  </div>
  <footer>
    <span class="sections">
@ -68,10 +73,12 @@
      <a href="/pages/contact.html">Kontakt</a>
    </span>
    <span class="copyleft">
-      <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/"><img src="/img/cc.svg" alt="CreativeCommons"></a>
-      <a href=""><img src="/img/w.svg" alt="Webring"></a>
-      <a href="https://gitea.dmz.rs/eline/decentrala-website-static-new"><img src="/img/git.svg" alt="SourceCode"></a>
-      <a href="https://balkan.fedive.rs/@decentrala"><img src="/img/mastodon.svg" alt="Mastodon"></a>
+      <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/"><img src="/img/cc-light.svg"
+          alt="CreativeCommons"></a>
+      <a href=""><img src="/img/w-light.svg" alt="Webring"></a>
+      <a href="https://gitea.dmz.rs/eline/decentrala-website-static-new"><img src="/img/git-light.svg"
+          alt="SourceCode"></a>
+      <a href="https://balkan.fedive.rs/@decentrala"><img src="/img/mastodon-light.svg" alt="Mastodon"></a>
      <span>Decentrala &copy; 2023</span>
    </span>
  </footer>
--- a/scripts/main.js
+++ b/scripts/main.js
@ -0,0 +1,49 @@
+const theme_switcher = document.getElementById("theme-switcher");
+const imgs = document.getElementsByTagName("img");
+
+let theme = window.localStorage.getItem("theme");
+
+if (theme !== null) {
+  if (theme === "light") {
+    changeToLightTheme();
+  } else {
+    changeToDarkTheme();
+  }
+} else {
+  if (
+    window.matchMedia &&
+    window.matchMedia("(prefers-color-scheme: dark)").matches
+  ) {
+    changeToDarkTheme();
+  }
+}
+
+theme_switcher.addEventListener("click", () => {
+  if (theme_switcher.textContent.indexOf("off") !== -1) {
+    changeToDarkTheme();
+  } else {
+    changeToLightTheme();
+  }
+});
+
+function changeToDarkTheme() {
+  theme_switcher.textContent = "turn the light on";
+  document.documentElement.style.setProperty("--border", "var(--dark-border)");
+  document.documentElement.style.setProperty("--text", "var(--dark-text)");
+  document.documentElement.style.setProperty("--bg", "var(--dark-bg)");
+  window.localStorage.setItem("theme", "dark");
+  for (let i = 0; i < imgs.length; i += 1) {
+    imgs[i].src = imgs[i].src.replace("-light", "-dark");
+  }
+}
+
+function changeToLightTheme() {
+  theme_switcher.textContent = "turn the light off";
+  document.documentElement.style.setProperty("--border", "var(--light-border)");
+  document.documentElement.style.setProperty("--text", "var(--light-text)");
+  document.documentElement.style.setProperty("--bg", "var(--light-bg)");
+  window.localStorage.setItem("theme", "light");
+  for (let i = 0; i < imgs.length; i += 1) {
+    imgs[i].src = imgs[i].src.replace("-dark", "-light");
+  }
+}
--- a/styles/blog.css
+++ b/styles/blog.css
@ -1,3 +1,3 @@
-.main img {
+#mesh {
  display: none;
 }
--- a/styles/events.css
+++ b/styles/events.css
@ -7,12 +7,12 @@ th,
 td {
  padding: 0 1rem 0 1rem;
  text-align: left;
-  border-left: 2px solid var(--light-border);
+  border-left: 2px solid var(--border);
 }

 th {
  padding: 1rem 1rem 0 1rem;
-  border-bottom: 2px solid var(--light-border);
+  border-bottom: 2px solid var(--border);
 }

 td:nth-child(odd) {
--- a/styles/services.css
+++ b/styles/services.css
@ -8,12 +8,12 @@ th,
 td {
  padding: 0 1rem 0 1rem;
  text-align: left;
-  border-left: 2px solid var(--light-border);
+  border-left: 2px solid var(--border);
 }

 th {
  padding: 1rem 1rem 0 1rem;
-  border-bottom: 2px solid var(--light-border);
+  border-bottom: 2px solid var(--border);
 }

 td {
--- a/styles/style.css
+++ b/styles/style.css
@ -2,10 +2,15 @@
  --light-text: #181715;
  --light-bg: #ffffff;
  --light-border: #181715;
-  /* --dark-text: #ffffff;
+  --dark-text: #ffffff;
  --dark-bg: #181715;
-  --dark-border: #ffffff; */
-  --light-hightlight: #72dec2;
+  --dark-border: #ffffff;
+
+  --hightlight: #72dec2;
+
+  --border: var(--light-border);
+  --text: var(--light-text);
+  --bg: var(--light-bg);
 }

@font-face {
@ -23,8 +28,8 @@ html,
 body {
  width: 100%;
  height: 100%;
-  color: var(--light-text);
-  background: var(--light-bg);
+  color: var(--text);
+  background: var(--bg);
 }

 body {
@ -46,12 +51,12 @@ footer {

 header {
  grid-area: 1 / 1 / 2 / 2;
-  border-bottom: 2px solid var(--light-border);
+  border-bottom: 2px solid var(--border);
 }

 footer {
  grid-area: 3 / 1 / 4 / 2;
-  border-top: 2px solid var(--light-border);
+  border-top: 2px solid var(--border);
 }

 .main {
@ -60,12 +65,13 @@ footer {
  font-size: 1.3rem;
  line-height: 2rem;
  max-width: 120ch;
+  overflow-y: auto;
 }

 a,
 a:visited {
  text-decoration: none;
-  color: var(--light-text);
+  color: var(--text);
 }

 .main a {
@ -76,8 +82,8 @@ a:visited {

 a:hover,
 a:focus {
-  background-color: var(--light-hightlight);
-  text-decoration: line-through var(--light-text);
+  background-color: var(--hightlight);
+  text-decoration: line-through var(--text);
 }

 .logo {
@ -90,7 +96,7 @@ a:focus {
  font-size: 2rem
 }

-.main img {
+#mesh {
  position: absolute;
  bottom: 5rem;
  right: 0;
@ -103,11 +109,20 @@ a:focus {

 .copyleft a:hover,
 .copyleft a:focus {
-  background-color: var(--light-bg);
+  background-color: var(--bg);
 }

 .copyleft {
  display: flex;
  flex-direction: row;
  align-items: center;
+}
+
+button {
+  font-style: italic;
+  font-weight: lighter;
+  border: none;
+  background: var(--bg);
+  color: var(--text);
+  margin: 0 4rem 0 0;
 }
Author	SHA1	Message	Date
eline	bdddddb342	Implemented theme switcher (light/dark)	2023-05-06 18:13:12 +02:00
eline	1e0dbade3b	setting things up for themes switcher	2023-05-05 22:16:03 +02:00