Unable to set theming

loke commented

2020-07-17 08:45:18 +00:00

Member

It is not possible to switch Mastodon FE to light theme.

Steps to reproduce:

Select Mastodon FE
Click on the settings button
Click on User Preferences

This sends you back to the Pleroma FE preferences screen so there is no way to set the theme for Mastodon FE. This is a problem for people like myself whose bad astigmatism makes it impossible to use UI's with dark backgrounds.

It is not possible to switch Mastodon FE to light theme. Steps to reproduce: 1. Select Mastodon FE 2. Click on the settings button 3. Click on User Preferences This sends you back to the Pleroma FE preferences screen so there is no way to set the theme for Mastodon FE. This is a problem for people like myself whose bad astigmatism makes it impossible to use UI's with dark backgrounds.

lanodan commented

2020-07-17 17:00:43 +00:00

Owner

Yes, this feature is unsupported right now, in Mastodon this is into the backend settings.

loke commented

2020-07-17 17:07:54 +00:00

Author

Member

Thank you you for the information. Is there a way to force a specific theme, perhaps from the server side?

Also, is there a plan to support this at some point?

Thank you you for the information. Is there a way to force a specific theme, perhaps from the server side? Also, is there a plan to support this at some point?

lanodan commented

2020-07-17 17:31:18 +00:00

Owner

There is a way but it's via patching the backend, not exactly something great.

contrast theme:

diff --git a/lib/pleroma/web/templates/masto_fe/index.html.eex b/lib/pleroma/web/templates/masto_fe/index.html.eex
index c330960fa..50da651b0 100644
--- a/lib/pleroma/web/templates/masto_fe/index.html.eex
+++ b/lib/pleroma/web/templates/masto_fe/index.html.eex
@@ -25,10 +25,11 @@

 <script src="/packs/flavours/glitch/common.js"></script>
 <link rel="stylesheet" media="all" href="/packs/flavours/glitch/common.css" />
+<link rel="stylesheet" media="all" href="/packs/skins/glitch/contrast/common.css" />

 <script src="/packs/flavours/glitch/home.js"></script>
 </head>
-<body class='app-body no-reduce-motion system-font'>
+<body class='app-body no-reduce-motion system-font skin-constrast'>
   <div class='app-holder' data-props='{&quot;locale&quot;:&quot;en&quot;}' id='mastodon'>
   </div>
 </body>

light theme:

diff --git a/lib/pleroma/web/templates/masto_fe/index.html.eex b/lib/pleroma/web/templates/masto_fe/index.html.eex
index c330960fa..5c8217162 100644
--- a/lib/pleroma/web/templates/masto_fe/index.html.eex
+++ b/lib/pleroma/web/templates/masto_fe/index.html.eex
@@ -25,10 +25,11 @@

 <script src="/packs/flavours/glitch/common.js"></script>
 <link rel="stylesheet" media="all" href="/packs/flavours/glitch/common.css" />
+<link rel="stylesheet" media="all" href="/packs/skins/glitch/mastodon-light/common.css" />

 <script src="/packs/flavours/glitch/home.js"></script>
 </head>
-<body class='app-body no-reduce-motion system-font'>
+<body class='app-body no-reduce-motion system-font skin-mastodon-light'>
   <div class='app-holder' data-props='{&quot;locale&quot;:&quot;en&quot;}' id='mastodon'>
   </div>
 </body>

There is a way but it's via patching the backend, not exactly something great. contrast theme: ```diff diff --git a/lib/pleroma/web/templates/masto_fe/index.html.eex b/lib/pleroma/web/templates/masto_fe/index.html.eex index c330960fa..50da651b0 100644 --- a/lib/pleroma/web/templates/masto_fe/index.html.eex +++ b/lib/pleroma/web/templates/masto_fe/index.html.eex @@ -25,10 +25,11 @@ <script src="/packs/flavours/glitch/common.js"></script> <link rel="stylesheet" media="all" href="/packs/flavours/glitch/common.css" /> +<link rel="stylesheet" media="all" href="/packs/skins/glitch/contrast/common.css" /> <script src="/packs/flavours/glitch/home.js"></script> </head> -<body class='app-body no-reduce-motion system-font'> +<body class='app-body no-reduce-motion system-font skin-constrast'> <div class='app-holder' data-props='{"locale":"en"}' id='mastodon'> </div> </body> ``` light theme: ```diff diff --git a/lib/pleroma/web/templates/masto_fe/index.html.eex b/lib/pleroma/web/templates/masto_fe/index.html.eex index c330960fa..5c8217162 100644 --- a/lib/pleroma/web/templates/masto_fe/index.html.eex +++ b/lib/pleroma/web/templates/masto_fe/index.html.eex @@ -25,10 +25,11 @@ <script src="/packs/flavours/glitch/common.js"></script> <link rel="stylesheet" media="all" href="/packs/flavours/glitch/common.css" /> +<link rel="stylesheet" media="all" href="/packs/skins/glitch/mastodon-light/common.css" /> <script src="/packs/flavours/glitch/home.js"></script> </head> -<body class='app-body no-reduce-motion system-font'> +<body class='app-body no-reduce-motion system-font skin-mastodon-light'> <div class='app-holder' data-props='{"locale":"en"}' id='mastodon'> </div> </body> ```

lanodan commented

2020-07-17 17:32:53 +00:00

Owner

And for the support side of things, I'll give it a shot at having the settings in MastoFE but no promises there as I'm not a React frontend developer at all.

loke commented

2020-07-18 05:43:34 +00:00

Author

Member

Thank you very much for the update. It was very enlightening.

cesese commented

2020-07-30 09:58:28 +00:00

Member

If you want a temporary solution I made this userscript https://github.com/Cesese/UserScripts-cesese/blob/master/mastofe-light-theme.js

you can use it with tampermonkey and other such browser extensions, you just need to change the instance name to yours in the 6th line

I didn't know about the contrast theme and about the .eex file and body class, so it just changes the css, but I didn't see anything that looked weird.

To change it to contrast theme, you just need to replace /packs/skins/glitch/mastodon-light/common.css by /packs/skins/glitch/contrast/common.css in the 20th line.

If you want a temporary solution I made this userscript https://github.com/Cesese/UserScripts-cesese/blob/master/mastofe-light-theme.js you can use it with tampermonkey and other such browser extensions, you just need to change the instance name to yours in the 6th line I didn't know about the contrast theme and about the .eex file and body class, so it just changes the css, but I didn't see anything that looked weird. To change it to contrast theme, you just need to replace `/packs/skins/glitch/mastodon-light/common.css` by `/packs/skins/glitch/contrast/common.css` in the 20th line.

Rows
Columns

Unable to set theming #84