Mode nuit

[legired]

Salut,

J'ai effectuer une recherche et je n'ai pas trouver de sujet parlant de cette proposition, donc je me permets de le posté, il serait sympa d'avoir un "dark mode" ou "mode nuit" sur le forum, afin que cela soit moins agressif pour les yeux, surtout en fin de journée

 

Je ne sais pas si un option existe déjà pour cela, si c'est le cas, je n'ai pas trouvé 

[Motard Geek]

Salut,

ça m'a déjà été demandé sur le forum WE are FPV et ce n'est malheureusement pas possible  

[Vector]

Salut @legired tu pourrais essayer par exemple LightBulb :

Modifié (le) Avril 30, 2020 par Vector

[legired]

Super merci, c'est dommage que cela ne soit pas possible, car quand tu passe d'un site ou tu a le mode dark au forum, même avec un logiciel type f.lux, ça pique pas mal, surtout quand t'es sensible des yeux comme moi 

Modifié (le) Avril 30, 2020 par Yo'
Suppression de la citation du message précedent.

[pascal_lb]

Il y a 1 heure, legired a dit :

surtout quand t'es sensible des yeux comme moi 

Tu as essayé les lunettes de soleil

[fran6p]

@legired

Avec Firefox (existe aussi pour Chrome) , j'utilise une extension (activable / désactivable à souhait ) : https://midnight-lizard.org/home

[legired]

Yes justement, je l'ai vue dans le poste partager par Vector et c'est celle que j'ai fini par prendre car Stylish avait l'air vachement compliqué ^^

[thib3113]

personnellement je te conseille stylish ( chrome / firefox ), tu as toute une liste de style ici : https://userstyles.org/
Bon, là le site usertstyles galère donc compliqué de regarder ...

l'avantage, c'est que tu peux ajouter ton CSS sur n'importe quel site, et donc modifier facilement n'importe quelle couleur / fonts / forme / etc (ou presque), tu peux complétement redisigner un site, mais seulement pour toi avec l'extension .

Sinon j'ai vu ce thème : https://invisioncommunity.com/files/file/9377-dark-theme/ qui selon l'auteur est complément en CSS, donc que tu pourrais mettre dans stylish, le soucis, c'est qu'il semble que l'on ne puisse pas télécharger les styles si facilement (il faut peut être avoir une license IPB ?) .

Si tu as besoin d'aide pour de petites modifications CSS, je peux t'aider, sinon il faudra apprendre le fonctionnement   ( tuto openclassroom ) .

PS : les autres extensions fonctionnent de la même façon, en changeant le CSS .
PS2 : modifier le HTML / CSS sur ton poste ne modifiera pas celui des autres, c'est juste pour toi . ( c'est pour moi totalement légal, mais certaines personnes considèrent ça comme du hack, j'ai eu un site qui m'a sortie ça, du coup je préfère prévenir )
PS3 : IPB étant un module de forum payant, il est assez rare de trouver des choses gratuites allant avec ... ce ne sera donc pas simple de trouver un thème déjà crée, gratuitement ... 

Modifié (le) Mai 4, 2020 par thib3113

[Motard Geek]

Le thème est gratos, jpeux donc le diffuser si ça vous intéresse de regarder les feuilles de style  

Dark Theme 1.0.1.zip

[thib3113]

bon, c'est un début, mais ce n'est pas encore ça, et il faudrait l'adapter pour aller plus loin .

voici le css que j'ai récupéré dans le zip (j'avoue ne pas avoir fouillé, j'ai juste pris le contenu du xml : 

si quelqu'un veut la modifier 

Révélation

