Almost working script, I think. Could you make it work? (solved by jenie)

jcoolarts

Publicado: 23/08/2018

Editado: 28/08/2018

Hi there, I'm trying to make a userscript that will do a simple style change for a website like google. On the page will be at least 2 buttons, and each will link to a different stylesheet when clicked, thus changing the appearance of google's colors. So far, reddit and stackoverflow have yielded very little explanatory help. And as I'm fairly new to scripting, I'm hoping you'd help me out here, or even fix the script to work if you feel you can. Thank you :)

  // ==UserScript==
    // @name         Change CSS!
    // @namespace    http://tampermonkey.net/
    // @version      0.1
    // @description  Theme Changer
    // @author       jmc
    // @match        https://www.google.com
    // @grant        none
    // @require http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js
    // ==/UserScript==

    $(function () {
        $('button').click(function () {
            var txt = $(this).html();
            if(txt=='Night Mode')
            {

                $('link#style').attr('href', 'https://dl.dropboxusercontent.com/s/izi0tg7r5foax78/two.css');
                return false;
            }
            else if (txt == 'Day Mode') {
                $('link#style').attr('href', 'https://dl.dropboxusercontent.com/s/gf7te23q27tht3w/one.css');
                return false;               }

        });


    });

    body=<form id="change theme">
        <div align="center"><br><br><br>
        <button type="submit" id="Night Mode"></button>
    <button type="submit" id="Day Mode"></button>
    </div>
    </form>

I've got it working locally on an html file >

    <html><head><link rel="Stylesheet" href=""  type="text/css" id="style"/>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
        <script type="text/javascript">
            $(function () {
                $('button').click(function () {
                    var txt = $(this).html();
                    if(txt=='Night Mode')
                        {

                    $('link#style').attr('href', 'night.css');
                    return false;
                         }
                     else if (txt == 'Day Mode') {
                      $('link#style').attr('href', 'day.css');
                      return false;               }

                });

            });

        </script>
    <title>WOT</title><head>
    <body>

    LOL
    <form id="form1" runat="server">
        <div>
        <h1>My Website</h1>
        <br />
        <button>Night Mode</button>
        <button>Day Mode</button>
        </div>
        </form>


    </body>

But I can't seem to get this to transfer into an extension :pensive:

AHOHNMYC

Publicado: 24/08/2018

Editado: 24/08/2018

Denunciar comentario

Why so complicated?

/* Create an HTMLLinkElement to embed style bit later */
const styleElement = document.body.appendChild(document.querySelector('link'));
styleElement.rel = 'stylesheet';
styleElement.type = 'text/css';

/* What is time of day now? */
const sunset = 20;
const sunrise = 8;
const currentHour = new Date().getHours();
const isNight = currentHour > sunset && currentHour < sunrise;

/* Embed corresponding CSS */
let cssLink = 'https://dl.dropboxusercontent.com/s/gf7te23q27tht3w/one.css';
if (isNight)
    cssLink = 'https://dl.dropboxusercontent.com/s/izi0tg7r5foax78/two.css';
styleElement.href = cssLink;

FFW

Publicado: 24/08/2018

Denunciar comentario

// ==UserScript==
// @name         Change CSS!
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Theme Changer
// @author       jmc
// @match        https://www.google.com
// @grant        none
// @require http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js
// ==/UserScript==

$(function() {
    $(document).ready(function() { // Wait for the page to load

        $('<link rel="Stylesheet" href="" type="text/css" id="style"/>').appendTo(document.head); // Append the element that will later hold the link of the style file
        $('<div><button>Night Mode</button><button>Day Mode</button></div>').appendTo(document.body); // Append the two buttons
        $('button').click(function() { // Add click event on elements with the Tag button
            if (this.textContent === 'Day Mode') {
                $('link#style').attr('href', 'https://dl.dropboxusercontent.com/s/gf7te23q27tht3w/one.css');
            } else if (this.textContent === 'Night Mode') {
                $('link#style').attr('href', 'https://dl.dropboxusercontent.com/s/izi0tg7r5foax78/two.css');
            }
        });

    });
});

Local html file should look like the following

<html>

<head>
    <title>Change CSS!</title>
</head>

<body>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(function() {
            $(document).ready(function() { // Wait for the page to load

                $('<link rel="Stylesheet" href="" type="text/css" id="style"/>').appendTo(document.head); // Append the element that will later hold the link of the style file
                $('<div><button>Night Mode</button><button>Day Mode</button></div>').appendTo(document.body); // Append the two buttons
                $('button').click(function() { // Add click event on elements with the Tag button
                    if (this.textContent === 'Day Mode') {
                        $('link#style').attr('href', 'https://dl.dropboxusercontent.com/s/gf7te23q27tht3w/one.css');
                    } else if (this.textContent === 'Night Mode') {
                        $('link#style').attr('href', 'https://dl.dropboxusercontent.com/s/izi0tg7r5foax78/two.css');
                    }
                });

            });
        });
    </script>
