Sötét oldaltéma fejlesztése

HUP

A közösségi, sötét oldaltémával kapcsolatos hibajelzések, fejlesztések gyüjtőhelye.

  • 2000 megtekintés

( kroozo v | 2025. 11. 03., h – 09:46 )

Most vettem észre, hogy a Bekezdés és a Forrás gombokon a szövegek hover hatására eltűnek.  Szerintem lemaradt a szín csere a konkrét tartalomról, mert csak ezen a kettőn van ikonon kívül más is. (és az ikonok ezeken is jók)

( kroozo v | 2025. 11. 03., h – 10:09 )

Illetve most volt kettő világos téma megint.

Az egyikben light volt a dark_mode_user (az egy főoldal), a másikban meg system (az meg konkrétan ez a topic, ide gépelem most a kommentet)

egyébként meg nyilván darkra van állítva.

( Nyizsa v | 2025. 11. 03., h – 10:29 )

A topic tetején az első új hozzászólásra mutató nyíl fekete.

Javaslat: kapjon ugyanolyan színt, mint a hozzászólásokban az előző/következő új hozzászólásra mutató nyilak.

Szerk: Most már tetszik, köszi!

Debian - The "What?!" starts not!
http://nyizsa.blogspot.com

( falu v | 2025. 11. 03., h – 12:34 )

Nálam random módon váltogatja a sötét/világos témát az oldalak közötti váltáskor. Lehet, hogy valami cache probléma ez, de nem nálam, mert ha ráfrissítek, akkor is világos marad.

[Falu.Me]==>[-][□][X]

( asch v | 2025. 11. 03., h – 14:23 )

A beküldés gombon nem látszik, hogy meg volt nyomva. Párosítva azzal, hogy lassan reagál egy kicsit zavaró, szerintem világos háttérrel nem így volt.

Hat, en idaig jutottam, igy nez ki: https://imgur.com/a/aEn702O

a ckeditorral nem nagyon tudok mit kezdeni, annyira nem ertek a lovakhoz es/vagy egy...

source (ez kell hozza, vagy beszeld ra az illetekeseket, hogy fejlesszek bele az oldalba :) https://github.com/openstyles/stylus):

#all {
	background: #24262b !important;
	color: white !important;
}
html[data-dmu-mode="dark"] body {
	--dm-background: #111;
	--dm-color: #e0e0e0;
	--dm-dcolor: #303030;
	--dm-hcolor: #FFFFFF;
	--dm-link-hover: #C0C0F0;
	--dm-d0-bg: #202226;
	--dm-d1-bg: #222;
	--dm-d1-bg-hl: #454545;
	--dm-d1-br-hl: #333;
	--dm-d1-br: #454545;
	--dm-d2-bg: #354840;
	--dm-d2-br: #505050;
	--dm-d3-bg: #909090;
	--dm-d3-br: #A0A0A0;
	--dm-hl-active: #C0C0F0;
	--dm-d0-bg-hl: #353535;

	color: var(--dm-color);
}

html[data-dmu-mode="dark"] #block-hup-theme-content article.new {
	background-color: #222 !important;
}

html[data-dmu-mode="dark"] #block-hup-theme-content .comment_info_wrapper {
	background-color: #222 !important;
}

/* footer */
html[data-dmu-mode="dark"] footer[role="contentinfo"] .region-footer {
	background-color: var(--dm-d1-bg);
	border-color: var(--dm-d2-br);
}

/* code block */
html[data-dmu-mode="dark"] .hljs {
	background-color: var(--dm-background);
}

/* cke */
html[data-dmu-mode="dark"] .ck.ck-toolbar {
	background-color: var(--dm-d1-bg) !important;
}

html[data-dmu-mode="dark"] .ck.ck-button:not(.ck-disabled):hover .ck-icon {
	filter: none;
	color: black;
}

html[data-dmu-mode="dark"] .ck-content pre {
  background:#111;
  border:1px solid #c4c4c4;
  border-radius:2px;
  color:white;
  direction:ltr;
  font-style:normal;
  min-width:200px;
  padding:1em;
  tab-size:4;
  text-align:left;
  white-space:pre-wrap
}

( hzsolt94 v | 2025. 11. 04., k – 18:53 )

Bármit is csinálok, nekem most nem működik a dark theme. Kitöröltem a cachet, beléptem privát ablakból, nem segít.

A drupalSettings.dark_mode_user értéke "light", hiába állítom "Rendszer" vagy akár fixen "Sötét" módra a profilomban.