/**
 * This file is for your custom CSS.
 * This file is not modified or overwritten during upgrades
 */
 .ipsApp .ipsNotificationCount, .ipsBadge_positive, .cStreamFilter > li > a.cStreamFilter_active, .ipsTooltip, .cProfileRepScore_positive, .ui-datepicker-today, .ipsComposeArea_editorPaste, .ipsItemStatus.ipsItemStatus_large, .ipsItemStatus.ipsItemStatus_large.ipsItemStatus_read, .cCalendar td.cCalendar_today, .cCalendarWeek div.cCalendar_today, .cGalleryExif_data li span, .ipsTooltip {
    background: #6d96c0;
}
#ipsMultiQuoter, .ipsWidget_inner .ipsPad, ul:not(.ipsMenu_keyNav) .ipsMenu_item:not(.ipsMenu_itemClicked):not(.ipsMenu_itemDisabled) a:not(.ipsMenu_itemInline):hover, .ipsMenu_item[data-selected] a, .ipsMenu_item[data-selected] span, .ipsMenu_item.ipsMenu_hover, .ipsCommentCount, a:hover.ipsSideMenu_item, .cPollVoteBar, .commentContent, .ipsMenu_headerBar, .ipsMenu_footerBar, .ipsDataList.ipsDataList_zebra .ipsDataItem:not(.ipsDataItem_selected):not(.ipsModerated):not(.ipsDataItem_new):not(.ipsDataItem_success):not(.ipsDataItem_warning):not(.ipsDataItem_error):not(.ipsDataItem_info):not(.ipsDataItem_status):nth-child(even), .ipsTable_zebra tbody tr:nth-child(even):not(.ipsTable_highlight):not(.ipsModerated), .cCalendar td.cCalendar_nonDate, .ipsSticky, .ipsImageAttach_thumb, .ipsDialog_title, .ipsDialog > div, .cBestAnswerIndicator_off, #elDownloadsSubmit .ipsAttachment_dropZone {
    background: #121823;
}
.ipsMenu, .ipsBox:not(.ipsBox_transparent):not(.ipsModerated), .ipsEmbeddedOther, .cStreamFilter, #elSearchWrapper.cSearchExpanded, .ipsTabs_panel, #elProfileStats, .ipsTable.ipsMatrix thead th, .ipsPad, .ipsSideMenu_item:not(.ipsSideMenu_itemActive) a:hover, a.ipsSideMenu_item:not(.ipsSideMenu_itemActive):hover, span.ipsSideMenu_item:not(.ipsSideMenu_itemActive):hover, .ui-datepicker, .cGalleryLightbox_info, .ipsSelectTree_placeholder, .ipsSelectTree_nodes, .ipsSelectTree, .ipsPageHead_barText, .cke_wysiwyg_div, #elLeaderboard_app, #elLeaderboard_time {
    background: #171D28;
}
.ipsNavBar_secondary, .ipsDialog > div, .ipsDrawer_list[data-action="back"] a, .ipsComposeArea_dropZone, .ipsTable th, #elBlogHeaderStats {
    background: #1A212D;
}
.ipsImage[data-src]:not([data-loaded]), .ipsComposeArea_editor, .ipsComposeArea_dummy, .ipsDrawer_menu, .ipsDrawer_close {
    background: #131822;
}
.cMessage_active {
    background: #121823 !important;
}
.ipsType_pageTitle, .ipsType_sectionHead, .ipsBreadcrumb > ul li a, .ipsBreadcrumb > ul > li, .ipsMenu_item > a:not(.ipsMenu_itemInline), .ipsMenu_item > span:not(.ipsMenu_itemInline), .ipsPager_type, .ipsPager .ipsPager_prev a:after, .ipsPager .ipsPager_next a:after, .ipsPager .ipsPager_prev a:after, .cStreamFilter h3, .ipsSideMenu_title, .ipsType_pageTitle, .ipsDialog_title, .ipsDialog_close, .ipsApp .ipsDataItem_selected, .ipsTabs_activeItem:hover {
    color: #fff;
}
.ipsStreamItem_snippet .ipsType_richText, .ipsComposeArea_dummy {
    color: #8D9AA6;
}
.ipsFieldRow_required {
    color: #6D96C0;
}
.ipsTooltip.ipsTooltip_bottom:after {
    border-color: transparent transparent #6D96C0 transparent;
}
.ipsTooltip.ipsTooltip_top:after {
    border-color: #6D96C0 transparent transparent transparent;
}
.ipsApp .ipsButton_link.ipsFollow, .ipsApp .ipsButton_link.ipsPromote {
    background: #1A212D;
    border: 1px solid #171D28;
    color: #677585;
}
html[dir="ltr"] .ipsFollow .ipsCommentCount:after {
    border-color: transparent #171D28 transparent transparent;
}
.ipsButtonBar .ipsButtonRow li > a, .ipsButtonBar .ipsButtonRow li > button, .ipsButtonBar .ipsButtonRow li > span, .ipsMenu_title, .ui-datepicker-header, .ui-datepicker td a:hover, .ipsButtonRow li {
    background: #121823;
    color: #fff;
}
.ipsFollow .ipsCommentCount {
    background: #171D28;
    color: #fff;
}
.ipsHovercard, #elSearchExpanded, .ipsAlert, .ipsAttachLink[data-fileid]:not(.ipsAttachLink_image), iframe[data-embedContent], #elGallerySubmit_imageUploader .ipsAttachment_fileList .ipsImageAttach {
    background: #1A212D;
    border: 1px solid #1A212D
}
iframe[data-embedContent].ipsEmbed_finishedLoading {
    background-color: #1A212D;
}
.ipsHovercard_stemTop .ipsHovercard_stem, .ipsHovercard_stemTop .ipsHovercard_stem:before {
    border-color: #1A212D transparent transparent transparent;
}
.ipsHovercard_stemBottom .ipsHovercard_stem, .ipsHovercard_stemBottom .ipsHovercard_stem:before {
    border-color: transparent transparent #1A212D transparent;
}
#elSearchExpanded .ipsMenu_title {
    background: #121823;
    border: 1px solid #121823
}
.ipsMenu.ipsMenu_bottomCenter:before, .ipsMenu.ipsMenu_bottomCenter:after, .ipsMenu.ipsMenu_bottomRight:before, .ipsMenu.ipsMenu_bottomRight:after, .ipsMenu.ipsMenu_bottomLeft:before, .ipsMenu.ipsMenu_bottomLeft:after {
    border-color: transparent transparent #1A212D transparent;
}
.ipsMenu.ipsMenu_topCenter:before, .ipsMenu.ipsMenu_topCenter:after, .ipsMenu.ipsMenu_topRight:before, .ipsMenu.ipsMenu_topRight:after, .ipsMenu.ipsMenu_topLeft:before, .ipsMenu.ipsMenu_topLeft:after {
    border-color: #1A212D transparent transparent transparent;
}
html[dir="ltr"] .ipsStream_withTimeline .ipsStreamItem.ipsStreamItem_contentBlock:before {
    border-color: transparent #1A212D transparent transparent;
}
html[dir="ltr"] .ipsStream_withTimeline .ipsStreamItem:after {
    border-color: transparent #1A212D transparent transparent;
}
html[dir="ltr"] .ipsCommentCount:after {
    border-color: transparent #121823 transparent transparent;
}
html[dir="ltr"] .ipsComposeArea_withPhoto .ipsComposeArea_editor:before {
    border-color: transparent #131822 transparent transparent;
}
.ui-datepicker th, .ipsPagination:not(.ipsPagination_mini) .ipsPagination_last a, .ipsPagination:not(.ipsPagination_mini) .ipsPagination_next a, .ipsDataList_readStatus .ipsDataItem:not(.ipsDataItem_unread):not(.ipsDataItem_selected):not(.ipsModerated), .ipsPagination.ipsPagination_mini a, .ipsButtonRow li > a, .ipsButtonRow li > button, .ipsButtonRow li > span, .ipsPagination:not(.ipsPagination_mini) .ipsPagination_prev a, .ipsPagination:not(.ipsPagination_mini) .ipsPagination_page a, .ipsPagination:not(.ipsPagination_mini) .ipsPagination_first a, .ipsSideMenu_itemActive a, a.ipsSideMenu_itemActive, span.ipsSideMenu_itemActive, .ipsSideMenu_withChecks .ipsSideMenu_item > input[type="checkbox"]:checked ~ a, .ipsSideMenu_withChecks .ipsSideMenu_item > input[type="checkbox"]:checked ~ span, .ipsSideMenu_withRadios .ipsSideMenu_item > input[type="radio"]:checked ~ a, .ipsSideMenu_withRadios .ipsSideMenu_item > input[type="radio"]:checked ~ span {
    background: #1A212D;
    color: #fff;
    text-shadow: none;
}
.ipsDialog .ipsDialog_loading {
    background-color: #1A212D;
}
.ipsMenu_headerBar, .ipsDrawer_itemParent > h4, .ipsDrawer_list > li > a:not(.ipsButton), .ipsDrawer_list > li:not(.ipsDrawer_itemParent) > a:not(.ipsButton) {
    border-bottom: 1px solid #1A212D;
}
.ipsDrawer_itemParent > h4, .ipsDrawer_list > li > a:not(.ipsButton), .ipsDrawer_list > li:not(.ipsDrawer_itemParent) > a:not(.ipsButton) {
    border-top: 1px solid #131822;
}
.ipsMenu_footerBar {
    border-top: 1px solid #1A212D;
}
.ipsTabs {
    border-top: 2px solid #1A212D;
}
.ipsMenu_sep, .ipsComposeArea_attachments {
    border-top: 1px solid #121823;
}
.ipsDataItem, .ipsApp .ipsButton_veryLight {
    border-color: #121823;
}
.ipsTabs_panels.ipsTabs_contained, .ipsBox.ipsModerated, .ipsTabs.ipsTabs_contained {
    border-color: #1A212D;
}
.ipsBox, .ipsMenu, .ipsStreamItem.ipsStreamItem_contentBlock, html[dir] .ipsButton_split > .ipsButton.ipsButton_link, html[dir] .ipsButton_split > li > .ipsButton.ipsButton_link {
    border: 1px solid #1A212D;
}
.cNexusPurchase .cNexusPurchase_image, .ipsNoThumb {
    background: transparent;
    border: 1px solid #1a212d
}
.ipsSelectTree {
    border: 1px solid #6D96C0;
}
html[dir="ltr"] .cMessage_members > ol > li {
    border-right: 2px solid #121823;
}
.ipsBadge_neutral, .ipsBadge_style6 {
    background: #fff;
    color: #121823;
}
.ipsApp .ipsButtonBar .ipsPagination .ipsPagination_page a, .ipsApp .ipsButtonBar .ipsPagination .ipsPagination_next a, .ipsApp .ipsButtonBar .ipsPagination .ipsPagination_prev a, .ipsApp .ipsButtonBar .ipsPagination .ipsPagination_first a, .ipsApp .ipsButtonBar .ipsPagination .ipsPagination_last a, .ipsTabs_activeItem {
    background: #111824;
    color: #fff;
    text-shadow: none;
}
html[dir="ltr"] .ipsReact_blurb:not(.ipsHide) + .ipsReact_types {
    border-left: 1px solid #121823;
}
.ipsButtonBar .ipsPagination .ipsPagination_page.ipsPagination_active a, .ipsPagination .ipsPagination_page.ipsPagination_active a, .ipsTable.ipsMatrix .ipsMatrix_subHeader {
    background: #6d96c0;
    color: #fff;
}
.ipsComment:not(.ipsModerated) .ipsComment_header {
    background: #111824;
    border-top: 1px solid #111824;
}
.ipsItemStatus {
    width: 40px;
}
.ipsItemStatus.ipsItemStatus_read {
    opacity: 0.1
}
.ipsRepBadge_positive, .ipsRepBadge_positive:hover {
    color: #6d96c0 !important;
}
.ipsCommentUnreadSeperator {
    border-color: #6d96c0;
}
.ipsStream .ipsStreamItem_contentType {
    background: #1A212D;
    border: 2px solid #1A212D;
}
#elSearchExpanded .ipsSideMenu_list {
    background: #1A212D;
    border: 1px solid #1A212D;
}
.ipsReact_button {
    filter:opacity(0.3);
}
.ipsQuote {
    background: #171D28;
    border-radius: 3px;
    border-width: 1px;
    border-style: solid;
    border-color: #677585;
}
.ipsQuote_citation {
    background: #171D28;
    color: #677585;
    border-radius: 3px;
}
.ipsQuote .ipsQuote_citation a {
    color: #677585;
}
.ipsReact_reactCount {
    border: 1px solid #111824;
}
.ipsReact_reactCount > a > span:last-child {
    background: #111824;
    color: #fff;
}
.ipsReact_reactCount, .ipsReact_reactCount > a > span, .ipsReact_types ul {
    background: #111824;
}
body.ipsApp_noTouch .ipsReact_types:hover .ipsReact_button, body:not(.ipsApp_noTouch) .ipsReact_types.ipsReact_types_active .ipsReact_button {
    background: #111824;
}
.ipsReactOverview ul img {
    border: 2px solid #111824;
}
.ipsDataItem_subList {
    display: none;
}
.ipsImage_thumbnailed {
    border: none;
}
.ipsCustomInput > span {
    background: #1A212D;
    border-color: #6D96C0;
    opacity: 0.2;
}
.ipsApp .ipsField_autocomplete, .ipsApp textarea, .ipsApp input[type="text"], .ipsApp input[type="password"], .ipsApp input[type="datetime"], .ipsApp input[type="datetime-local"], .ipsApp input[type="date"], .ipsApp input[type="month"], .ipsApp input[type="time"], .ipsApp input[type="week"], .ipsApp input[type="number"], .ipsApp input[type="email"], .ipsApp input[type="url"], .ipsApp input[type="search"], .ipsApp input[type="tel"], .ipsApp .ipsField_dummy {
    background: #131822;
    color: #677585;
    border: 1px solid #171D28;
}
.ipsTruncate + .ipsTruncate_more {
    color: #677585;
    font-size: 13px;
    width: 100%;
    text-align: center;
    margin-bottom: 5px;
}
body.unloaded #ipsEmbedLoading {
    background: transparent;
}
@keyframes dummy_anim {
    0% {
        background-color:#1A212D;
        /* set the starting colour */
    }
    50% {
        background-color:#212a39;
        /* slightly lighter/darker colour to create pulsing effect */
    }
    99% {
        background-color:#1A212D;
        /* return to starting colour */
    }
}

