switchen tussen 2 of 2 custom css'en

[dec0de]

veel mensen willen een tweakers night mode, en ik ook. wat nog veel mooier zou zijn, is dat je 2 custom css'en kan maken (a: 1 custom light mode en 1 custom dark mode. b: 1 mobiele variant, en 1 desktop variant, omdat tweakers geen gebruik maakt van al mijn schermruimte op mijn ultrawide), waar je dan net tussenkan switchen. ( op de zelfde manier als je van land veranderd, NIET op tijd!.

als tweakers namelijk zelf een nightmode maakt, kun je niet je eigen css toepassen... als we zelf een dark css mogen maken is veel fijner.

[Hero of Time]

Je optie b: kan je zelf al regelen door met media-types te werken. Je geeft op bij welke resolutie iets toegepast moet worden en dat is het. Dat is ook hoe de 'responsive' design werkt. Als de hoeveelheid ruimte minder wordt in de breedte, wordt de weergave automatisch aangepast. Zie dit stukje als voorbeeld:

Cascading Stylesheet:

@media only screen and (min-width: 1200px) {
    /* Make the default contentArea wider for more text */
    #contentArea {
        width: 70%;
    }
    /* Do the same for the menu bar, we have the space, use it */
    #menu { 
        width: 70%;
    }
}

Als je meer dan 1200 pixels in de breedte hebt, wordt de standaard inhoud breder en het menu gaat mee.

[Rembock]

Die custom light/dark mode is inderdaad ook iets waar ik momenteel mee aan de slag ben gegaan.
Ik ben er achter gekomen dat als je bij instellingen op Tweakers de slider bij achtergrond op licht zet, in de css en html niet gebruik gemaakt wordt van customColor.
Verander je de slider ook maar iets naar rechts, dan komt dit wel voor in de html en css.

Zet maar eens onderstaande code in je custom css en sleep de balk van links naar rechts, je zal zie dat de menubalk van rood naar zwart gaat.

Cascading Stylesheet:

