LemmyTools 0.1.1 - GreaseMonkey Addon Script

Current Features:

• Adds “Easy Subscribe” button to remote instance communities.
• Adds a collapsible sidebar on the side of screen that shows a searchable list of your subscribed communities.
• Adds link back to home instance and a community browser.
• (new) - Adds an options menu to configure LemmyTools settings.

Upcoming features:

• When off site collect a list of communities and display in sidebar for easy subscription.
• Create sub communities grouping function.
• Create remote instance search of communities and integrate with easy subscribe method.
• Create addon for firefox/chrome.

Installation and Configuration:

1 - Browser must have Greasemonkey addon (You could use another JS injector app for the .js). Tested with Greasemonkey.

2 - Download either the .JS file or install from greasyfork.

3 - Set home lemmy instance via options page once script is loaded

This script is all done by a complete amateur for fun. Enjoy and feel free to fork it!

Get it here: Github or GreasyFork

Please submit issues to the github for feature requests and problems: Github LemmyTools Issues

ChangeLog: 0.1.1 - Updated added settings menu, fixed new compatibility changes with lemmy 0.18. 0.1a - Initial Release

Next up is to actually rewrite post links, which is probably the most interesting feature.

0.18 is now officially available. I expect it will be a few days as instance owners test the upgrade and decide whether or not to switch over. Especially since the captcha fix isn't coming until 0.18.1.

Relevant to this community is the fact that this upgrade includes two different PR's (1, 2) that add a number of semantic classes and ID's to the markup to aid in the creation of custom themes, userscripts, and browser extensions. Additionally the UI has been upgraded to use Bootstrap 5.

However it should be noted that Desallines has explicitly stated that there is no official support for anything utilizing these classes, and that the UI framework is going to be changed in a future update.

This means you're targeting these classes/ID's at your own peril, and they may break in a future update. They want to keep theming as light as possible rather than adding lots of custom hooks that people will then become dependent on and expect ongoing maintenance/support.

Requires: greasemonkey/tampermonkey/other script injector.

If your home instance is federated with instances you don't want to see, you can use this script to remove all posts and comments from that instance without having to block communities individually.

Example:

Line 17: const blockedInstances = ["example.ml","lemmy.world"];

Will block:

[email protected] posts to [email protected]

[email protected] posts to [email protected]

[email protected] comments on any post

Usage:

Edit the comma-seperated list on line 17 to the instances you wish to block. Add new ones inside quotes following a comma. Do not include https:// or trailing forward slashes in the instance text.

Description

Lemmy Universal Link Switcher, or LULs for short, scans all links on all websites, and if any link points to a Lemmy instance that is not your main/home instance, it rewrites the link so that it instead points to your main instance. Currently only works for community/user links.

Home Instance Setup

Simply visit the Lemmy instance you want to set as your home while the script is active. You will be asked if you want to set this instance to your home instance:

If you initially set your home instance wrong or just want to change it, no worries - simply go to your settings on your new home instance and press the button for it!

Features

• Rewrite all links of communities or users on all websites everywhere to your new instance! The rewritten links will have an icon next to it, and hovering/touching the icon will show you the original link, allowing you to go there if you want to.
  

• If you are already on a page that has a corresponding page on your home instance, a link will automatically be added to the page header.
  

Coming soon

• Post & comment links. Those are a bit harder because the URL has to be requested from the instances.

Repository & Issues

I put this together based on another very similar script (attributed, of course) I found on beehaw that forces external links to open in a new tab. Should work on every Lemmy instance by checking the header. While it uses http*://*/* as the match, it only executes any logic if the isLemmy check returns true.

Honestly, this has improved my desktop experience significantly, it was killing me before.

Hope it helps, feedback/suggestions/contributions welcome!

git link: https://github.com/Djones4822/GM-Lemmy-newTab

This is currently a work in progress, but I've been using it for a little while now and I thought I'd upload it for anyone who wants to take a look.

Up for discussion:

