PDA

Archiv verlassen und diese Seite im Standarddesign anzeigen : Dark Mode?


w0mbat
2021-05-25, 01:06:20
Hi, da ich gerne auch noch abends im Bett etwas im 3DC surfe, vermisse ich schon eine ganze Weile einen Dark Mode. Kann man sowas as theme anbieten?

Leonidas
2021-05-25, 05:33:59
Ich weiss nicht, wie einfach so was zu erstellen ist? Kann ich das im internen Menü selber erreichen @ Sephi?

AnnoDADDY
2021-05-25, 08:16:31
Ich habe bei mir im Firefox ein Addon, das zumindest unter der mobilen Ansicht vernünftig aussieht.

Rooter
2021-05-25, 18:28:47
Ihr habt mal einen Pink-Mode hingekriegt, warum sollte dann ein Dark-Mode ein großes Problem sein?
Müsste man natürlich testen aber die Sychtels helfen dabei doch gerne. :smile:

MfG
Rooter

Gebrechlichkeit
2021-05-25, 19:13:58
W10 "night mode" aktivieren? Oder flux installieren. Als addon kann ich nur einen "Website Dimmer (https://gifyu.com/image/Dfnx)" empfehlen, die dark mode addon sind allesamt muell. Mit der Zeit konnte man keine Seite mehr normal aufrufen ohne eine gewisse verlangsamung, delay.

BTB
2021-05-25, 19:15:32
Gibt doch sicher eine Million Designs zum installieren.

MiamiNice
2021-05-25, 19:16:22
Ich weiss nicht, wie einfach so was zu erstellen ist? Kann ich das im internen Menü selber erreichen @ Sephi?


Das alte Forum hat sicherlich einen eigenen dunklen Theme. Müsste man, imo, nur freigeben damit es die User auswählen können.

w0mbat
2021-05-25, 23:15:37
W10 "night mode" aktivieren? Oder flux installieren. Als addon kann ich nur einen "Website Dimmer (https://gifyu.com/image/Dfnx)" empfehlen, die dark mode addon sind allesamt muell. Mit der Zeit konnte man keine Seite mehr normal aufrufen ohne eine gewisse verlangsamung, delay.
Ich nutze redshift auf Linux, weiße Seiten sind trotzdem sehr hell.

Platos
2021-05-26, 02:25:26
Sieht bei mir so aus (ist nicht fertig [siehe oben im Bild] und ich habe nie weiter gemacht;D):

https://abload.de/img/3dcenterdark_11pj0h.png

Und so: https://abload.de/img/3dcenterdark_2fhkwz.png

Und so: https://abload.de/img/3dcenterdark_3ynkxl.png

Wie gesagt, ist nicht fertig, aber egal, die obere Leiste gucke ich nie an. Es fällt mir eig. nie neagtiv auf. Ich scrolle eh immer gleich runter zum Text bzw. schaue auf das Textfeld etc.

Dark-Mode Addons für Firefox sind alle kacke. Die funktionieren nie richtig und wenn, dann ist mir die Schrift meistens zu blendend (der Hintergrund zwar dunkel, aber die Schrift blendet dann)

Aber abgesehen davon, dass es oben noch nicht fertig ist, gefällt mir das Design. Also falls sich optisch jemand was abgucken will, bitte :)

jiggawatz
2021-05-26, 03:23:47
mehr oder weniger wie @platos = nicht weiter gemacht

auf firefox mittels stylus


/* forum */
div[id^="post_mess"] {font-size:11px !important;
font-family:arial !important; color: #d20000;
line-height:15px !important;
margin:0px 55% 0px 3% !important; background-color:black;
padding:15px;}

