Change the implementation of grayscale

epicyon-calendar.css

@@ -1,5 +1,4 @@
 :root {
-    --grayscale: 0%;
     --main-bg-color: #282c37;
     --calendar-bg-color: #eee;
     --lines-color: black;
@@ -39,7 +38,6 @@ body {
     font-family: 'Montserrat';
     font-weight: 700;
     min-height: 100vh;
-    filter: grayscale(var(--grayscale));
 }
 
 main {
@@ -182,12 +180,10 @@ tr:nth-child(even) > .calendar__day__cell:nth-child(even) {
 }
 
 .calendardayicon {
-    filter: grayscale(var(--grayscale));
     width: 100%
 }
 
 .buttonprev {
-    filter: grayscale(var(--grayscale));
     float: left;
     width: 10%;
     -ms-transform: translateY(30%);
@@ -195,7 +191,6 @@ tr:nth-child(even) > .calendar__day__cell:nth-child(even) {
 }
 
 .buttonnext {
-    filter: grayscale(var(--grayscale));
     float: right;
     width: 10%;
     -ms-transform: translateY(30%) scaleX(-1);

epicyon-follow.css

@@ -1,7 +1,6 @@
 @charset "UTF-8";
 
 :root {
-    --grayscale: 0%;
     --main-bg-color: #282c37;
     --link-bg-color: #282c37;
     --main-fg-color: #dddddd;
@@ -50,7 +49,6 @@ body, html {
     max-width: 100%;
     min-width: 600px;
     margin: 5% auto;
-    filter: grayscale(var(--grayscale));
 }
 
 a, u {
@@ -91,7 +89,6 @@ a:link {
 }
 
 .followAvatar img {
-    filter: grayscale(var(--grayscale));
     border-radius: 10%;
     width: 20%;
     min-width: 200px;
@@ -171,7 +168,6 @@ input[type=text] {
 }
 
 .options img {
-    filter: grayscale(var(--grayscale));
     width: 15%;
 }
 

epicyon-login.css

@@ -1,7 +1,6 @@
 @charset "UTF-8";
 
 :root {
-    --grayscale: 0%;
     --main-bg-color: #282c37;
     --link-bg-color: #282c37;
     --main-fg-color: #dddddd;
@@ -41,7 +40,6 @@ body, html {
     min-width: 600px;
     margin: 0 auto;
     font-size: var(--font-size);
-    filter: grayscale(var(--grayscale));
 }
 
 a, u {
@@ -98,13 +96,11 @@ button:hover {
 }
 
 .imgcontainer {
-    filter: grayscale(var(--grayscale));
     text-align: center;
     margin: 24px 0 12px 0;
 }
 
 img.avatar {
-    filter: grayscale(var(--grayscale));
     width: 40%;
     border-radius: 50%;
 }

epicyon-profile.css

@@ -1,7 +1,6 @@
 @charset "UTF-8";
 
 :root {
-    --grayscale: 0%;
     --main-bg-color: #282c37;
     --link-bg-color: #282c37;
     --dropdown-fg-color: #dddddd;
@@ -71,7 +70,6 @@ body, html {
     min-width: 950px;
     margin: 0 auto;
     font-size: var(--font-size);
-    filter: grayscale(var(--grayscale));
 }
 
 a, u {
@@ -109,7 +107,6 @@ a:link {
 }
 
 .rssfeed img {
-    filter: grayscale(var(--grayscale));
     width: 5%;
     float: right;
 }
@@ -147,7 +144,6 @@ a:link {
 }
 
 .hero-image img {
-    filter: grayscale(var(--grayscale));
     width: 50%;
 }
 
@@ -179,7 +175,6 @@ a:link {
 }
 
 .hero-text img.emoji {
-    filter: grayscale(var(--grayscale));
     width: 50px;
     padding: 0 0;
     margin: 0 0;
@@ -311,7 +306,6 @@ a:link {
 }
 
 .container img.emoji {
-    filter: grayscale(var(--grayscale));
     float: none;
     width: 50px;
     margin-left: 0px;
@@ -322,7 +316,6 @@ a:link {
 }
 
 .hero-text img.emojiprofile {
-    filter: grayscale(var(--grayscale));
     float: none;
     width: 50px;
     margin-left: 0px;
@@ -356,7 +349,6 @@ a:link {
 }
 
 .container img.announceOrReply {
-    filter: grayscale(var(--grayscale));
     float: none;
     width: 30px;
     margin: 0 0;
@@ -366,7 +358,6 @@ a:link {
 }
 
 .container img.DMicon {
-    filter: grayscale(var(--grayscale));
     float: none;
     width: 40px;
     margin: 0 0;
@@ -389,14 +380,12 @@ a:link {
 }
 
 .container img.attachment {
-    filter: grayscale(var(--grayscale));
     max-width: 120%;
     margin-left: 5%;
     width: 120%;
     padding-bottom: 3%;
 }
 .container img.right {
-    filter: grayscale(var(--grayscale));
     float: var(--icons-side);
     margin-left: 0px;
     margin-right:0;
@@ -404,7 +393,6 @@ a:link {
     margin: 0 0;
 }
 .containericons img.right {
-    filter: grayscale(var(--grayscale));
     float: var(--icons-side);
     margin-left: 20px;
     margin-right: 0;
@@ -538,7 +526,6 @@ input[type=submit]:hover {
 }
 
 .dropdown img {
-    filter: grayscale(var(--grayscale));
     opacity: 1.0;
     width: 32px;
     height: 32px;
@@ -563,7 +550,6 @@ input[type=submit]:hover {
 }
 
 .search-result img {
-    filter: grayscale(var(--grayscale));
     width: 7%;
     padding: 0px 30px;
 }
@@ -588,7 +574,6 @@ input[type=submit]:hover {
 }
 
 .dropdown-content img {
-    filter: grayscale(var(--grayscale));
     width: 32px;
     height: 32px;
     padding: 0px 0px;
@@ -638,7 +623,6 @@ input[type=submit]:hover {
 }
 
 .dropbtn img {
-    filter: grayscale(var(--grayscale));
     opacity: 1.0;
     width: 3%;
     height: 3%;
@@ -652,7 +636,6 @@ div.gallery:hover {
 }
 
 div.gallery img {
-    filter: grayscale(var(--grayscale));
     width: 100%;
     height: auto;
 }
@@ -896,7 +879,6 @@ aside .toggle-inside li {
         text-align: center;
     }
     .container img {
-	filter: grayscale(var(--grayscale));
         float: left;
         max-width: 400px;
         width: 5%;
@@ -905,12 +887,10 @@ aside .toggle-inside li {
         border-radius: var(--image-corners);
     }
     .container img.emojisearch {
-	filter: grayscale(var(--grayscale));
         width: 15%;
         float: right;
     }
     .container img.emojicalendar {
-	filter: grayscale(var(--grayscale));
         float: left;
         max-width: 400px;
         width: 8%;
@@ -918,7 +898,6 @@ aside .toggle-inside li {
         transform: translateY(-25%);
     }
     .container img.timelineicon {
-	filter: grayscale(var(--grayscale));
         float: var(--icons-side);
         margin-left: 0px;
         margin-right:0;
@@ -927,7 +906,6 @@ aside .toggle-inside li {
         width: 50px;
     }
     .container img.emojiheader {
-	filter: grayscale(var(--grayscale));
         float: none;
         width: 25px;
         margin-left: 0px;
@@ -937,7 +915,6 @@ aside .toggle-inside li {
         vertical-align: middle;
     }
     .containericons img {
-	filter: grayscale(var(--grayscale));
         float: var(--icons-side);
         max-width: 200px;
         width: 3%;
@@ -945,7 +922,6 @@ aside .toggle-inside li {
         border-radius: 0%;
     }
     div.mediaicons img {
-	filter: grayscale(var(--grayscale));
         float: right;
         max-width: 200px;
         width: 6%;
@@ -953,7 +929,6 @@ aside .toggle-inside li {
         border-radius: 0%;
     }
     div.mediaavatar img {
-	filter: grayscale(var(--grayscale));
         float: left;
         max-width: 200px;
         width: 5%;
@@ -961,7 +936,6 @@ aside .toggle-inside li {
         border-radius: 0%;
     }
     .timeline-avatar img {
-	filter: grayscale(var(--grayscale));
         opacity: 1.0;
         width: 8%;
         height: 8%;
@@ -1217,24 +1191,20 @@ aside .toggle-inside li {
         font-family: Arial, Helvetica, sans-serif;
     }
     .hero-text img.qrcode {
-	filter: grayscale(var(--grayscale));
         border-radius: 1%;
         width: 5%;
         min-width: 20px;
     }
     .hero-text img.title {
-	filter: grayscale(var(--grayscale));
         border-radius: 1%;
         width: 15%;
     }
     #msgscope label img {
-	filter: grayscale(var(--grayscale));
         width: 46px;
         height: 46px;
         padding: 0px 0px;
     }
     .toggle-msgScope img {
-	filter: grayscale(var(--grayscale));
         width: 32px;
         height: 32px;
         padding: 0px 0px;
@@ -1310,7 +1280,6 @@ aside .toggle-inside li {
         text-align: center;
     }
     .container img {
-	filter: grayscale(var(--grayscale));
         float: left;
         max-width: 400px;
         width: 15%;
@@ -1319,12 +1288,10 @@ aside .toggle-inside li {
         border-radius: var(--image-corners);
     }
     .container img.emojisearch {
-	filter: grayscale(var(--grayscale));
         width: 25%;
         float: right;
     }
     .container img.emojicalendar {
-	filter: grayscale(var(--grayscale));
         float: left;
         max-width: 400px;
         width: 12%;
@@ -1332,7 +1299,6 @@ aside .toggle-inside li {
         transform: translateY(-25%);
     }
     .container img.timelineicon {
-	filter: grayscale(var(--grayscale));
         float: var(--icons-side);
         margin-left: 0px;
         margin-right:0;
@@ -1341,7 +1307,6 @@ aside .toggle-inside li {
         width: 100px;
     }
     .container img.emojiheader {
-	filter: grayscale(var(--grayscale));
         float: none;
         width: 45px;
         margin-left: 0px;
@@ -1351,7 +1316,6 @@ aside .toggle-inside li {
         vertical-align: middle;
     }
     div.mediaavatar img {
-	filter: grayscale(var(--grayscale));
         float: left;
         max-width: 200px;
         width: 8%;
@@ -1359,7 +1323,6 @@ aside .toggle-inside li {
         border-radius: 0%;
     }
     div.mediaicons img {
-	filter: grayscale(var(--grayscale));
         float: right;
         max-width: 200px;
         width: 10%;
@@ -1367,7 +1330,6 @@ aside .toggle-inside li {
         border-radius: 0%;
     }
     .containericons img {
-	filter: grayscale(var(--grayscale));
         float: var(--icons-side);
         max-width: 200px;
         width: 7%;
@@ -1375,7 +1337,6 @@ aside .toggle-inside li {
         border-radius: 0%;
     }
     .timeline-avatar img {
-	filter: grayscale(var(--grayscale));
         opacity: 1.0;
         width: 15%;
         height: 15%;
@@ -1631,24 +1592,20 @@ aside .toggle-inside li {
         font-family: Arial, Helvetica, sans-serif;
     }
     .hero-text img.qrcode {
-	filter: grayscale(var(--grayscale));
         border-radius: 1%;
         width: 15%;
         min-width: 20px;
     }
     .hero-text img.title {
-	filter: grayscale(var(--grayscale));
         border-radius: 1%;
         width: 25%;
     }
     #msgscope label  img {
-	filter: grayscale(var(--grayscale));
         width: 64px;
         height: 64px;
         padding: 0px 0px;
     }
     .toggle-msgScope img {
-	filter: grayscale(var(--grayscale));
         width: 64px;
         height: 64px;
         margin: -15px 0px;

theme.py

@@ -106,9 +106,8 @@ def setThemeFromDict(baseDir: str, name: str, themeParams: {}) -> None:
                 cssfile.write(css)
 
 
-def setSingleThemeParam(baseDir: str,
+def enableGrayscale(baseDir: str) -> None:
-                        paramName: str, paramValue: str) -> None:
+    """Enables grayscale for the current theme
-    """Sets a single theme parameter across all css files
     """
     themeFiles = ('epicyon.css', 'login.css', 'follow.css',
                   'suspended.css', 'calendar.css', 'blog.css')
@@ -118,10 +117,39 @@ def setSingleThemeParam(baseDir: str,
             continue
         with open(templateFilename, 'r') as cssfile:
             css = cssfile.read()
-            css = setCSSparam(css, paramName, paramValue)
+            if 'grayscale' not in css:
-            filename = baseDir + '/' + filename
+                css = \
-            with open(filename, 'w') as cssfile:
+                    css.replace('body, html {',
-                cssfile.write(css)
+                                'body, html {\n    filter: grayscale(100%);')
+                filename = baseDir + '/' + filename
+                with open(filename, 'w') as cssfile:
+                    cssfile.write(css)
+    grayscaleFilename = baseDir + '/accounts/.grayscale'
+    if not os.path.isfile(grayscaleFilename):
+        with open(grayscaleFilename, 'w') as grayfile:
+            grayfile.write(' ')
+
+
+def disableGrayscale(baseDir: str) -> None:
+    """Disables grayscale for the current theme
+    """
+    themeFiles = ('epicyon.css', 'login.css', 'follow.css',
+                  'suspended.css', 'calendar.css', 'blog.css')
+    for filename in themeFiles:
+        templateFilename = baseDir + '/' + filename
+        if not os.path.isfile(templateFilename):
+            continue
+        with open(templateFilename, 'r') as cssfile:
+            css = cssfile.read()
+            if 'grayscale' in css:
+                css = \
+                    css.replace('\n    filter: grayscale(100%);', '')
+                filename = baseDir + '/' + filename
+                with open(filename, 'w') as cssfile:
+                    cssfile.write(css)
+    grayscaleFilename = baseDir + '/accounts/.grayscale'
+    if os.path.isfile(grayscaleFilename):
+        os.remove(grayscaleFilename)
 
 
 def setCustomFont(baseDir: str):
@@ -163,21 +191,6 @@ def setCustomFont(baseDir: str):
                 cssfile.write(css)
 
 
-def enableGrayscale(baseDir: str):
-    setSingleThemeParam(baseDir, 'grayscale', '100%')
-    grayscaleFilename = baseDir + '/accounts/.grayscale'
-    if not os.path.isfile(grayscaleFilename):
-        with open(grayscaleFilename, 'w') as grayfile:
-            grayfile.write(' ')
-
-
-def disableGrayscale(baseDir: str):
-    setSingleThemeParam(baseDir, 'grayscale', '0%')
-    grayscaleFilename = baseDir + '/accounts/.grayscale'
-    if os.path.isfile(grayscaleFilename):
-        os.remove(grayscaleFilename)
-
-
 def setThemeDefault(baseDir: str):
     removeTheme(baseDir)
     setThemeInConfig(baseDir, 'default')