The userscript I (and others) have written seems to be fairly popular among people who have found it. I've had several requests to turn it into a Lemmy theme, but I have been hesitant to do so. Partly because I lack the skill to do it, and partly because it isn’t really a “theme” as such. It doesn’t change the colors or do some of the things a theme typically does. In truth, the script is actually (essentially) theme agnostic - I use it with darkly, but it works with all of the other Lemmy themes without issue (hopefully).

I have no qualms with someone helping turn the CSS stuff into a Lemmy theme (or just taking the bull by the horns and doing it) , but with the changes coming in v.0.18 it may be better to wait.

Anyone have any thoughts? Is this script even appropriate for a Lemmy theme?

Hey folks! I hope you're having a lovely day. I was using the "Lemmings fix" by @[email protected] for a while now and have been improving it to tailor my needs.

This one

• works even when browsing remote instances on remote instances
• adds the redirect button to the "sidebar"/community card
• works on mobile, too

Here are a couple of screenshots:

Here's the code (modify localLemmy before using):

// ==UserScript==
// @name         Lemmings Fix
// @version      1.1
// @description  Redirect to your local Lemmy instance
// @author       @lemmy.world/u/soy, @lemmy.world/u/fperson
// @match        https://*/c/*
// @icon         https://join-lemmy.org/static/assets/icons/favicon.svg
// ==/UserScript==

(function () {
  'use strict';

  const localLemmy = 'lemmy.world';
  const isLemmy = document.head.querySelector('[name~=Description][content]').content === 'Lemmy';

  if (!isLemmy) {
    return;
  }

  // Get URL info
  const splitUrl = location.href.split('/');
  const instanceUrl = splitUrl[2];
  const community = splitUrl[4];
  let localizedUrl = `https://${localLemmy}/c/${community}`;
  if (!community.includes('@')) {
    localizedUrl = `${localizedUrl}@${instanceUrl}`;
  }

  // Create redirect button if not on local
  if (instanceUrl !== localLemmy) {
    var zNode = document.createElement('a'); // create anchor tag
    zNode.href = localizedUrl; // set the href
    zNode.textContent = `Open in ${localLemmy}`; // set the text
    zNode.id = 'localizeContainer'; // set the id
    // update styles for a more modern look
    zNode.style = `
          display: inline-block;
          cursor: pointer;
          padding: 5px 20px;
          background-color: #007BFF;
          color: #FFF;
          text-decoration: none;
          border-radius: 5px;
          border: none;
          box-shadow: 0 2px 5px rgba(0,0,0,0.15);
          font-size: 1rem;
          font-weight: bold;
          transition: background-color 0.3s ease;
          top: 5rem;
          right: 1rem;
          z-index: 1000;
          `;
    zNode.addEventListener('mouseenter', function () {
      this.style.backgroundColor = '#0056b3';
    });
    zNode.addEventListener('mouseleave', function () {
      this.style.backgroundColor = '#007BFF';
    });

    function addButtonIfNotPresent(node) {
      const link = node.querySelector('a[href*="/create_post"]');
      if (link && !link.parentNode.querySelector('#localizeContainer')) {
        var zNode = document.createElement('a');
        zNode.href = localizedUrl;
        zNode.textContent = `Open in ${localLemmy}`;
        zNode.id = 'localizeContainer';
        zNode.style = `
    display: inline-block;
    cursor: pointer;
    padding: 5px 20px;
    background-color: #007BFF;
    color: #FFF;
    text-decoration: none;
    border-radius: 5px;
    border: none;
    box-shadow: 0 2px 5px rgba(0,0,0,0.15);
    font-size: 1rem;
    font-weight: bold;
    transition: background-color 0.3s ease;
    top: 5rem;
    right: 1rem;
    z-index: 1000;
  `;
        zNode.addEventListener('mouseenter', function () {
          this.style.backgroundColor = '#0056b3';
        });
        zNode.addEventListener('mouseleave', function () {
          this.style.backgroundColor = '#007BFF';
        });

        link.parentNode.appendChild(zNode);
      }
    }

    const observer = new MutationObserver(function (mutationsList, observer) {
      for (let mutation of mutationsList) {
        if (mutation.type === 'childList') {
          mutation.addedNodes.forEach((node) => {
            if (node.nodeType === 1) {
              addButtonIfNotPresent(node);
            }
          });
        }
      }
    });

    // Options for the observer (which mutations to observe)
    const config = { childList: true, subtree: true };

    // Target node to observe
    const targetNode = document.body;

    // Start observing the target node for configured mutations
    observer.observe(targetNode, config);

    // Run initial check
    document.querySelectorAll('.card-body').forEach(addButtonIfNotPresent);
  }
})();