Il ne doit pas y avoir trop de modifications, on à déjà une référence des couleurs, et la structure globale . 

[thib3113]

si certains sont motivés, je l'ai mis dans un repo github : https://github.com/thib3113/lesimprimantes3d.fr-darktheme , je l'ai convertis en scss (si tu sais faire du css, ça sera simple à faire) . 

Et je l'ai mis ici pour l'installer facilement avec stylish (j'ai rien modifié, donc pas très utilisable) : https://userstyles.org/styles/183250/forum-lesimprimantes3d-fr-dark-theme

[thib3113]

@Motard Geek est ce que par hasard tu aurais un style avec un template sous la main ? (soit le thème de base, soit le premier thème gratuit qui ne dit pas être full css)

Il semble y avoir un système de variables sur IPB, mais je sais pas trop où est ce qu'il les mets, et à quoi ressemble leur système . 

[Motard Geek]

Le thème natif qu'on utilise est intégré au cœur du moteur du forum. Je ne peux exporter que les paramètres de base (en pièce jointe mais ça ne t'aidera pas je pense).

4_4_Default.xml

 

En back office tu peux tout éditer, soit facilement :

Soit dans le code avec un IDE intégré :

[thib3113]

@Motard Geek hum, yep, les variables je les aient dans le thème ...

