Jak zrobić ciemny motyw na fotka.com przez Tampermonkey

@xZANDARMx Polecam Ci używać Opery GX, gdzie w ustawieniach masz możliwość ustawienia czarnego motywu na każdej stronie

Wiem że jest to dział z JSem ale jeśli chcesz to zrobić z poziomu przegladarki (tampermonkey) to nie lepiej wykorzystać gotowe rozwiązania?

Z tego co wiem to Opera GX ma wbudowany tryb ciemny na stronach: Opera GX | Przeglądarka gamingowa | Opera

A jak nie to jeśli to Firefox, Chrome lub Opera (zwykła) to są wtyczki od tego typu rzeczy:

Dark Reader – Get this Extension for 🦊 Firefox (en-US)

Dark Reader - Chrome Web Store

Jeśli dalej będziesz chciał skrypt na ciemny motyw w JS to wiedz że będzie trochę przepisywania styli CSS bo to nie da się zrobić magicznie jedną małą linijką 😉 Wieczorkiem siądę to spróbuję coś ogarnąć

@xZANDARMx Tak jeszcze dopytam żeby wieczorkiem móc od razu działać. Chcesz to uaktywniać przez przycisk, aktywację całego skryptu czy z automatu ma się uruchamiać jeśli godzina jest pomiędzy 19:00 - 8:00?

Na szybko, całego nie zrobiłem bo na pewno nie jest to na chwile przejrzeć całą fotkę etc.

// ==UserScript==
// @name         New Userscript
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        https://fotka.com/
// @grant        none
// @require      http://code.jquery.com/jquery-3.5.1.min.js
// ==/UserScript==

(function() {
    'use strict';
    function change_style(motyw) {
        // Zmienna tło to tablica zawierające id bądź klasy obiektów ktorę mają zmienić kolor tła
        var tlo = ["#dark_style", "#header", "#zaloguj", "#zarejestruj", "#content-bg-2", "#content-bg-3", "footer", ".registration-form-box"];
        // Zmienna tekst to tablica zawierające id bądź klasy obiektów ktorę mają zmienić kolor tekstu
        var tekst = [];
        if  (motyw == "Ciemny") {
            $("#dark_style").val("Jasny");
            $.each(tlo, function(i, v){
                $(this).css({'background-color': '#1f1f1f'});
            });
        } else if (motyw == "Jasny") {
            $("#dark_style").val("Ciemny");
            $.each(tlo, function(i, v){
                $(this).css({'background-color': '#fff'});
            });
        } else {
          alert("ktoś cie robi w bambuko");
        }
    }

$(document).ready(function() {
     $('#header').append($('<input type="button"id="dark_style" value="Ciemny">'));
     $('#dark_style').css({'position': 'absolute', 'top': '50%', 'transform': 'translateY(-50%)', 'left': '10px', 'background-color': '#1f1f1f', 'color': '#fff', 'border': 'none', 'padding': '10px 15px'});
    $( "#dark_style" ).click(function() {
        change_style($('#dark_style').val());
    });
});
})();

Udało się zrobić wcześniej. Nadpisane są prawie wszystkie style, zachowują się one w tle, dodatkowo dodany jest skrypt z pływającym przyciskiem z prawej strony.

Screeny:

Screenów jest kilka ale nie ma wszystkich bo na większości wygląda podobnie. Niestety nie wiem jak administracja i moderatorzy fotka.com - nie znam struktury kodu więc niektóre elementy u "wyższych" mogą się nie zmienić.

Niestety ze względu na to, że jest to skrypt, który załącza się po zaczytaniu strony to niestety w ciemnym trybie będzie efekt "błysku". Aby temu zapobiec twórcy strony musieli by wdrożyć taki system u siebie który zaczytywałby się bezpośrednio z linku a nie poprzez skrypt JavaScript.

Do pobrania:

// ==UserScript==
// @name         Dark fotka
// @namespace    dark_fotka
// @version      0.1
// @description  Dark theme for fotka.com
// @author       Mativve
// @match        https://fotka.com/*
// @grant        GM_setValue
// @grant        GM_getValue
// @require http://userscripts-mirror.org/scripts/source/107941.user.js
// ==/UserScript==