Target Instance should be adjusted as needed.

Similar to this one: https://feddit.de/post/822722 which I didn't know about 20 minutes ago before being linked to this community.

Additional support for the Community Browser of feddit.de to make the process easier

I came across this one on userstyles.world and didn't see it referenced here. It's probably the most 'old reddit' looking of all of the one's I've seen so far.

There have been a number of ongoing conversations and PR's around trying to add semantics to the lemmy-ui markup to enable developers to more easily create custom themes, userscripts, and browser extensions.

Up until now we've had no input from a maintainer, as they are rightfully heads down focused on shipping the 0.18 update. We now have direction on where we should be focusing our effort and to what extent the project will offer support for this:

...I'm fine with adding something like this, with the very bold caveat that we as maintainers will not do custom theme support, and if class names change, and themes break, that is up to themers, not us. I've had to close so many issues on this repo for people asking me to do theming support for them, which I don't have time to do.

This is great news for anyone who has been struggling with incredibly deep class selectors and general lack of specificity. There is further mention of switching UI frameworks in the future, so do expect that whatever you build today may break tomorrow. We're still in the very early days of the Lemmy maturity lifecycle, but it's encouraging to receive acknowledgement for this effort.

Relevant links to the various efforts in addition to the post link:

• jsit's proof of concept for classes

• My PR to add classes and ID's (merged)

• djv's thread that started their (post linked) PR

• A thread from 2022 where Dessalines laid out their original motivations for resisting custom classes

It's just a few small tweaks to some things and some colour changes. It's light-mode only. It looks best if you use the "litely" or "litely compact" themes in your Lemmy settings.

I updated it to work better with the new version of Lemmy.

cross-posted from: https://lemmy.world/post/258279

Reddit refugee here.

I have really started to like Lemmy and love the fact that it's free and open source, but I wasn't feeling so home with the UI, so I found nice looking style from https://userstyles.world/style/10345/lemmy-world but I personally prefer dark theme so I adjusted some colours and made the radiuses and margins bigger. I thought that maybe someone will find this useful and hence I decided to post it here. I am not a professional programmer, just a guy who likes to tinker with computers so this style may not be perfect. Critique, feedback and suggestions are welcome.

Edit: The colors are from reddit and if you want the colors to look more like the original lemmy, change the bg primary and default to hex #303030 and #222222. I really like this color scheme too

--bg-primary: #303030;
--bg-default: #222222;

Edit2: I have now made some small adjustments using the feedback and suggestion I got from you. I'm really grateful for the feedback :)

I also have now two styles, which have slightly different color scheme https://userstyles.world/user/VILPAUTOEE

Keep the feedback coming ;D Thx

Adding new communities is a bit of a pain due to having to copy and paste the links into the search page.

I was thinking it would be much easier if one could have a button on lemmyverse.net or browse.feddit.de next to the name of the community to open the community in your instance's search page.

Example url:

[email protected] would open up in:

https://user.instance/search/q/!community%40instance.domain/type/All/sort/TopAll/listing_type/All/community_id/0/creator_id/0/page/1

Where user.instance is a variable that every user can fill in themselves in the script or in some other way.

I hope this is possible. Thank you <3

