Værktøjskasse: Sådan skaber vi et mørkt tema med Stylebot og ‘no code’

22. april kl. 03:459
Skærmdump af Version2's site
Illustration: Version2.
Med webudvidelsen Stylebot kan vi nemt skabe et mørkt tema med klik og knapper til det nye look på Version2.
Artiklen er ældre end 30 dage

Version2 har fået et nyt cms, som flere sikkert har bemærket.

Der skal stryges nogle hjørner ud hist og pist, helt sikkert, og sådan er det nok ofte, når man udruller en ordentlig omgang, tænker jeg.

Flere læsere har i forbindelse med det nye cms efterspurgt et mørkt farvetema, som kan være lidt blidere for øjnene, med en masse sort, og lidt hvid skrift. Mon ikke også det sparer lidt CO2, eller batteri på den bærbare?

Det er efterhånden mange år siden, at vi diskuterede muligheden her på redaktionen. Og nu gør vi noget ved det. Saftsuseme. 

Artiklen fortsætter efter annoncen

Webudvidelsen Stylebot kan netop det - lave om på stilen på et website, med klik og knapper. Det er vist det, der hedder low code eller no code nu til dags.

Udvidelsen har efterhånden 11 år på bagen og findes til de mest udbredte browsere, dog på nær Safari. Den indsamler ikke oplysninger om brugen, skrives der på udvidelsens hjemmeside, og det lyder jo godt.

Dertil kommer, at man i dag kan ‘whiteliste’ en udvidelse i browseren, så den kun kan få adgang til bestemte websites - som f.eks. Version2.

I Chrome startes udvidelsen efter installation ved at klikke i puslespilsbrik-menuen til højre for adresselinjen og vælge punktet 'Stylebot'. Derefter vælges menupunktet ‘Open Stylebot’ i Stylebots egen menu. 

Skærmdump af Version2's site
Illustration: Version2.

Nu åbnes Stylebots sidepanel.

Skærmdump af Version2's site
Illustration: Version2.

Nederst i panelet er der tre faner: Basic, Code og Magic. Udgangspunktet er Basic, og her vælger vi selector-markøren øverst i panelet. Og hvad er så det? Selector’en er et css-udtryk, som peger på en bestemt formateret del af kildekoden.

Det med blåt

Når jeg nu holder musen over et element på websiden, fremhæves det med blåt. Det er ligesom i de udviklerværktøjer, der er indbygget i de store browsere.

Skærmdump af Version2's site
Illustration: Version2.

Først klikker jeg i marginen af websiden på Version2’s forside, som fremhæver hele siden. Men det er lidt snyd, for der ligger et element foran. I feltet Colors sætter jeg baggrunden til sort. Det gør ikke hele siden sort, men nu er marginerne i hvert fald pænt mørke. Vi er på rette spor.

Nu klikker jeg i midten af siden, og så går det stærkt. Overskrifterne forsvinder næsten i det sorte, men den klarer jeg ved at vælge én af dem med selector-markøren og gøre teksten hvid, i Colors-feltet.

Der skal klikkes en del, men det går hurtigt, og nu ser forsiden egentlig meget O.K. ud, synes jeg.

Jeg har et problem med stregen under top-menuen i midten – ‘Artikler,’ ‘Debat og blogs’ og så videre. Den streg, der ligger under topmenuen forsvinder under knapperne. Det ser ikke så pænt ud, synes jeg. Jeg prøver det ene, og det andet, men stregen er stadig forsvunden.

Jeg fedter lidt mere rundt, og til sidst finder jeg ud af, at stregen kommer til syne, når jeg giver menuknapperne lidt padding i bunden.

Det trick kan jeg også benytte andre steder, hvor stregerne forsvinder.

Der er dog en nød, jeg ikke kan knække. Det er rammen omkring teksten på artiklernes emneord, som står øverst til venstre på billederne på forsiden. Den er sort, men skal være Version2-grøn. Hvis jeg klikker på det med Stylebots pegeværktøj, markeres en lang række andre elementer, som ikke skal have ny farve. Så her må jeg finde på noget andet.

Jeg benytter browserens udviklerværktøj til at finde et selector-udtryk, på samme måde som vi gjorde i en tidligere artikel. Den giver resultatet:

  1. div.primary-topic-list.primary-topic-fixed > a

– som peger lige på den sorte ramme. Den kopierer jeg ind i Stylebot-panelets faneblad ‘Code:’

  1. div.primary-topic-list.primary-topic-fixed > a {
  2. background-color: #689f38;
  3. }

Så bliver rammen pænt grøn.

Sort på hvidt

»Har du bare udskiftet hvid med sort?« spørger en kollega.

Og det findes der faktisk en anden webudvidelse, der kan. Den hedder Dark Reader, og skaber på automatisk vis en mørk udgave af et hvilket som helst site.

Jeg synes den mangler Stylebots nemme muligheder for at finpudse resultatet. Og i vores cms-backend er der elementer, der forsvinder i ren sort med Dark Reader slået til. Men det er en hurtig fremgangsmåde. Jeg holder mig dog til Stylebot.

Der er også muligheden for at benytte browserens ‘reader mode’ – læsningstilstand – der fjerner alt andet end brødtekst og overskrifter fra en webside, og ofte også har et mørkt tema at byde på.

Den bruger jeg, hvis jeg vil fokusere på en svær tekst, eller bare er træt om eftermiddagen. De fleste cms'er i dag – inklusive Version2's – omkapsler brødtekst med HTML-elementet ‘article’, som gør det nemt for læsningstilstand at vise teksten korrekt.

Trækul