.customColor #menubar {
    background-color: #000;
    background-image: -moz-linear-gradient(#333, #000 68px);
    background-image: linear-gradient(to bottom, #333, #000 68px);
    box-shadow: inset 0 -1px 0 #444;
}

Helaas nog niet kunnen uitvogelen hoe ik dit automatisch voor elkaar krijg i.c.m. met "Automatisch aanpassen op tijd", dus voor nu een handmatige toggle m.b.v. customColor. Mocht ik hier uitkomen zal ik het hier posten.

[AW_Bos]

Je kan bijvoorbeeld een PHP-script maken die op gezette momenten een CSS-style toont, en zich als css-file serveert. Via @import gebruikt kan je dit dan in je Custom CSS-textveld gebruiken.

[ Voor 32% gewijzigd door AW_Bos op 23-01-2019 12:34 . Reden: Duidelijkere uitleg ]

[Hero of Time]

@B.O.C.K, in je instellingen heb je boven de slider voor licht naar donker de optie 'aanpassen aan tijd'. Met je gevonden aanpassing in de HTML/CSS zou je daar al je regels op kunnen toepassen.

[Rembock]

@AW_Bos Een PHP-script zal niet mogelijk zijn, je kunt met de custom css functie van Tweakers alleen css gebruiken.

@Hero of Time nee helaas werkt dat niet. "Automatisch aanpassen op tijd" begint niet op de meest lichte modus en gebruikt altijd customColor in de html/css. Het enige wat er op basis van tijd verschilt in de css is de achtergrondkleur, helaas (tot nu toe) nog geen oplossing gevonden om dit te gebruiken voor een autoswitch van light naar dark. Misschien dat ik wat kan met de @supports regel

[Matszs]

B.O.C.K schreef op woensdag 23 januari 2019 @ 11:56:
@AW_Bos Een PHP-script zal niet mogelijk zijn, je kunt met de custom css functie van Tweakers alleen css gebruiken.

Wat @AW_Bos hier bedoelt is:

code:

@import url("http://eigenserver.nl/file.css");

Waarbij je kan verwijzen naar je eigen server en daar vandaan een CSS bestand kan inladen op Tweakers. Dat CSS bestand op je eigen server kan je laten genereren door bijvoorbeeld PHP. (op basis van tijd, dag, ...?)

[Rembock]

@Matszs bedankt voor de toelichting, zo had ik het nog niet bekeken
Goed om in mijn hoofd te houden als alternatief, het liefst heb ik dit zonder hosten op een externe server dus nog even uitzoeken wat mogelijk is.
Anders wordt het wachten tot light-level ondersteund wordt door browsers

[AW_Bos]

B.O.C.K schreef op woensdag 23 januari 2019 @ 11:56:
@AW_Bos Een PHP-script zal niet mogelijk zijn, je kunt met de custom css functie van Tweakers alleen css gebruiken.

Klopt, maar dan moet het zelf hosten, en die CSS output gebruiken in een @import.
Jammer dat CSS geen media-queries voor bepaalde tijden kent. Dit zou niet misstaan naar mijn idee

[ Voor 14% gewijzigd door AW_Bos op 23-01-2019 12:36 ]

[dec0de]

B.O.C.K schreef op woensdag 23 januari 2019 @ 12:22:
@Matszs bedankt voor de toelichting, zo had ik het nog niet bekeken
Goed om in mijn hoofd te houden als alternatief, het liefst heb ik dit zonder hosten op een externe server dus nog even uitzoeken wat mogelijk is.
Anders wordt het wachten tot light-level ondersteund wordt door browsers

Het hosten op een externe server is gratis als dat je euvel is, via awardspace, krijg je een domain met FTP server. Je domain is dan its als www.stroopdas.dx.am (deze site redirect je naar stroopdas.rf.gd, omdat ik dat domain heb geclaimed voor school)

[dec0de]

@B.O.C.K @Hero of Time

Iets zoals dit?
YouTube: Tweakers custom css darkmode
Mijn css zal ik op het t.net verzamel forum zetten (gebruikt ook 2 lay-outs voor mobiel en desktop)

[Rembock]

@Lets find it ziet er goed uit. Leest zo te zien een stuk aangenamer dan volledig licht in de avond. Zelf ben ik meer aan het experimenteren met een volledig zwarte layout i.v.m. oled. Zodra deze voor mij 'af' is zal ik hem delen in het verzameltopic

[.oisyn]

Matszs schreef op woensdag 23 januari 2019 @ 11:59:
[...]


Wat @AW_Bos hier bedoelt is:

code:

@import url("http://eigenserver.nl/file.css");

Waarbij je kan verwijzen naar je eigen server en daar vandaan een CSS bestand kan inladen op Tweakers. Dat CSS bestand op je eigen server kan je laten genereren door bijvoorbeeld PHP. (op basis van tijd, dag, ...?)

Wel even rekening mee houden dat je 'm als HTTPS moet serveren

@Lets find it En dan blijkt ook dat dat met AwardSpace niet echt gratis mogelijk is... Ze doen zo te zien niet aan Let's Encrypt, en tevens niet aan SNI zodat je een apart ip-adres moet huren.

[ Voor 16% gewijzigd door .oisyn op 30-01-2019 01:05 ]

[Koenvh]

.oisyn schreef op woensdag 30 januari 2019 @ 01:00:
[...]


Wel even rekening mee houden dat je 'm als HTTPS moet serveren

@Lets find it En dan blijkt ook dat dat met AwardSpace niet echt gratis mogelijk is... Ze doen zo te zien niet aan Let's Encrypt, en tevens niet aan SNI zodat je een apart ip-adres moet huren.

Kun je dat met Cloudflare niet omzeilen? Dan heb je wel een eigen domein nodig, maar met Freenom o.i.d. moet ook dat mogelijk zijn.

Overigens zou ik dan eerder kijken naar de gratis functionaliteit van bijvoorbeeld de Google Cloud (https://cloud.google.com/free/?hl=nl), met cloud functions kan het al zo makkelijk als:

Python:

import datetime

def css(request):
    hour = datetime.datetime.now().hour
    if hour > 18 or hour < 6:
        return "dark CSS"
    else: 
        return "light CSS"

Welke je dan via CSS kunt importeren

[ Voor 20% gewijzigd door Koenvh op 30-01-2019 01:47 ]

[dec0de]

.oisyn schreef op woensdag 30 januari 2019 @ 01:00:
[...]


Wel even rekening mee houden dat je 'm als HTTPS moet serveren

@Lets find it En dan blijkt ook dat dat met AwardSpace niet echt gratis mogelijk is... Ze doen zo te zien niet aan Let's Encrypt, en tevens niet aan SNI zodat je een apart ip-adres moet huren.

Oh ja, die https vereiste...

[.oisyn]

Koenvh schreef op woensdag 30 januari 2019 @ 01:36:
Overigens zou ik dan eerder kijken naar de gratis functionaliteit van bijvoorbeeld de Google Cloud (https://cloud.google.com/free/?hl=nl),

Hoe zie je dat voor je? Sommige services zijn gratis, maar je moet wel een betalend account hebben om er gebruik van te kunnen maken, zo lijkt het. Of mis ik iets?

.edit: oh wacht, een paid account is geen abonnement, het betekent gewoon dat kosten van gebruik in rekening kunnen worden gebracht. Zolang je binnen de limieten van Always Free blijft is het dus gratis. Wel oppassen dat je er niet overheen gaat dan

[ Voor 23% gewijzigd door .oisyn op 30-01-2019 09:17 ]