Dans ton template, je pense que ça serait dans CSS ? ( je pense que c'est pour ça, que le thème ne fonctionne pas top de base, je pense qu'il configure des variables, mais je ne sais pas où)

[thib3113]

Bon le message précédent n'est pas partie ..

.
@legired j'ai corrigé quelques soucis avec le thème de base, et ça me semble sympatoche actuellement, si ça t’intéresse, ou n'importe qui d'autres  .

Si vous voyez des soucis n'hésitez pas à me les remonter  .

[legired]

Salut,

 

Oh oui sympa effectivement ! ça sera plus propre que l'extension Midnight-Lizard 

Super boulot !

 

edit : Je viens de l'installer, ça a l'air pas mal, cependant je n'ai plus les sous catégories avec 

 

 

EDIT 2 : Dans la catégorie "Entraide : Questions/Réponses sur l'impression 3D"  il reste une barre blanche sur les votes de poste : 

Si je vois d'autres trucs j'editerai à nouveau  

 

Modifié (le) Mai 8, 2020 par legired

[thib3113]

j'ai corrigé les deux points, stylish devrait te dire qu'il y à une maj d'ici 20 minutes max (je dirais) (je ne sais pas exactement comment stylish gère les maj, si il fait ça tout seul ou pas) .

Juste pour info, il y à des moments, où je ne pourrais rien faire ...