( kroozo v | 2025. 11. 05., sze – 11:09 )

A link beszúrása felugró világos.

( kroozo v | 2025. 11. 05., sze – 11:11 )

Kódblokk editálás közben nem syntax highlightol (ez konzisztens a normálissal), cserébe eléggé szar kontrasztos szürke betűk vannak rajta (ránézésre a betű színe ugyanaz, mint a világoson, a doboz viszont sokkal sötétebb, azért).

( Sulc v | 2025. 11. 05., sze – 14:47 )

Ez az oldal is random sötét lett.

--
Szerk:

Beküldtem a választ, visszaállt világosra.

( kikadff v | 2025. 11. 05., sze – 17:50 )

Először beállítottam dark-ra, de mivel váltogat néha világosra véletlenszerűen és ez elég idegesítő, ezért visszaváltottam világosra. Most meg néha sötétre vált...

( asch v | 2025. 11. 06., cs – 02:34 )

Nem működik a pluszegy! Eltűnttt!!!44!négy

( hrgy84 | 2025. 11. 06., cs – 14:05 )

Két hibát is hoztam:

A főoldal random kivált világos módba. Ez azért izgalmas, mert a generált HTML tag ilyen:

<html lang="hu" dir="ltr" class=" js" data-dmu-mode="light" data-dmu-source="user" data-once="drupal-dialog-deprecation-listener dmu-system-init">

És kérem ez hazugság, nekm az user settings-em dark. A fórumoknál jó is amúgy.

A másik hiba a CKEditort érnti, ha beszúrok egy linket, az sötét témával szerkeztés közben nincs aláhúzva, és semmilyen módon nem különül el a normál szövegtől. 

Blog | @hron84

valahol egy üzemeltetőmaci most mérgesen toppant a lábával 

via @snq-

raadasul sotet temanal ha linket akarsz csinalni egy kijelolesbol az editorban, akkor a link szerkeszto ablak vilagos (feher) szinu. mondjuk ez ilyen huszadrangu dolog, csak erdekesseg inkabb. es igen a szerveszteskor nincs alahuzva a link, az picit zavarobb mert elsore azt hittem nem sikerult beallitani.

( realkry | 2025. 11. 07., p – 09:55 )

Random forum oldalon bedobta a sötét témát, szemem majd' kiesett. User beállításokat nem állítgattam.

( nevergone v | 2025. 11. 09., v – 09:59 )

A sötét mód css-ben történt valami fejlesztés?

Ha egyedül vagyok egy szobában, akkor ember vagyok. Ha bejön egy kormánypárti, akkor ellenzéki lettem. És annyira vagyok ellenzéki, amennyire kormánypárti az, aki bejött a szobába.

Köszi a munkát, akkor megvárlak az élesítéssel, addig én is javítok hibákat.

Ha egyedül vagyok egy szobában, akkor ember vagyok. Ha bejön egy kormánypárti, akkor ellenzéki lettem. És annyira vagyok ellenzéki, amennyire kormánypárti az, aki bejött a szobába.

( hrgy84 | 2025. 11. 11., k – 17:04 )

@Mcsiv: egy minimál feljesztési igény. Visszatért a +1-es szavazógomb, de sötét témával nagyon beleolvad a kommentbox láblécébe. Lehetne, hogy egy picit világosabb legyen a szövege? Köszi szépen!

Blog | @hron84

valahol egy üzemeltetőmaci most mérgesen toppant a lábával 

via @snq-

Én kérnék még valamit: a témák szerzőjénél van egy nyíl, ami az első új hozzászóláshoz visz (ha van). Azt át tudod dolgozni úgy, ahogy a többi ikonnal tetted? Köszi!

Ha egyedül vagyok egy szobában, akkor ember vagyok. Ha bejön egy kormánypárti, akkor ellenzéki lettem. És annyira vagyok ellenzéki, amennyire kormánypárti az, aki bejött a szobába.

( Mcsiv v | 2025. 11. 12., sze – 19:33 )

Az eddig felmerült dolgok javítva/bővítve/stb. Ha van még valami ötlet/javaslat, akkor azt plz ez alá a hsz. alá, hogy egyszerűbb legyen követnem :)

( Nyosigomboc v | 2025. 11. 16., v – 02:01 )

A friss tartalom/koveto oldalon alul a lapozasnal a szamok nehezen latszanak.