div[id^="post_mess"] > a {color:#56e356}

.alt1, .alt1 .time {background-color:black; color:#b40000;}

.alt1 a:link {color:hsl(49, 68%, 47%)}
.alt1 a:visited {color:rgb(78, 116, 218)}

.signature {font-size:11px; font-family:arial}

[valign="top"] > .alt2, .bigusername {background-color:black; color:#b40000 !important;}

.alt2, .alt2Active { background: #242424;}

.bigusername {color:#716ee3 !important;}
.thead { background: #815F34 !important;}
.smallfont {color:red;}
.threadstarter {color:orange !important;}

Platos
2021-05-26, 03:51:00
Ja, also falls jemand den Code will (keine Garantie, dass der auch bei anderen funktioniert und ich erhebe keinen Anspruch auf guten/effizienten code oder ähnliches).

Für die Hauptseite(https://www.3dcenter.org/): /*Webseitenhintergrundfarbe*/
#wrapper #container #center #squeeze .content-corner {
background: #262626;
}
/*Webseiten-und Tabellenschriftfarbe*/
body {
color: #d3d3d3;
}
/*Tabellenzeilenhintergrundfarbe Zeile 2*/
.content-corner table.news .cell2 {
background: #393535;
}
/*Tabellenspaltentitelhintergrundfarbe*/
.content-corner table.news thead, table.news .first-column {
background: #393535;
}
/*Tabellenspaltentitelschriftfarbe*/
thead th {
color: #c3c3c3
}
/*Intel Schriftfarbe Tabelle*/
.highlight-blue {
color: #2c6ac1;
}
/*AMD Schriftfarbe Tabelle*/
.highlight-red {
color: #bb0000;
}
/*Linkfarbe*/
.content-corner .content a[href^="https://"] {
color: #0033cc;
}
/*Linkfarbe 2*/
.content-corner .content p a {
color: #0033cc;
}
/*Linkfarbe beim Drüberfahren*/
a:hover {
color: #0011cc;
}
/*Hintergrundfarbe Orange*/
#wrapper #container .breadcrumb, #wrapper #container, #wrapper #container #center #squeeze .content-left-corner, #wrapper #container #center #squeeze .content-right-corner {
Background:#c87a27;
}
#wrapper #container #header #logo-floater .section-logo {
Background: transparent url(https://abload.de/img/3dcenterc87a2780jg4.png) no-repeat 0 0;
}
/*Artikeltitelschrfitfarbe*/
.content-corner h2 a:active, .content-corner h2 a:visited, .content-corner h2 a:hover, .content-corner h2 a:link {
color: #c3c3c3;
}
/*Verlinkungsfarben*/
a:link, .content-corner .content a[href^="https://"], .content-corner .content p a {
color: #5189d7;
}


Für's Forum (https://www.forum-3dcenter.org/vbulletin/):

/*Forum Spaltenhintergrundfarbe 1&2*/
.alt1, .alt1Active, .alt2, .alt2Active, #container {
Background: #393535;
color: #c3c3c3;
}
/*Orange Farben*/
.tcat, #container #header #logo-floater {
Background: #c87a27;
}
.thead {
background: #c87a27;
}
.time {
color: #c3c3c3;
}
.page, #container .content-corner {
background: #262626;
}
/*Verlinkungsfarben Blau*/
a:link, body_alink {
color: #5189d7;
}
a:hover, a:active, body_ahover {
color: #bb0000;
}
/*Linienfarbe um Tabellenzellen*/
.tborder {
background: #262626;
border: 1px solid #0d0d0d;
}
a.bigusername:link {
color: #d3d3d3;
}
/*Zitatkastenfarbe*/
.alt1 .QuoteBorder {
background-color: #131313;
border: 1px solid #0d0d0d;
}

sChRaNzA
2021-05-26, 14:32:19
Mal spaßeshalber angenommen ich wüsste jetzt nicht was ich mit dem Code machen soll um das zum Laufen zu bekommen… Was müsste ich denn da machen ? :D

jiggawatz
2021-05-26, 15:48:26
Mal spaßeshalber angenommen ich wüsste jetzt nicht was ich mit dem Code machen soll um das zum Laufen zu bekommen… Was müsste ich denn da machen ? :D
einfach Stylus runterladen (Firefox; bzw was auch immer chrome nutzt = custom CSS suchen) und copypasta.

zuerst erstellen dann copypasta:
(youtube videos gibt's sicher auch)

sChRaNzA
2021-05-26, 16:09:04
Alles klar. Danke.

Platos
2021-05-26, 17:17:30
Geht auch bei Firefox direkt mittels userContent.css in Firefox.

Aber ich mag ehrlich gesagt Addons lieber (sofern das jeweilige Addon nicht ressourcenfressend ist). Denn bei denen kann man normalerweise per Schalter ein- und ausschalten. Bei Firefox direkt geht es etwas umständlicher.

Gebrechlichkeit
2021-05-26, 21:33:05
Ich nutze redshift auf Linux, weiße Seiten sind trotzdem sehr hell.

Damit habe ich keine Probleme bisher gehabt. Individuell einstellbar. 0% bis 100%.
https://chrome.google.com/webstore/detail/sites-dimmer-sharp-bright/agnbniclhlfikoejdpdhkbaabginadlf

Firefox https://mehmetb.github.io/dimmer/

https://s3.gifyu.com/images/2021-05-26_21-01.md.png (https://gifyu.com/image/DDql)
https://s3.gifyu.com/images/2021-05-26_21-29.md.png (https://gifyu.com/image/DDqn)

Rooter
2021-05-26, 21:49:37
Und so: https://abload.de/img/3dcenterdark_3ynkxl.pngDie Smileys müssten schon mal auf echte Transparenz umgebaut werden, damit das nach was aussieht. :smile:

MfG
Rooter

Platos
2021-05-26, 22:40:16
Wie geht das denn?

Aber wie gesagt, hab's halt nie beendet das ganze.

Sephiroth
2021-05-26, 23:12:58
Ein paar schöne Beispiele, Danke. Es gibt auch eine Variante von Blade II von vor 5 Jahren, siehe 10976359 bzw. https://userstyles.org/styles/125745/3dcenter-dark

Gerne nehme ich eine Variante mit rein. Vorschlag: baut an den Varianten weiter und dann wird abgestimmt, welche offiziell eingebunden werden soll.

Die Smileys müssten schon mal auf echte Transparenz umgebaut werden, damit das nach was aussieht. :smile:
ja, nicht nur die ... die weißen ränder in den alten grafiken sind im dark mode doch recht häßlich :<

jiggawatz
2021-05-27, 03:59:05
na gut. da ich sowieso schon laenger vor hatte meins zu beenden (wegen des Hintergrunds), hier mein, mehr oder weniger, finales Ergebnis:
Ich versteh nicht wieso die meisten dark themes weiszen Schriftzug nutzen, aber jedem das Seine. Mir ist das zu aggressiv.

wem der kleine Schriftzug stört:
ist das in Stylus unter:
div[id^="post_mess"]
) font-size
) line-height
zu ändern

mit Platos Hilfe wird hier sicher was anstaendiges herauskommen.
Feedback mehr oder weniger willkommen (bin aber kein CSS Pro).

Wer sich was eigenes zusammen basteln will (@ Farben) hier ein kurzes Video:
https://vimeo.com/555493310
passw: dddddddddddd


/* forum --- Schriftzug Forum
font-size = px ; = = = = = = = = = = groesze
line-height = px ; = = = = = = = = = zeilengroesze
margin = oben/rechts/unten/links = = Breite des Textes
color: = = = = = = = = = = = = = = = Farbe des Textes
*/
div[id^="post_mess"] {font-size:11px !important;
font-family:arial !important; color: #d20000;
line-height:15px !important;
margin:1% 55% 0% 3% !important; background-color:black;
padding:5px;}

div[id^="post_mess"] > a {color:#56e356}

.alt1, .alt1 .time {background-color:black; color:#b40000;}

.alt1 a:link {color:#c9ab26}
.alt1 a:visited {color:#4e74da}

.signature {font-size:11px; font-family:arial}
.signature a {font-size:11px; font-family:arial}

[valign="top"] > .alt2, .bigusername {background-color:black; color:#b40000 !important;}

.alt2, .alt2Active { background: #242424;}

/* Zitate */
.quoteContainer.alt2.QuoteBorder {background: #212121 !important; color: #c70f0f !important;
font-size: 11px !important;}
.quoteContainer.alt2.QuoteBorder a:link {color: hsl(242, 28%, 49%) !important;}

.bigusername {color:#716ee3 !important;}
.thead { background: #815F34 !important;}
.smallfont {color:#9c0000;}
.threadstarter {color:rgb(5, 224, 29) !important;}

/* linkliste links subscription.php */
.alt2 a:link {color:#716ee3 !important;}
.alt2 a:visited {color:#4dc76e !important;}

.page {
background-color: #171717 !important;
color: #000000 !important;
}

/*
.bg-container-bottom-left {background-color: black !important;}
*/

.time {color: #ad5f5f;}

.alt2 .smallfont {color:#de5f5f !important;}

a:link {color: #c9ab26 !important;}
a:visited {color: #4c74e1 !important;}
td[id^="td_post"] > div.smallfont {color:#674300 !important;}
table[id^="post"] > tbody > tr > td.thead {color: #000 !important;}

div.content-corner > form > table > tbody > tr > td {background-color:#b26000 !important;
color: red !important;}
div.content-corner > form > table > tbody > tr > td a:link {color: #1d3b8b !important;}

div.content-corner {background-color:black !important;}
#container .content-corner {background: #000000 !important;}
.panel {
background: #191919;
color: #9c4b4b;
padding: 10px;
border: 2px outset;
}
fieldset legend {color: #9c4b4b !important;}
.panel a:link {color:#4e74da !important;}
.panelsurround {
background: #232323;
color: #9a2121;
}

.alt1Active {background: #1c1c1c !important;}
td.tcat a:link {color: black !important;}
img.user-image {background: #e7e7e7 !important;}
/*.inlineimg {background: transparent !important}
.alt2 img {background: transparent !important;}
*/

#vB_Editor_001_textarea {background: black !important; color: #ad8383 !important;}
#vB_Editor_001_sizeDescriptor {color: #131f14 !important;}

div[style^="white-"] a:link {color: orange !important;}
span[style^=white-] a:link {color: #7494e9 !important;}
/*span[style^=white-] a:link {color: #4e74da !important;}
*/

select[name="forumchoice[]"] {background: black !important;
color: red !important; height: 522px !important;}
select[name="prefixchoice[]"] {background: black !important;
color: red !important; height: 377px !important;}

textarea[id^="vB_Editor_QE"] {background:black !important; color: #ad8383 !important;}

div.signature * {color: #888d20 !important;
}
td.alt1 > div.signature {height:1% !important;}



na gut, die Suche habe ich auch etwas angepasst. Ich habe nie verstanden wieso die Unterforen Felder immer so klein waren/sind.

Es scheint als ob Unterschriften mit der offiziellen Skin gefressen werden. Wobei bei manchen
ist das vielleicht willkommen ��

jiggawatz
2021-05-27, 04:27:44
Damit habe ich keine Probleme bisher gehabt. Individuell einstellbar. 0% bis 100%.
https://chrome.google.com/webstore/detail/sites-dimmer-sharp-bright/agnbniclhlfikoejdpdhkbaabginadlf

Firefox https://mehmetb.github.io/dimmer/

https://s3.gifyu.com/images/2021-05-26_21-01.md.png (https://gifyu.com/image/DDql)
https://s3.gifyu.com/images/2021-05-26_21-29.md.png (https://gifyu.com/image/DDqn)
cooles addon. hab's in Brave probiert.
das Dimmen ist schrecklich aber der Inverter ist gut.

Meine Augen strengen sich bei dem Gedimmten mehr an als ohne dem. In Windows hab ich sogar tagsueber das Night light an. Wird wohl eher mehr Sinn machen ganz Windows zu dimmen (Grafiktreiber) um nicht immer diese verschiedenen Kontraste zu haben.

Platos
2021-05-27, 04:39:20
@jiggawatz: Hättest du noch ein Screenshot davon ?


Ein paar schöne Beispiele, Danke. Es gibt auch eine Variante von Blade II von vor 5 Jahren, siehe 10976359 bzw. https://userstyles.org/styles/125745/3dcenter-dark

Gerne nehme ich eine Variante mit rein. Vorschlag: baut an den Varianten weiter und dann wird abgestimmt, welche offiziell eingebunden werden soll.


ja, nicht nur die ... die weißen ränder in den alten grafiken sind im dark mode doch recht häßlich :<

Könntest du mir sagen, welche weissen Ränder du meinst? Also in welchem der 3 Bilder?

Ich schau' mir mal an, was sich noch so machen lässt. Ich habe ja noch einige Buttons, die ich nie angefasst habe, ein paar sonstige Schriften/boxen, die noch "schneeweiss" sind (ich nutze ja für die Schrift bewusst ein sehr helles "grau", da ich schneeweiss in Darkmodes für extrem unpassend finde (blendet).

Und ja, ganz oben rund um's 3D Center Logo ist es noch das alte Orange und die Leiste ganz oben ist auch noch hässlich :D

Das 3D Center Logo auf der Hauptseite habe ich übrigens leicht abgeändert, da das Originale so einen komischen weissen Rand hatte. Das Logo auf der Hauptseite von mir sieht auf jeden Fall nicht gerade Final aus^^ Und bei Logos muss natürlich dann jemand "absegnen", wie das aussehen soll. Auch wo man das Logo speichert (ich hab das ja einfach bei nem Filehoster hochgeladen).

Ich empfehle übrigens, das jetzt nicht in den nächsten 3 Tagen durchzuboxen mit dem Darkmode, also bisschen Länger Zeit lassen kommt ja jetzt nach all den Jahren auch nicht drauf an^^

Sephiroth
2021-05-27, 19:52:05
Könntest du mir sagen, welche weissen Ränder du meinst? Also in welchem der 3 Bilder?
Hier ein paar Beispiele, schau sie dir mit einem dunklen Hintergrund an und die wirst sehen, sie haben alle nicht-transparente weiße Ränder und den sieht man im dark mode imho deutlich.

https://www.forum-3dcenter.org/vbulletin/images/3dc/smilies/common/bluebiggrin.gif
https://www.forum-3dcenter.org/vbulletin/images/3dc/smilies/common/biggrinflip.gif
https://www.forum-3dcenter.org/vbulletin/images/3dc/smilies/ugly/ugly.gif
https://www.forum-3dcenter.org/vbulletin/images/statusicon/forum_new.gif
https://www.forum-3dcenter.org/vbulletin/images/statusicon/forum_old.gif

Platos
2021-05-27, 21:34:05
Ach so, du meinst die Smileys.

Ja, also es ist so, das sind Grafiken. Wenn ich die verändere, kann ich sie nur auf z.B nem Filehoster reuploaden. Die Grafiken sind alle irgendwo auf eurem Server.

Das gilt übrigens auch für die Leiste ganz oben (3DCenter, 3DTools etc.). Das sind anscheinend Grafiken (also die Hintergründe), da kann man nicht einfach die Farbe ändern. Da muss man die Grafik ändern (Das ginge ja noch). Aber dafür müsste man wie gesagt zahlreiche Grafiken uploaden und irgendwo bei einem Filehoster bunkern, der vlt. in ein paar Jahren alte Dateien löscht (wer weiss).

Das Logo natürlich auch. Und das Logo hat übrigens eine weisse Umrandung bei der 3 und dem D. Das sieht auf dunkleren Hintergründen ziemlich komisch/schlecht aus (deswegen habe ich da ein anderes). Das ist dann aber wieder so ne Sache. Für mich Privat kann ich ja auch HansHeiri als Logo schreiben, aber wenn das "offiziell" sein soll, muss da gerade bei Logos vlt. jemand dahinter, der hier was zu sagen hat ^^ Ich kann ja schlecht entscheiden, wie euer Logo aussehen soll.

Also grundsätzlich möglich, aber als User eher schwierig.

jiggawatz
2021-05-27, 21:43:02
war schon beim ersten Mal stutzig wovon @Sephiroth genau redet. Denn soweit
ich das sagen kann, seh ich keine weißen Ränder. sind ja alle gifs also alles kein Problem.

siehe anhang

Platos
2021-05-27, 21:47:22
Beim gelben Smiley sieht man aber den weissen Rand in deinem Bild z.B. Musst mal nah ranzoomen.

Leonidas
2021-05-28, 05:19:14
Ein paar schöne Beispiele, Danke. Es gibt auch eine Variante von Blade II von vor 5 Jahren, siehe 10976359 bzw. https://userstyles.org/styles/125745/3dcenter-dark

Gerne nehme ich eine Variante mit rein. Vorschlag: baut an den Varianten weiter und dann wird abgestimmt, welche offiziell eingebunden werden soll.

Wundervoll, danke!

Ich werde zwar im Leben nie Dark-Mode nutzen, aber wenn man auf einfachen Weg den Support dafür bieten kann - gern. Den Pink-Mode haben wir doch glaube ich auch immer noch mitlaufen ;)

N0Thing
2021-05-28, 16:03:51
Ich habe damals eine Weile den Dark Mode von Blade II genutzt, bin aber am Ende doch wieder auf die klassische Ansicht umgestiegen. Zum einen haben mich die Umrandungen bei den Smileys und anderen Elementen gestört und das tiefe schwarz als Hintergrundfarbe für die Texte hat das Lesen anstrengender gemacht. Ich würde bei einem Dark Theme daher lieber ein dunkles Grau oder eine zum orange passende dunkle Komplementärfarbe als Texthintergrund bevorzugen.
Als ein Beispiel verweise ich mal auf das alte Counter-Strike-Forum: https://forum.mods.de/

Als Theme für Mobilgeräte wäre schwarz für OLED-Nutzer natürlich besser.

Platos
2021-05-28, 16:26:49
@Sephiroth: Was soll man denn mit all den Grafiken machen? Man muss die Grafiken alle verändern, die kann man meinem Wissen nach nicht mittels CSS ändern (allerdings austauschen mittels CSS). Und wie gesagt, die liegen alle auf eurem Server (man kann sie zwar runterladen, aber andere hochladen geht natürlich nur auf Seiten wie "abload.de" etc. als User).

Also die Leiste ganz oben, Smileys und sonstige Symbole und übrigens auch der Hintergund, hier beim Schreiben (Das ist so ein gewürfelter Hintergrund, das ist auch eine Grafik).

Und auf der Hauptseite ist übrigens auch so ein Gittermuster.

Ich denke, zuerst muss man mal das Lösen und sehen, wie man das macht. Das sind nämlich die Hauptbaustellen. Der Rest ist Kriemskrams. Aber die Webseite hat sehr viele Grafikelemente anscheinend.

Ps. Das 3D Center Logo ist im Forum so wie ich das sehe nicht mittels CSS austauschbar. Das geht lustigerweise auf der Hauptseite, aber im Forum geht das anscheinend nicht.