par exemple, si dans mon éditeur j'écris en fond blanc et écriture noir : 

test

et bien tu le verras avec un fond blanc aussi,

j'ai vu ça, ici : 

et ici : 

un utilisateur qui à volontairement mis un fond blanc (ou alors c'est du copier / coller avec formatage) .

Je ne peux pas (ou ne sais pas), modifier ça .

Mais pour les gens en blanc, c'est le même soucis si j'écris en blanc avec fond noir
test
 

---

Niveau technique, j'ai mis en place un système de déploiement automatique, cad que si un jour je quitte le forum, n'importe qui peut modifier le code sur github, faire une demande de modification, et dans 20 minutes, elle sera dispo sur stylish . ( sauf si le système de déploiement automatique qui à un soucis dans le futur, mais là ce sera une autre histoire )

 

édit :

ah et pour info j'ai copié collé ton message dans une "issue" sur le projet, ça permet d'avoir un suivi pour les modifs ...

Car là par exemple, pour le soucis des sous catégories, c'était voulue dans le thème qu'elles soient cachées ... mais je ne sais pas pourquoi, donc si il faut, on aura le soucis inverse à un moment .

l'issue en question, si jamais : https://github.com/thib3113/lesimprimantes3d.fr-darktheme/issues/1 ( c'est juste au cas où, car je reprends tes mots, que tu ne soit pas surpris si ça te revient aux oreilles )