.pager .pager-current, .pager a, .pager a:link, .pager a:visited {
 background-color: #F0F0E4; /* ez nem jo */
...}

A strange game. The only winning move is not to play. How about a nice game of chess?

( nevergone v | 2025. 11. 18., k – 09:00 )

Sziasztok!

Lesz még ebben fejlesztés, vagy történt változás a legutolsó frissítés óta?

Ha egyedül vagyok egy szobában, akkor ember vagyok. Ha bejön egy kormánypárti, akkor ellenzéki lettem. És annyira vagyok ellenzéki, amennyire kormánypárti az, aki bejött a szobába.

    html[data-dmu-mode="dark"] #block-hup-theme-huplogo img {
       width: 0;
       height: 0;
   }
   html[data-dmu-mode="dark"] #block-hup-theme-huplogo a::after {
       content: "HUP.hu";      
   }

ne kérdezd, hogy mi a francért az a-ra kell tenni az aftert, az imagen nem jó.

 

ja, és amit mutattam előbb, oda meg nyilván be lehet tenni másik svgt urlencodeolva, az működik, szóval a logót is ki lehet cserélni :)

Bizonyos tag-ekre, amik a "replaced element" kategóriába tartoznak (mint pl. az img vagy iframe) nem alkalmazható az after. Más esetekben pedig az lehet még a probléma, hogy az after -al a létrejött pseudo element az eredeti elem tulajdonságait örökli, de ezt pl. egy display: inline-block; -al lehet orvosolni ;)

(replaced element az, amikor az elem tartalma külső forrásból jön, vagyis nem az eredeti document része)

En idaig jutottam. Jobb kontraszt, jobban kituno sajat/uj HSZ-ek.

Kepek kicserelese nem'tom mi fan terem, ha egyaltalan lehet olyat Stylusban. Nekem kulon tetszene az alt text, mert hozza a HUP-hoz illo 90's stilust. :D

CK code block editalaskor picit fura igy, mert valahonnan orokli a "sajat user" hatteret, de en sajnos elvesztem a CKeditor "karacsonyfaban" es rahagytam.
 

all {
	background: #24262b !important;
	color: white !important;
}
html[data-dmu-mode="dark"] body {
	--dm-background: #111;
	--dm-color: #e0e0e0;
	--dm-dcolor: #303030;
	--dm-hcolor: #FFFFFF;
	--dm-link-hover: #C0C0F0;
	--dm-d0-bg: #202226;
	--dm-d1-bg: #222;
	--dm-d1-bg-hl: #454545;
	--dm-d1-br-hl: #333;
	--dm-d1-br: #454545;
	--dm-d2-bg: #354840;
	--dm-d2-br: #505050;
	--dm-d3-bg: #909090;
	--dm-d3-br: #A0A0A0;
	--dm-hl-active: #C0C0F0;
	--dm-d0-bg-hl: #353535;

	/*background-color: var(--dm-background);*/
	color: var(--dm-color);

	/*	--ck-color-list-button-hover: black;
	--ck-color-button-default-hover-background: white;*/
}

html[data-dmu-mode="dark"] #block-hup-theme-content article.new {
	background-color: #222 !important;
}

html[data-dmu-mode="dark"] #block-hup-theme-content .comment_info_wrapper {
	background-color: #222 !important;
}

/* forum topics */
html[data-dmu-mode="dark"] .view-tracker table tr {
	background-color: var(--dm-background) !important;
}

/* footer */
html[data-dmu-mode="dark"] footer[role="contentinfo"] .region-footer {
	background-color: var(--dm-d1-bg);
	border-color: var(--dm-d2-br);
}

/* code block */
html[data-dmu-mode="dark"] .hljs {
	background-color: var(--dm-background);
}

/* cke */
html[data-dmu-mode="dark"] .ck {
	--ck-custom-background: var(--dm-d1-bg);
}

/*
html[data-dmu-mode="dark"] .ck.ck-button:not(.ck-disabled):hover .ck-icon {
	background-color: var(--dm-d1-bg) !important;
}
*/
html[data-dmu-mode="dark"] .ck.ck-toolbar {
	background-color: var(--dm-d1-bg) !important;
}


html[data-dmu-mode="dark"] .ck.ck-editor__editable.ck-focused:not(.ck-editor__nested-editable) {
	border-color: var(--dm-d1-br);
}


/* Hide the tracking protection notification banner */
.smartblock-placeholder-wrapper {
	display: none !important;
}