(function() {
    'use strict';
    let is_dark = false;

    function add_global_style(css) {
        let head, style;
        head = document.getElementsByTagName('head')[0];
        if (!head) { return; }
        style = document.createElement('style');
        style.type = 'text/css';
        style.innerHTML = css;
        head.appendChild(style);
    }

    function makeHttpObject() {
        try {return new XMLHttpRequest();}
        catch (error) {}
        try {return new ActiveXObject("Msxml2.XMLHTTP");}
        catch (error) {}
        try {return new ActiveXObject("Microsoft.XMLHTTP");}
        catch (error) {}

        throw new Error("Could not create HTTP request object.");
    }

    function load_styles(){
        var request = makeHttpObject();
        request.open("GET", "https://gist.githubusercontent.com/Mativve/52f85ad27161ef32642760a3cc52e043/raw/1af12ad52227b1bcd6d538b7983b9405ce381f04/fotka_dark.min.css", true);
        request.send(null);
        request.onreadystatechange = function() {
            if (request.readyState == 4){ add_global_style(request.responseText); }
        };
    }

    function apply_mode(){
        is_dark = GM_SuperValue.get("is_dark");

        if( is_dark != 'true' && is_dark != 'false' ){
            GM_SuperValue.set("is_dark", (is_dark) ? "true" : "false");
            is_dark = GM_SuperValue.get("is_dark");
        }


        console.log("apply_mode", is_dark);

        if( is_dark == "true" ){
            document.body.classList.add("dark");
        }
        else if( is_dark == "false" ){
            document.body.classList.remove("dark");
        }
    }

    function switch_theme(){
        if( is_dark == "true" ){ is_dark = "false"; }else if( is_dark == "false" ){ is_dark = "true"; }

        GM_SuperValue.set("is_dark", is_dark);

        apply_mode();
    }

    function create_float_button(){
        let button_el = document.createElement("button");
        button_el.className = "contrast_float_button";
        button_el.innerHTML = '<img src="//cdn0.iconfinder.com/data/icons/typicons-2/24/adjust-contrast-512.png" alt=""/>';

        document.body.appendChild(button_el);

        button_el.addEventListener('click', function(){ switch_theme(); });
    }

    function init(){
        load_styles();

        create_float_button();

        apply_mode();
    }
    init();
})();

Przed chwilą, xZANDARMx napisał:

co do właścicieli strony to nie wprowadzą takiej opcji, pytałem to odpowiedzieli ze zostaje w oryginalnym kolorze białym niestety

Nie wiem czy tam mają jakiś Brand Book i się go kurczowo trzymają ale dla mnie wprowadzenie takiej opcji na pewno by pozytywnie wpłynęło na odczucia podczas korzystania tego w nocy (sam Twój temat to pokazuje) - także dziwnie że takie mają stanowisko w tej sprawie.

3 minuty temu, xZANDARMx napisał:

Ale dzięki wielkie za poświęcony czas piwko się nalezy hehe 😉

A dziękować 😉 Gdyby coś się wypruło jeszcze, że gdzieś nie chce działać jak należy to zgłaszaj, będziemy naprawiać 😉

Będę w takim razie musiał drugie fejkowe konto założyć żeby móc ogarnąć wiadomości 😛

@xZANDARMx Poprawiłem to (i zaktualizowałem kod wyżej) co dla zwykłego szaraka jest dostępne, niektóre elementy które podesłałeś w screenach u mnie wyświetlają się dobrze więc nie wiem co może być nie tak 😕

Niestety wy jako moderatorzy/admini macie chyba inne elementy przez co nie są one dla mnie dostępne. Musielibyśmy na PW ogarnąć to tak, że podesłałbyś mi ścieżki/selektory tego elementu a ja resztę spróbowałbym podmienić.

Dodam tylko, że ewentualnie możesz poeksperymentować z flagami w chrome: wejdź w chrome://flags/#enable-force-dark i włącz tę funkcję - co prawda wymusza tryb ciemny na wszystkich stronach ale szczerze mówiąc mi akurat odpowiada. Nie każda strona może wygląda najlepiej ale nie wymaga to dodatkowych wtyczek. 

@Poftorek Też można. A nie lepiej po prostu zainstalować sobie dodatek Dark Reader do Google Chrome (pasuje też w Microsoft Edge) który nie tylko odwraca kolory ale podmienia CSS więc ciemna wersja wygląda naturalnie. 

1 godzinę temu, SeNioR napisał:

@Poftorek Też można. A nie lepiej po prostu zainstalować sobie dodatek Dark Reader do Google Chrome (pasuje też w Microsoft Edge) który nie tylko odwraca kolory ale podmienia CSS więc ciemna wersja wygląda naturalnie. 

Pewnie, że lepiej + ten (i podobne) dodatek ma możliwości personalizacji ciemnego motywu w przeciwieństwie do flagi. Ja tylko wspomniałem, że jest i taka opcja. 🙂