13 votes

I feel it would be convenient to make theme changing faster

If I'm the weirdo in the minority here, feel free to let me know, but I ideally switch between day and night modes almost daily on my websites and apps based on time of day. Here, it's usually between the White and Black settings. And while it's not a big problem by any means, navigating between 3 different pages (the homepage, my user page, then settings) is a tiny hassle that I feel could be avoided by placing the theme switching option on the homepage. I don't know if my usage of themes is normal or an abnormality, so I understand if putting it directly on the homepage isn't ideal if most users don't switch themes constantly. It would still be a fair bit faster if it were to be placed on the profile page somewhat similar to Reddit or YouTube (I'm not talking about the overlay, just moving the switcher from settings to maybe part of the User Menu).

I have noticed that most apps with a dark mode tend to bury it in settings, clearly indicating that it's designed to be a one time change, so again, maybe this is just a me problem, but I am curious on how others feel about a more easily on hand theme option.

15 comments

  1. [7]
    balooga (edited ) Link
    These bookmarklets will set the theme and then load the homepage. You can bookmark them and use them as you like (though they may not work as intended when opening into a new tab). EDIT: I'm...

    These bookmarklets will set the theme and then load the homepage. You can bookmark them and use them as you like (though they may not work as intended when opening into a new tab).

    EDIT: I'm having trouble with the link formatting so I'm just printing them here. You can copy-paste the code into your bookmark manager as if it's a URL.

    • White:
      javascript:(function() { document.cookie = "theme=white;path=%2F;domain=tildes.net;secure";document.location='https://tildes.net';})()
    • Solarized Light:
      javascript:(function() { document.cookie = "theme=light;path=%2F;domain=tildes.net;secure";document.location='https://tildes.net';})()
    • Solarized Dark:
      javascript:(function() { document.cookie = "theme=dark;path=%2F;domain=tildes.net;secure";document.location='https://tildes.net';})()
    • Dracula:
      javascript:(function() { document.cookie = "theme=dracula;path=%2F;domain=tildes.net;secure";document.location='https://tildes.net';})()
    • Atom One Dark:
      javascript:(function() { document.cookie = "theme=atom-one-dark;path=%2F;domain=tildes.net;secure";document.location='https://tildes.net';})()
    • Black:
      javascript:(function() { document.cookie = "theme=black;path=%2F;domain=tildes.net;secure";document.location='https://tildes.net';})()

    With a little more effort two bookmarklets could be combined into one that toggles between the two themes you want.

    11 votes
    1. deknalis Link Parent
      This is perfect for my desktop use, thanks!

      This is perfect for my desktop use, thanks!

      4 votes
    2. [4]
      meghan Link Parent
      just a heads up, instead of document.location= you should use location.assign()

      just a heads up, instead of document.location= you should use location.assign()

      4 votes
      1. [3]
        Rocket_Man Link Parent
        I'm curious, what's the difference?

        I'm curious, what's the difference?

        5 votes
        1. [2]
          meghan Link Parent
          Most browsers will accept it but its a type mismatch and is better for error checking when using the function.

          Though Document.location is a read-only Location object, you can also assign a DOMString to it.

          Most browsers will accept it but its a type mismatch and is better for error checking when using the function.

          6 votes
    3. teaearlgraycold (edited ) Link Parent
      Here's a full script to add the form to the bottom of the page like when you're signed out: (function() { const storage_key = "theme-options"; const max_cache_age = 60 * 60 * 1000; // One hour...

      Here's a full script to add the form to the bottom of the page like when you're signed out:

      (function() {
        const storage_key = "theme-options";
        const max_cache_age = 60 * 60 * 1000; // One hour
      
        const get_form = () => {
          return new Promise((resolve, reject) => {
            let now = (new Date()).getTime();
            let options = window.localStorage.getItem(storage_key);
            options = options && JSON.parse(options);
      
            // If the cache is up to date, use it.
            if (options && (now - options.timestamp) < max_cache_age) {
              resolve(options.theme_select);
              return;
            }
      
            fetch("/settings")
              .then(resp => resp.text())
              .then(html => {
                let parser = new DOMParser();
                let doc = parser.parseFromString(html, "text/html");
                let theme_select = doc.querySelector("#theme").outerHTML;
                let option_data = {
                  timestamp: now,
                  theme_select: theme_select
                };
      
                window.localStorage.setItem(storage_key, JSON.stringify(option_data));
      
                resolve(theme_select);
              })
              .catch(reject);
          });
        };
      
        // Ripped from tildes.js
        const apply_theme = function(event) {
          event.preventDefault();
      
          // hide any IC change message
          $(this).parent().find('.form-status').hide();
      
          var new_theme = $(this).val();
          var selected_text = $(this).find('option:selected').text();
          var $setDefaultButton = $('#button-set-default-theme');
      
          // persist the new theme for the user in their cookie
          document.cookie = 'theme=' + new_theme + ';' +
            'path=/;max-age=315360000;secure';
      
          // remove any theme classes currently on the body
          $body = $('body').first();
          var bodyClasses = $body[0].className.split(' ');
          for (i = 0; i < bodyClasses.length; i++) {
            cls = bodyClasses[i];
            if (cls.indexOf('theme-') === 0) {
              $body.removeClass(cls);
            }
          }
      
          // add the class for the new theme to the body
          $body.addClass('theme-' + new_theme);
      
          // set visibility of 'Set as account default' button
          if (selected_text.indexOf('account default') === -1) {
            $setDefaultButton.removeClass('d-none');
          } else {
            $setDefaultButton.addClass('d-none');
          }
        };
      
        const insert_menu = () => {
          get_form().then(theme_select => {
            let footer = document.querySelector('#site-footer');
            let themeForm = document.createElement("div");
            themeForm.innerHTML = `<label for="theme">Theme:</label> ${theme_select}`;
            themeForm.className = "site-footer-theme-selection";
      
            footer.insertBefore(themeForm, footer.firstChild);
      
            $('#theme').change(apply_theme);
          });
        };
      
        insert_menu();
      })();
      

      I don't know how to make it work with greasemonkey, but if someone wants to do that we'd have a complete solution.

      Edit: Maybe someone can add this to the "Tildes Extended" extension.

      3 votes
  2. [3]
    Deimos Link
    Logged-out users can switch the theme from any page using a dropdown in the footer (you can log out and look, or load the site in an incognito window if you want to see what it's like). I could...

    Logged-out users can switch the theme from any page using a dropdown in the footer (you can log out and look, or load the site in an incognito window if you want to see what it's like). I could probably make that available for logged-in users as well, but I figured it wouldn't be useful the large majority of the time.

    8 votes
    1. Zargurkhan Link Parent
      Perhaps on option in the settings to enable the dropdown?

      Perhaps on option in the settings to enable the dropdown?

      6 votes
    2. deknalis Link Parent
      I would definitely appreciate it. That looks like a great solution to me, doesn't seem like it would be obstructive to the people who don't need it.

      I would definitely appreciate it. That looks like a great solution to me, doesn't seem like it would be obstructive to the people who don't need it.

      4 votes
  3. [2]
    MimicSquid Link
    One data point: I use the default theme, have never changed it, and appreciate the option to change them where it is, in the settings. If the three clicks to get to the setting bothers you, why...

    One data point: I use the default theme, have never changed it, and appreciate the option to change them where it is, in the settings. If the three clicks to get to the setting bothers you, why not bookmark the settings page? Then the option is only one click away.

    5 votes
    1. deknalis Link Parent
      This is exactly what I've started doing recently, and it works well enough on my desktop, but doing anything with bookmarks on mobile is more cumbersome than just changing it within the site every...

      This is exactly what I've started doing recently, and it works well enough on my desktop, but doing anything with bookmarks on mobile is more cumbersome than just changing it within the site every time.

      1 vote
  4. [3]
    Gaywallet (edited ) Link
    You might find the Stylish Stylus extension useful. It allows you to set (and search) custom CSS themes based on the website. I often find myself writing or modifying existing themes to tune them...

    You might find the Stylish Stylus extension useful. It allows you to set (and search) custom CSS themes based on the website. I often find myself writing or modifying existing themes to tune them in ways I like.

    2 votes
    1. [2]
      Bauke Link Parent
      I recommend Stylus over Stylish. As Stylish is spyware.

      I recommend Stylus over Stylish. As Stylish is spyware.

      14 votes
      1. Gaywallet Link Parent
        Ah shit sorry stylus is the one I have I switched from stylish. Good call.

        Ah shit sorry stylus is the one I have I switched from stylish. Good call.

        2 votes