</body>

</html>

jcoolarts

Publicado: 24/08/2018

Denunciar comentario

@Jenie said:

// ==UserScript==
// @name         Change CSS!
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Theme Changer
// @author       jmc
// @match        https://www.google.com
// @grant        none
// @require http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js
// ==/UserScript==

$(function() {
    $(document).ready(function() { // Wait for the page to load

        $('<link rel="Stylesheet" href="" type="text/css" id="style"/>').appendTo(document.head); // Append the element that will later hold the link of the style file
        $('<div><button>Night Mode</button><button>Day Mode</button></div>').appendTo(document.body); // Append the two buttons
        $('button').click(function() { // Add click event on elements with the Tag button
            if (this.textContent === 'Day Mode') {
                $('link#style').attr('href', 'https://dl.dropboxusercontent.com/s/gf7te23q27tht3w/one.css');
            } else if (this.textContent === 'Night Mode') {
                $('link#style').attr('href', 'https://dl.dropboxusercontent.com/s/izi0tg7r5foax78/two.css');
            }
        });

    });
});

Local html file should look like the following

<html>

<head>
    <title>Change CSS!</title>
</head>

<body>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(function() {
            $(document).ready(function() { // Wait for the page to load

                $('<link rel="Stylesheet" href="" type="text/css" id="style"/>').appendTo(document.head); // Append the element that will later hold the link of the style file
                $('<div><button>Night Mode</button><button>Day Mode</button></div>').appendTo(document.body); // Append the two buttons
                $('button').click(function() { // Add click event on elements with the Tag button
                    if (this.textContent === 'Day Mode') {
                        $('link#style').attr('href', 'https://dl.dropboxusercontent.com/s/gf7te23q27tht3w/one.css');
                    } else if (this.textContent === 'Night Mode') {
                        $('link#style').attr('href', 'https://dl.dropboxusercontent.com/s/izi0tg7r5foax78/two.css');
                    }
                });

            });
        });
    </script>
</body>

</html>

Thank you! This makes the buttons appear on google.com, but they don't seem clickable?

jcoolarts

Publicado: 24/08/2018

Denunciar comentario

@AHOHNMYC said: Why so complicated?

/* Create an HTMLLinkElement to embed style bit later */
const styleElement = document.body.appendChild(document.querySelector('link'));
styleElement.rel = 'stylesheet';
styleElement.type = 'text/css';

/* What is time of day now? */
const sunset = 20;
const sunrise = 8;
const currentHour = new Date().getHours();
const isNight = currentHour > sunset && currentHour < sunrise;

/* Embed corresponding CSS */
let cssLink = 'https://dl.dropboxusercontent.com/s/gf7te23q27tht3w/one.css';
if (isNight)
    cssLink = 'https://dl.dropboxusercontent.com/s/izi0tg7r5foax78/two.css';
styleElement.href = cssLink;

Thank you for replying :) I found the code like this, I didn't know it was complicated. If there a way for adding buttons to this, rather than having it time based?

FFW

Publicado: 24/08/2018

Denunciar comentario

Works fine here. Try adding !important after the values in the style files:

body {
    background-color: blue !important;
}

I also updated the code to have the buttons at the top and added an alert to check the click:

$(function() {
    $(document).ready(function() {
        $('<link rel="Stylesheet" href="" type="text/css" id="style"/>').appendTo(document.head);
        $('<div style="top: 5px;position: fixed;z-index: 1000;"><button>Night Mode</button><button>Day Mode</button></div>').appendTo(document.body);
        $('button').click(function() {
            alert(this.textContent); // remove this line later
            if (this.textContent === 'Day Mode') {
                $('link#style').attr('href', 'https://dl.dropboxusercontent.com/s/gf7te23q27tht3w/one.css');
            } else if (this.textContent === 'Night Mode') {
                $('link#style').attr('href', 'https://dl.dropboxusercontent.com/s/izi0tg7r5foax78/two.css');
            }
        });
    });
});

jcoolarts

Publicado: 24/08/2018

Denunciar comentario

@Jenie said: Works fine here. Try adding !important after the values in the style files:

It does indeed work now. Thank you Jenie! :smiley:

Publicar respuesta

Inicia sesión para responder.