If you try to access a community on your local instance and it gives you a 404, this automatically takes you to your local instance's search instead and puts the community in for you.

Recommended to use with https://sh.itjust.works/post/33762](local instance redirect script) by @[email protected]

I started using Tampermonkey today, so dunno if this works with GreaseMonkey, but I assume it does.

// ==UserScript==
// @name         Lemmings Redirect
// @version      1.0
// @description  Redirect to your local Lemmy instance
// @author       @reddthat.com/u/Fanghole
// @match        https://*/c/*@*
// @icon         https://join-lemmy.org/static/assets/icons/favicon.svg
// ==/UserScript==

var unknownLemmy =
  document.body.textContent === "404: couldnt_find_community";

if (unknownLemmy) {
    // Get URL info
    var splitUrl = location.href.split("/");
    var split2 = splitUrl[4].split("@");
    var instanceUrl = split2[1];
    var community = split2[0];
    var searchUrl =
        "https://" + splitUrl[2] + "/search/q/!" + community + "%40" + instanceUrl + "/type/All/sort/TopAll/listing_type/All/community_id/0/creator_id/0/page/1";

    window.location.replace(searchUrl);
}

Title.

Would be awesome if we could collectively work on a script that would contain all the good features.

This is my first userscript. Hope you guys like it!

Thanks for using my script. I will keep this thread updated with all the changes. Just look at the changelog.

If you have any tips on features and/or improvements then leave a comment and I'll take a look!

Changelog:

Version 0.4

Removed bold as default...

Version 0.3

Added separators and colors codes for every link. Now you can edit the TextColor when you add a new custom link

{ title: 'Plugins', url: 'https://lemmy.world/c/[email protected]', textColor: "#000000" }

Feel free to add or remove the separators as well

{ title: '|', url: '#', textColor: "#000000" }

Also added an option to change font weight:

link.style.fontWeight = "bold" = Bold

link.style.fontWeight = "" = Regular

Version 0.2

Some code update...

Version 0.1

Just replace the titles and urls with your own links after you install the script

update: March 07, 2024: this is not the first time i updated this style, but i just came back to Lemmy from a pretty long break, and i noticed a couple things were broken and since "Browser Default" still isn't automatically changing my theme with my system theme, i decided to go ahead and update it. this style now works regardless of whether you have a light theme or a dark theme selected in your settings, and i fixed all the broken stuff that i noticed

https://userstyles.world/style/10392/skys-lemmy-tweaks

original post:

i personally sometimes found it a little hard to visually distinguish between comments in really long threads so i made this simple userstyle that remedies the problem for me by adding a semi-transparent background to comments.

you can use this css with a browser extenion like Stylus (officially supports Chrome and Firefoxx and can be installed on most popular Chromium-based browsers including Edge, Vivaldi, and Opera) once you have Stylus installed you can go here and click the "install" button to automate the installation of my css. otherwise you can copy the css below and paste it into a new style in Stylus

my instance also doesn't automatically change light/dark theme based on browser/system preferences (i'm under the impression some other instances can do that) so this userstyle also changes to light or dark theme based on system preference, it's made to override Lemmy light themes so you'll have to manually apply a light theme in your Lemmy settings for the color switching to work properly (the comment contrast feature should work either way, though.)

the css should work for all instances of Lemmy, but i didn't add the url for all instaces cuz of i was lazy. i did add a few of the most popular instances and the instance i use, though. if you want you can ask me to add your instance and i will, or you can just add it yourself in Stylus.

ok thx bai

/* ==UserStyle==
@name         sky's lemmy tweaks
@version      2023.06.16.04
@namespace    userstyles.world/user/skylestia
@description  some simple tweaks to lemmy that might make comments easier to read for some ppl & automatically changes colors to match system color preferences
@author       skylestia
@license      No License

Last Update:
***
fixed code blocks being unreadable in dark mode
***
fixed hrs being invisible in dark mode
***
increased padding on "content divs" (posts and sidebars)
***
made base dark mode background color slightly lighter
***
fix text in input fields being too low contrast in dark mode
***
fix focused input fields being too bright in dark mode

==/UserStyle== */

