Giters

ronilaukkarinen / mastodon-bird-ui

🐘🐦 Mastodon web UI, but strongly inspired by Twitter.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

issues with light theme (and maybe contrast, too?)

trendless opened this issue · comments

commented

While the dark version of the theme works perfectly, It doesn't seem the light theme (and possibly contrast too, not sure what I should look for to identify whether it's working or not) are; the preferences section goes light when 'light' is selected in 'preferences', but once I go back to the main feed etc, it's dark again as if I picked the dark version.

I'm still running 4.1.x. This has been an issue for a while. I've been running the 1.6.4 stable branch, but today along with the update to 4.1.8, I updated to birdui 1.7.5rc3. Same result.

(I've swapped in "elephant" for "mastodon-bird-ui")

/.../live/app/javascript/styles/elephant-light.scss 👇

@import 'application';
@import 'mastodon-light/diff';
@import 'elephant/layout-single-column.scss';
@import 'elephant/layout-multiple-columns.scss';

/.../live/config/themes.yml 👇

contrast: styles/contrast.scss
mastodon-light: styles/mastodon-light.scss
elephant: styles/elephant.scss
elephant-contrast: styles/elephant-contrast.scss
elephant-light: styles/elephant-light.scss

/.../live/config/locales/en.yml 👇

 themes:
    contrast: Mastodon (High contrast)
    default: Mastodon (Dark)
    mastodon-light: Mastodon (Light)
    elephant: Elephant
    elephant-contrast: Elephant (High contrast)
    elephant-light: Elephant (Light)
 ...

I feel like I must be missing something obvious, but I can't figure out what. This isn't a priority issue on my part, but I searched around and couldn't find anyone referencing similar.

Thanks for all your time+effort building+maintain this great theme!

commented

Check the body class, what does it say? There should be like <body class='app-body theme-elephant-light no-reduce-motion'>, that theme- is the class you need. Then check your elephant-light.scss and see if there is that same class. Something obviously wrong in how you implemented this.

You should follow this tutorial or stux's.

This is kinda not Mastodon Bird UI issue itself so going to close the issue. But please if you still have a problem with it, do ask more questions.

commented

Thanks for the tips! I definitely assume it's something I've done wrong, but other than adding as the secondary option instead of default and using the name 'elephant' instead of 'mastodon-bird-ui' for files/directories, I followed the instructions here. I didn't make any edits to the css files from this repo. It's weird that the dark version works and the light version works in 'preferences' but not elsewhere.

I did:

# Create a new folder for the theme
mkdir -p app/javascript/styles/elephant

# Download the CSS file for single column layout
wget https://raw.githubusercontent.com/ronilaukkarinen/mastodon-bird-ui/main/layout-single-column.css -O app/javascript/styles/elephant/layout-single-column.scss

# Download the CSS file for multiple column layout
wget https://raw.githubusercontent.com/ronilaukkarinen/mastodon-bird-ui/main/layout-multiple-columns.css -O app/javascript/styles/elephant/layout-multiple-columns.scss

and then this:

# Create high contrast theme file
echo -e "@import 'contrast/variables';\n@import 'application';\n@import 'contrast/diff';\n@import 'elephant/layout-single-column.scss';\n@import 'elephant/layout-multiple-columns.scss';" > app/javascript/styles/elephant-contrast.scss

# Create light theme file
echo -e "@import 'mastodon-light/variables';\n@import 'application';\n@import 'mastodon-light/diff';\n@import 'elephant/layout-single-column.scss';\n@import 'elephant/layout-multiple-columns.scss';" > app/javascript/styles/elephant.scss

# Create dark theme file
echo -e "@import 'application';\n@import 'elephant/layout-single-column.scss';\n@import 'elephant/layout-multiple-columns.scss';" > app/javascript/styles/elephant.scss

# Insert into themes.yml
sed -i '/mastodon-light: styles\/mastodon-light.scss/a\elephant: styles\/elephant.scss\n\elephant-contrast: styles\/elephant-contrast.scss\n\elephant-light: styles\/elephant-light.scss' /home/mastodon/live/config/themes.yml

# Insert into en.yml
sed -i '/mastodon-light: Mastodon (Light)/a\    elephant: Elephant\n    elephant-contrast: Elephant (High contrast)\n    elephant-light: Elephant (Light)' /home/mastodon/live/config/locales/en.yml

This is the browser inspect:
image

...it seems to be looking for theme-elephant-light

/.../live/app/javascript/styles/elephant-light.scss 👇

@import 'mastodon-light/variables';
@import 'application';
@import 'mastodon-light/diff';
@import 'elephant/layout-single-column.scss';
@import 'elephant/layout-multiple-columns.scss';

/.../live/config/themes.yml 👇

default: styles/application.scss
contrast: styles/contrast.scss
mastodon-light: styles/mastodon-light.scss
elephant: styles/elephant.scss
elephant-contrast: styles/elephant-contrast.scss
elephant-light: styles/elephant-light.scss
commented

I just noticed one difference between your and Stux's layout-single-column.css file: on his line 157 and 177, he's inserted 'elephant-' instead of referencing the default mastodon filenames.

Maybe this matters if bird-ui isn't set as the default theme?

EDIT** yep, changing your line 176 to body.theme-elephant-contrast.layout-single-column { and 208 to body.theme-elephant-light.layout-single-column { makes the light and contrast themes work as expected.

commented

THANK YOU @trendless

I have been scratching my head about this one off and on for weeks, so the point where I was about ready to just yank the light and high contrast themes out. I don't rename the actual files to Elephant, but I don't deploy them as the default, and I couldn't figure out why only the dark one ever worked correctly.

It's not a huge issue to modify them after downloading, I have it scripted now, but if @ronilaukkarinen wanted to make this not a thing that would be great. 😉

commented

Welcome!

Looks like lines 163 and 184 are the ones that need to be edited in layout-multiple-columns.scss for the Advanced UI light and contrast themes to work, too.

commented

The renaming has already been documented in: Make Mastodon Bird UI as optional by integrating it as 'Site theme' in settings for all users.

I always use this to upgrade my theme to my instance (Linux):

# Move to the folder where you have Mastodon installed
cd $HOME/live

# Download the CSS file for single column layout
wget --no-check-certificate --no-cache --no-cookies https://raw.githubusercontent.com/ronilaukkarinen/mastodon-bird-ui/main/layout-single-column.css -O app/javascript/styles/mastodon-bird-ui/layout-single-column.scss

# Download the CSS file for multiple column layout
wget --no-check-certificate --no-cache --no-cookies https://raw.githubusercontent.com/ronilaukkarinen/mastodon-bird-ui/main/layout-multiple-columns.css -O app/javascript/styles/mastodon-bird-ui/layout-multiple-columns.scss

# Replace theme-contrast with theme-mastodon-bird-ui-contrast for single column layout
sed -i 's/theme-contrast/theme-mastodon-bird-ui-contrast/g' app/javascript/styles/mastodon-bird-ui/layout-single-column.scss

# Replace theme-mastodon-light with theme-mastodon-bird-ui-light for single column layout
sed -i 's/.theme-mastodon-light/[class\*='\''theme-mastodon-bird-ui-light'\'']/g' app/javascript/styles/mastodon-bird-ui/layout-single-column.scss

# Replace theme-contrast with theme-mastodon-bird-ui-contrast for multiple column layout
sed -i 's/theme-contrast/theme-mastodon-bird-ui-contrast/g' app/javascript/styles/mastodon-bird-ui/layout-multiple-columns.scss

# Replace theme-mastodon-light with theme-mastodon-bird-ui-light for multiple column layout
sed -i 's/.theme-mastodon-light/[class\*='\''theme-mastodon-bird-ui-light'\'']/g'  app/javascript/styles/mastodon-bird-ui/layout-multiple-columns.scss

For Mac (as sed is a bit different there):

# Move to the folder where you have Mastodon installed
cd $HOME/live

# Download the CSS file for single column layout
wget --no-check-certificate --no-cache --no-cookies https://raw.githubusercontent.com/ronilaukkarinen/mastodon-bird-ui/main/layout-single-column.css -O app/javascript/styles/mastodon-bird-ui/layout-single-column.scss

# Download the CSS file for multiple column layout
wget --no-check-certificate --no-cache --no-cookies https://raw.githubusercontent.com/ronilaukkarinen/mastodon-bird-ui/main/layout-multiple-columns.css -O app/javascript/styles/mastodon-bird-ui/layout-multiple-columns.scss

# Replace theme-contrast with theme-mastodon-bird-ui-contrast for single column layout
sed -i'.bak' -e 's/theme-contrast/theme-mastodon-bird-ui-contrast/g' app/javascript/styles/mastodon-bird-ui/layout-single-column.scss

# Replace theme-mastodon-light with theme-mastodon-bird-ui-light for single column layout
sed -i'.bak' -e 's/.theme-mastodon-light/[class\*='\''theme-mastodon-bird-ui-light'\'']/g' app/javascript/styles/mastodon-bird-ui/layout-single-column.scss

# Replace theme-contrast with theme-mastodon-bird-ui-contrast for multiple column layout
sed -i'.bak' -e 's/theme-contrast/theme-mastodon-bird-ui-contrast/g' app/javascript/styles/mastodon-bird-ui/layout-multiple-columns.scss

# Replace theme-mastodon-light with theme-mastodon-bird-ui-light for multiple column layout
sed -i'.bak' -e 's/.theme-mastodon-light/[class\*='\''theme-mastodon-bird-ui-light'\'']/g'  app/javascript/styles/mastodon-bird-ui/layout-multiple-columns.scss

rm app/javascript/styles/mastodon-bird-ui/layout-multiple-columns.scss.bak
rm app/javascript/styles/mastodon-bird-ui/layout-single-column.scss.bak
commented