Modifié (le) Mai 8, 2020 par thib3113

[legired]

Ouais j'me douté que c'était une connerie du genre pour le fond blanc sur les textes  

[thib3113]

corrections de quelques couleurs et fonds (dans la page de profil principalement) .

Par contre, j'ai eu le cas de ce topic : 

Du coup, j'ai fait le choix, que si la couleur du texte est "#00000" ou "black" (donc une couleur noire pure quoi), ça ajoute un fond blanc ... 
c'est vraiment pas top ... très limité, et si la personne mets un fonds d'une autre couleur, ça foire tout ... mais au moins c'est lisible .
 

avant :

après : 

Modifié (le) Mai 8, 2020 par thib3113

[legired]

Effectivement c'est dommage, après j'pense pas qu'il soit possible d'avoir un truc a 100% clean c'est déjà vachement plus sympa comme ça pour moi  

[Ironblue]

En tout cas merci pour le boulot, j'avais essayée de le faire moi même mais j'ai jamais rien compris et j'ai vite laissée tombée.

[thib3113]

il y a 20 minutes, legired a dit :

Effectivement c'est dommage, après j'pense pas qu'il soit possible d'avoir un truc a 100% clean c'est déjà vachement plus sympa comme ça pour moi  

c'est ça ... 

Mais en gros, il faut essayer de penser aux autres ... cad que si tu forces une couleur, il faut penser que ça n'ira peut être pas chez tout le monde ... (ou alors il faut prévoir un constrate suffisant manuellement) ... bref, faut éviter de mettre des couleurs à la main xD ... même si ce sont les même que le site .

@Ironblue avec plaisir .

Et du coup, ce n'étais pas prévue, mais je l'utilise aussi maintenant 

[AmstelDam]

Salut @legiredc'était un copié/collé (il me semble) si j'ai bien compris de quoi tu parlais hahaha

[legired]

Le style à disparus de l'extension sur chrome 

[Ironblue]

il est toujours actif chez moi et référencé mais on le trouve pas quant on fait une recherche dans Stylish

https://userstyles.org/styles/183250/forum-lesimprimantes3d-fr-dark-theme