@-moz-document domain("lemmy.blahaj.zone"), domain("lemmy.ml"), domain("lemmy.world"), domain("beehaw.org"), domain("lemmy.one"), domain("feddit.de"), domain("lemmy.ca"), domain("lemmygrad.ml") {
/* this css will automatically adjust Lemmy's color theme to match your system color theme */

/* this mod currently assumes you're using a light theme in your Lemmy settings
 * so it may not work correctly if you set a dark theme in Lemmy settings
 * set a light hteme before applying this mod for best results
*/

/* palette */
:root {
    /* dark theme colors */
    --bg-base-dark: #1e1e21;
    --bg-commentTree-dark: #8585850f;
    --bg-highlightedComments-dark: #ffa8001a;
    --bg-contentDivs-dark: black;
    --bg-code-dark: #262729;
    --fg-base-dark: #cdd1d8;
    --fg-links-dark: #98d6ff;
    --borders-dark: #2b383f;
    /* light theme colors */
    --bg-commentTree-light: #999d9d0f;
    --bg-highlightedComments-light: #ffa80029;
}

/* layout and functionality tweaks */

.card,.card-body {padding: 1em;}
.col-12.col-md-8.mb-3 .post-listing .col-12.card.my-2.p-2 > div {
    padding: 1em 2em !important;
}
.comment {
    padding: 0 2em 0 0;
    border-radius: 1em;
}
.mark,mark {border-radius: 20px;}
.comment:not(.ml-1) {
    margin-top: 20px;
    padding: 0 2em;
}
.comment .ml-1,.comment .mx-1 {
    margin-left: 1em !important;
}
pre {
    padding: 1em 2em;
    border-radius: 1em;
}

/* colors */

@media (prefers-color-scheme: dark) {
    body {
        color: var(--fg-base-dark);
        background-color: var(--bg-base-dark);
    }
    .h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6,
    .navbar-light .navbar-brand,.text-body,
    .navbar-light .navbar-nav .nav-link,pre {
        color: var(--fg-base-dark) !important;
    }
    .bg-light {background-color: black !important;}
    .card,.card-body {
        color: var(--fg-base-dark);
        background-color: var(--bg-contentDivs-dark);
    }
    .form-control {
        color: var(--fg-base-dark);
        background-color: black;
        border: none;
    }
    .form-control:focus {
        color: var(--fg-base-dark);
        background-color: var(--bg-code-dark);
    }
    .comment {
        background-color: var(--bg-commentTree-dark);
    }
    .mark,mark {background-color: var(--bg-highlightedComments-dark);}
    .border-light {
        border-color: var(--borders-dark) !important;
    }
    .border-secondary {border: none;}
    .text-info {color: var(--fg-links-dark) !important;}
    hr {border-color: var(--borders-dark);}
    pre {background-color: var(--bg-code-dark);}
}
@media (prefers-color-scheme: light) {
    .comment {
        background-color: var(--bg-commentTree-light);
    }
    .mark,mark {background-color: var(--bg-highlightedComments-light);}
}
}

A good chunk of this was borrowed from another thread by @[email protected] at https://sh.itjust.works/post/70273 but I've also added:

• clickable comment headers
• big friendly up/down vote buttons for posts
• rearranged comment up/down vote buttons and More button to shift things to be more visually pleasing (to me anyway)

Notably for this community is the inclusion of the "lemmy-site" class on the #app div

similar to the kbin userscript I made this colorizes posts and comments by origin. kbin users/posts are dark blue, Beehaw (and any other restrictive moderation sites in the future) are red, local is left unchanged.

author:

• https://masto.ai/@teacherbuknoy
• @[email protected]

Preview:

• Style: https://userstyles.world/style/10345/lemmy-world
• Source: https://masto.ai/@teacherbuknoy/110543779636316075