Nu har jeg efterhånden malet rundt på det meste af sitet, tænker jeg. Der mangler måske lidt hist og her, men det er nemt at tilføje i fremtiden med Stylebots sidepanel.

Det ser meget godt ud med sort på hvidt, men det er lidt for bastant for mig. Jeg kan godt lide den mørke nuance der hedder charcoal, trækul, men gør den lidt mørkere og lidt mindre farvemættet. Jeg ender med en farveværdi på #2a3136 i hextal. Det passer til min smag.

Der er nok nogle hjørner, jeg ikke har været ude i, men det er nemt at åbne Stylebots panel og gøre noget ved det. 

Vi har lagt stylesheetet på Github, og hvis man vil prøve selv, er det nemmest bare at kopiere css-teksten over i Stylebots sidepanel, i fanen ‘Code.’ Så skifter udseendet med det samme.

På min bærbare arbejds-pc med en Core i7-cpu synes jeg ikke at sitet virker mere langsomt end før, uden Stylebot slået til.

Og jo, loading-tiderne kunne være bedre i det hele taget. Men jeg hører også på de interne vandrør, at der netop arbejdes på højtryk på dette problem lige nu.

Når de travle webudviklere her på matriklen har fået strøget hjørnerne ud, og har lidt bedre tid, kan vi måske sætte det mørke tema på backloggen, til indbyggelse i cms'en?

Vi skruer charmen på, til den tid - det skal da prøves ;-)

9 kommentarer.  Hop til debatten
Denne artikel er gratis...

...men det er dyrt at lave god journalistik. Derfor beder vi dig overveje at tegne abonnement på Version2.

Digitaliseringen buldrer derudaf, og it-folkene tegner fremtidens Danmark. Derfor er det vigtigere end nogensinde med et kvalificeret bud på, hvordan it bedst kan være med til at udvikle det danske samfund og erhvervsliv.

Og der har aldrig været mere akut brug for en kritisk vagthund, der råber op, når der tages forkerte it-beslutninger.

Den rolle har Version2 indtaget siden 2006 - og det bliver vi ved med.

Debatten
Log ind eller opret en bruger for at deltage i debatten.
settingsDebatindstillinger
8
25. april kl. 11:29

Med overhængenge fare for a blive opfattet som både gammel, teknologiforskrækket og konservativ er jeg i tak, men nej tak kategorien.

Bruger sort tema på alt det jeg kan fra mobil til desktop. Og med det her hvide inferno på V2 (desktop), kan jeg ikke komme i tanke om et sted, hvor det ville være i højere kurs. Men det bliver via en slider på siden eller ingenting. Ønsker ikke at installere et eksternt plugin.

Og det er virkelig ikke for at være sur eller negativ i et ellers yderst informativt skriv omkring jeres tanker vedr. sort baggrund, men det er bare ikke en mulighed i min måske gammeldags optik.

7
22. april kl. 12:50

Nu hvor vi taler om browser-udvidelser, som kan bruges til at forbedre det nye V2 design, så vil jeg anbefale AdblockPlus.

Med udvidelsen kan man skjule de mest overdimensionerede elementer. Resultatet er en noget mere læsevenlig udgave :)

Se skærmdump her: https://pasteboard.co/3O5k3gAoW00R.png

5
22. april kl. 11:23

Hej Tania

Har du set på hvad Drupal 9 (CMS i Version2), gør for cache-udnyttelsen?

Jeg vil tro V2 ville køre lidt bedre på en (IBM) z14/14 rack.

Men et "mørkt" tema er jo dagens nye sort - man suges nærmest ind i skærmen XD.

4
22. april kl. 10:37

Hej Tania, det er meget dejligt med det mørke tema - om det er som tredjepart-plugin, anternate style eller prefers-color-scheme. Jeg har lavet en pull request til dig, primært vendt mod hvordan V2 ser ud når man er logget ind.

2
22. april kl. 10:21

Det kunne være sejt hvis i bare smed CSS'en ind som en alternate style: https://developer.mozilla.org/en-US/docs/Web/CSS/Alternative_style_sheets på jeres side, så man kunne vælge den (i Firefox trykker man F10 -> View -> Page Style.

Så slipper man også for at installere en extension som i fremtiden bliver opkøbt af en shady mand eller firma, og bliver brugt til at suge det sidste stykke privatliv ud af intetanende individer.

1
22. april kl. 10:15

Et mørkt farveskema vil være højt prioriteret for mig :-)

6
22. april kl. 11:32

Helt enig. Moderne websites bliver jo designet med det som udgangspunkt, sjovt V2 ikke har taget den beslutning.

9
25. april kl. 11:45

Moderne websites bliver jo designet med det som udgangspunkt

Hvilket, ud over at det ser grimt ud, så - og vigtigere - er en plage for folk med svage øjne. Hvid på sort har dårligere læsekontrast end mørk på lys, så det er sværere at læse. Nogle sider og programmer har tilmed valgt at bruge lille skrift med lys grå på mørk grå - det er nærmest umuligt at læse for 50+ årige.

På Safari er Show Reader her en redningsmand (og hvis man insisterer - også i hvid på sort-udgave), men nogle websider som fx Version 2 har klodset i det så den ikke er aktiv. Dette sidste er i virkeligheden det vigtigste i denne diskussion: At tekster skal kunne læses i læserens præference for font, kontrast og størrelse, og ikke i hvad udgiveren nu måtte synes er smart.

Hvis man sidder i et mørkt lokale og synes en meget lys skærm bliver for hidsig, fungerer brightness-knappen glimrende. Selv med hvid-på-sort er den jo nødvendig, da de hvide bogstaver ellers blænder og flyder sammen ud over det sorte.