Skocz do zawartości
PL
Szukaj na Pecetowiczu
  • Utwórz konto

Jak zrobić ciemny motyw na fotka.com przez Tampermonkey


Rekomendowane odpowiedzi
  • Premium
(edytowane)

Witam, chciałbym zrobić skrypt w Tampermonkey podmieniający białe tło na ciemne (dodać ciemny motyw) bo w nocy razi po oczach chodzi mi o fotka.com chciałbym dodać dla siebie kod dodający ciemny motyw. 

Proszę o pomoc 😉

jeśli by ktoś mógł opanować cały kod i wstawić tutaj to było by super, lub jakieś wskazówki jak to opanować 😜

Edytowane przez SeNioR
poprawa sensu postu bo nie był zrozumiały dla wszystkich
Odnośnik do komentarza
Udostępnij na innych stronach

Odnośnik do komentarza
Udostępnij na innych stronach

  • Premium

@ups Nie czaje czarna magia 

Odnośnik do komentarza
Udostępnij na innych stronach

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

image.thumb.png.56d6725c211a6383eaf83f8f6f0f64de.png

Odnośnik do komentarza
Udostępnij na innych stronach

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ąć

Odnośnik do komentarza
Udostępnij na innych stronach

  • Premium
2 minuty temu, Mativve napisał:

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ąć

@Mativve No właśnie chciałbym to w tampermonkey, no jak byś mógł to ogarnąć byłbym wdzięczny.. bo bawię się z tym ale to czarna magia bardziej niż myślałem ;'/

Odnośnik do komentarza
Udostępnij na innych stronach

@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?

Odnośnik do komentarza
Udostępnij na innych stronach

  • Premium
17 minut temu, Mativve napisał:

@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?

Wiesz co normalnie przez przycisk 

Odnośnik do komentarza
Udostępnij na innych stronach

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

[hide]
// ==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());
    });
});
})();

 

[/hide]
Odnośnik do komentarza
Udostępnij na innych stronach

(edytowane)

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:

Spoiler

Strona główna

obraz.png

 

Logowanie

obraz.png

 

Weryfikacja

obraz.png

 

Mój Profil

obraz.png

 

Profil innej osoby

obraz.png

 

Nowe fotki

obraz.png

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:

[hide]

Kod:

Spoiler


// ==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();
})();

 

 

Informacje:

Style CSS trzymam w gistach od githuba. Jak sprawdzić czy kod jest poprawny i nie ma w nim skryptów śledzących?

W kodzie znajduje się taki link:

https://gist.githubusercontent.com/Mativve/<ciąg_znaków>/raw/<ciąg_znaków>/fotka_dark.min.css

Jeśli w linku występuje nick M a t i v v e oraz link jest podobny do tego wyżej (zwłaszcza rozszerzenie CSS) to wszystko jest okej 😉

[/hide]
Edytowane przez Mativve
Aktualizacja kodu
Odnośnik do komentarza
Udostępnij na innych stronach

  • Premium

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

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

Odnośnik do komentarza
Udostępnij na innych stronach

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ć 😉

Odnośnik do komentarza
Udostępnij na innych stronach

  • Premium
6 minut temu, Mativve napisał:

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.

Tam jest taka polityka że szkoda gadać, żeby coś zmienić lub wprowadzić trzeba czekać z parę lat, a za samą np głupią opcją dodania do Moderatora jednej rzeczy graniczy z cudem...

Błędy następujące:
+ w wiadomościach prywatnych też jest biało mogło by być również w kolorze białym 

- Wiadomości 

- grupy 

- kamerki 

- Czat 
 

2020-11-26_15h20_59.png

2020-11-26_15h21_14.png

2020-11-26_15h21_28.png

2020-11-26_15h21_33.png

2020-11-26_15h24_02.png

Odnośnik do komentarza
Udostępnij na innych stronach

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

Odnośnik do komentarza
Udostępnij na innych stronach

  • Premium
2 godziny temu, Mativve napisał:

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

Pamiętaj do 3 kont max powyżej trzech blokują 😜 

Odnośnik do komentarza
Udostępnij na innych stronach

@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ć.

Odnośnik do komentarza
Udostępnij na innych stronach

  • Premium

@Mativve Tyle ile zrobiłeś to i tak dużo przynajmniej nie razi po oczach, nie ma sensu jak na razie aktualizować, bo będą znowu coś zmieniać w wyglądzie więc możliwe że będzie trzeba na nowo pisać ciemny wygląd więc jak na razie jest ok  jak coś dam znać na priv, a jak na razie to dzięki wielkie że ci się chciało grzebać przy tym 😜 😉 🍺🍺

Odnośnik do komentarza
Udostępnij na innych stronach

  • 2 tygodnie później...

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. 

Odnośnik do komentarza
Udostępnij na innych stronach

@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. 

Odnośnik do komentarza
Udostępnij na innych stronach

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. 🙂

Odnośnik do komentarza
Udostępnij na innych stronach

Kontynuuj dyskusję

Dołącz do Pecetowicza, aby kontynuować dyskusję w tym wątku.

  • Dodaj nową pozycję...
  • Dodaj nową pozycję...