diff --git a/frontends/etiquette_flask/static/css/common.css b/frontends/etiquette_flask/static/css/common.css
index 4068a13..a626891 100644
--- a/frontends/etiquette_flask/static/css/common.css
+++ b/frontends/etiquette_flask/static/css/common.css
@@ -14,6 +14,8 @@ Organization:
 {
     --color_site_theme: #00d8f4;
     --color_site_secondary: #ffffd4;
+    --color_site_transparency: rgba(0, 0, 0, 0.1);
+    --color_site_dropshadow: rgba(0, 0, 0, 0.25);
     --color_3d_shadow: rgba(0, 0, 0, 0.5);
     --color_3d_highlight: rgba(255, 255, 255, 0.5);
 }
@@ -49,7 +51,7 @@ pre
     flex: 1;
     justify-content: center;
 
-    background-color: rgba(0, 0, 0, 0.1);   
+    background-color: var(--color_site_transparency);
 }
 .header_element:hover
 {
@@ -153,7 +155,7 @@ is hovered over.
 
     overflow-y: auto;
 
-    background-color: rgba(0, 0, 0, 0.1);
+    background-color: var(--color_site_transparency);
 }
 .message_bubble
 {
diff --git a/frontends/etiquette_flask/static/css/photo_card.css b/frontends/etiquette_flask/static/css/photo_card.css
index 838236e..95b52d6 100644
--- a/frontends/etiquette_flask/static/css/photo_card.css
+++ b/frontends/etiquette_flask/static/css/photo_card.css
@@ -16,7 +16,7 @@
 }
 .photo_card_list:hover
 {
-    box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.25);
+    box-shadow: 2px 2px 5px 0px var(--color_site_dropshadow);
 }
 .photo_card_list .photo_card_selector_checkbox
 {
@@ -40,7 +40,7 @@
     margin: 8px;
 
     border-radius: 8px;
-    box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.25);
+    box-shadow: 2px 2px 5px 0px var(--color_site_dropshadow);
 }
 .photo_card_grid .photo_card_selector_checkbox
 {
diff --git a/frontends/etiquette_flask/templates/album.html b/frontends/etiquette_flask/templates/album.html
index a301122..4c7a6bd 100644
--- a/frontends/etiquette_flask/templates/album.html
+++ b/frontends/etiquette_flask/templates/album.html
@@ -34,7 +34,7 @@ p
 {
     font-family: initial;
     padding: 8px;
-    background-color: rgba(0, 0, 0, 0.1);
+    background-color: var(--color_site_transparency);
 }
 </style>
 </head>
diff --git a/frontends/etiquette_flask/templates/bookmarks.html b/frontends/etiquette_flask/templates/bookmarks.html
index a3526a8..e8f2615 100644
--- a/frontends/etiquette_flask/templates/bookmarks.html
+++ b/frontends/etiquette_flask/templates/bookmarks.html
@@ -30,7 +30,7 @@
     max-width: 500px;
 
     border-radius: 8px;
-    box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.25);
+    box-shadow: 2px 2px 5px 0px var(--color_site_dropshadow);
 
     background-color: var(--color_site_secondary);
 }
diff --git a/frontends/etiquette_flask/templates/clipboard.html b/frontends/etiquette_flask/templates/clipboard.html
index 1c7a319..d17f2a2 100644
--- a/frontends/etiquette_flask/templates/clipboard.html
+++ b/frontends/etiquette_flask/templates/clipboard.html
@@ -52,7 +52,7 @@ body
         "download_zip_area"
         "message_area";
 
-    background-color: rgba(0, 0, 0, 0.1);
+    background-color: var(--color_site_transparency);
 }
 #add_tag_area
 {
diff --git a/frontends/etiquette_flask/templates/photo.html b/frontends/etiquette_flask/templates/photo.html
index 23acb73..86d73af 100644
--- a/frontends/etiquette_flask/templates/photo.html
+++ b/frontends/etiquette_flask/templates/photo.html
@@ -43,7 +43,7 @@
     flex: 3;
     padding: 8px;
 
-    background-color: rgba(0, 0, 0, 0.1);
+    background-color: var(--color_site_transparency);
 
     word-wrap: break-word;
 }
@@ -56,7 +56,7 @@
     min-height: 30px;
     padding: 8px;
 
-    background-color: rgba(0, 0, 0, 0.1);
+    background-color: var(--color_site_transparency);
 }
 #message_area
 {
diff --git a/frontends/etiquette_flask/templates/root.html b/frontends/etiquette_flask/templates/root.html
index 815c9bb..d18e6e6 100644
--- a/frontends/etiquette_flask/templates/root.html
+++ b/frontends/etiquette_flask/templates/root.html
@@ -27,7 +27,7 @@ body, .nice_link
 {
     width: 50%;
     height: 40px;
-    background-color: rgba(0, 0, 0, 0.1);
+    background-color: var(--color_site_transparency);
 }
 .nice_link:hover
 {
diff --git a/frontends/etiquette_flask/templates/search.html b/frontends/etiquette_flask/templates/search.html
index 425acd6..86e767d 100644
--- a/frontends/etiquette_flask/templates/search.html
+++ b/frontends/etiquette_flask/templates/search.html
@@ -51,7 +51,7 @@ form
     min-width: 300px;
     width: 300px;
 
-    background-color: rgba(0, 0, 0, 0.1);
+    background-color: var(--color_site_transparency);
 
     word-wrap: break-word;
 }
diff --git a/frontends/etiquette_flask/templates/tags.html b/frontends/etiquette_flask/templates/tags.html
index 7d7b8c4..e9c6966 100644
--- a/frontends/etiquette_flask/templates/tags.html
+++ b/frontends/etiquette_flask/templates/tags.html
@@ -52,7 +52,7 @@ body
         "editor_area"
         "message_area";
 
-    background-color: rgba(0, 0, 0, 0.1);
+    background-color: var(--color_site_transparency);
 }
 #editor_area
 {
@@ -68,7 +68,7 @@ body
 {
     margin-right: 8px;
     padding: 8px;
-    background-color: rgba(0, 0, 0, 0.1);
+    background-color: var(--color_site_transparency);
     font-family: initial;
 }
 @media screen and (max-width: 800px)