Flarum Loş - Gece Modu Özelleştirmesi

sezginyildirim

Twitter’dan esinlenerek düzenlenmiştir. Gece Modu eklentisi aktif olduğundan emin olun.

Eklentiyi yüklemek için

composer require fof/nightmode

CSS Özelleştirmesi

GitHub

sezginyildirim

Güncelleme

Eksik kalan yerler düzenlendi…

mekici

sezginyildirim body.dark .Hero-subtitle {color: #8899a6;}
flarumtr teması kullananlar için yukarıdaki kodu eklemek gerekiyor.

CaylakWebte

sezginyildirim Sezgin Bey kodu github dan olduğu gibi kopyalayıp yapıştırdım ama hiç bir değişiklik olmadı görünümde.Nerede yanlış yapıyorum acaba?
Gece Modu Eklentim aktif.
Harici Css kodlarım şu şekilde:

/* HARİCİ CSS BOT NAVIGATION ---------------------------------- */

@media(max-width: 500px) { .mobile-app-icon-bar{
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-justify-content: space-around;
      -ms-flex-pack: distribute;
          justify-content: space-around;
  background: #ffa500 ;
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 48px;
  z-index: 2;
  background: #ffa500 ;
  border: 4px solid #0077b3;
} }

.buttonstyle.active{
 color: #002998 !important;
}

.buttonstyle{
width:20%;
display: flex;
flex-direction: column;
align-items: center;
background: orange !important;
border: none;
margin-top: 4px;
}

.spanstyle{
font-size: 10px;
    margin-top: 5px;
}

.mobile-app-icon-bar button {
  padding: 0.75rem !important;
  cursor: pointer;
}

.mobile-app-icon-bar button svg,
.mobile-app-icon-bar button i,
.mobile-app-icon-bar button img {

}


@media(min-width: 800px) { .mobile-app-icon-bar{ 
  display:none !important;
} }


/* HARİCİ CSS BOT NAVIGATION ---------------------------------- */



/* oval kutu*/
.Search-input input {
border-radius: 30px;
}
/* oval kutu*/



/* beğenme */

.item-like .Button:before {
	font-family: 'Font Awesome 5 Free';
	font-weight: 600;
	font-size: 15px;
	content: '\f164';
	margin-right: 8px;
	vertical-align: -1px;
}
.item-reply .Button--link:before {
	font-family: 'Font Awesome 5 Free';
	font-weight: 600;
	font-size: 15px;
	content: '\f3e5';
	margin-right: 8px;
	vertical-align: -1px;
}

/* beğenme */





/* ScrollBar */
::-webkit-scrollbar {
  width: 7px;
}
::-webkit-scrollbar-track {
  -webkit-border-radius: 10px;
  background: fade(#000, 10%);
    border-radius: 10px;
}
::-webkit-scrollbar-thumb {
  -webkit-border-radius: 10px;
  border-radius: 10px;
  background: fade(@primary-color, 80%); 

}
::-webkit-scrollbar-thumb:window-inactive {
  background: fade(@primary-color, 40%);
}
 /* ScrollBar */




/* TURUNCU YAZI RENGİ */

.DiscussionListItem-title {
margin: 0 0 3px;
line-height: 1.3;
color: #ff7300 !important;
font-weight: normal;
overflow: hidden;
text-overflow: ellipsis;
}

/* TURUNCU YAZI RENGİ */




/* KONU İÇİ İLK 100 KELİME */

 .DiscussionListItem-info .item-excerpt {
    margin-right: -30px !important;
    white-space: normal !important;
    font-size: 14px !important;
    margin-left: -40px !important;
    line-height: 1.5em !important;
    margin-bottom: 25px !important;
    color: #3a3a3a !important;
    display: block !important;

}





/* YAZI BOYUTU */

.Post-body {
font-size: 16px;
}

/* YAZI BOYUTU */




/* konu CSS */

.Post.CommentPost {-webkit-box-shadow: 0px 8px 24px 3px rgba(84,102,134,0.08) !important;
box-shadow: 0px 8px 24px 3px rgba(84,102,134,0.08) !important; border: 1px solid #dbdfe6!important; border-radius: 8px;margin-top: 20px;}


/* konu CSS */









/* +++++++++++++++++ DIM MODE LAYOUT +++++++++++++++++ DIM MODE LAYOUT +++++++++++++++++ DIM MODE LAYOUT */

body.dark .Hero {
    background: #15202B!important;
}

body.dark .Hero-subtitle {color: #8899a6;}
body.dark .Hero-title {
    color: rgb(255, 255, 255);
}

body.dark .App-content {
    background: #15202B !important;
}

body.dark .App:before {
    background-color: #15202B !important;
}

body.dark .Search .FormControl {
    background-color: #15202B !important;
}

body.dark .FormControl {
    color: #15202B !important;
}

body.dark .Search .FormControl {
    background-color: #253341 !important;
}

/* Dim Button Group */
body.dark .IndexPage-toolbar .Button {
    background: #21303D !important;
    color: rgb(136, 153, 166) !important;
}

body.dark .item-subscription .Button {
    background: #21303D !important;
    color: rgb(136, 153, 166) !important;
}

body.dark .item-share-social .Button {
    background: #21303D !important;
    color: rgb(136, 153, 166) !important;
}

body.dark .Navigation .Button {
    background: #21303D !important;
    color: rgb(136, 153, 166) !important;
}

body.dark .Post-controls .Button {
    background: #21303D !important;
    color: rgb(136, 153, 166) !important;
}

body.dark .Post-actions .Dropdown-menu {
    background: #21303D !important;
}

body.dark .item-controls .Dropdown-menu {
    background: #21303D !important;
}

body.dark .item-subscription .Dropdown-menu {
    background: #21303D !important;
}

body.dark .item-session .Dropdown-menu {
    background: #21303D !important;
}

body.dark .item-sort .Dropdown-menu {
    background: #21303D !important;
}

body.dark .item-fof-upload .Button {
    background: #21303D !important;
}

body.dark .item-preview .Button {
    background: #21303D !important;
}

body.dark .item-changePassword .Button {
    background: #21303D !important;
}

body.dark .item-changeEmail .Button {
    background: #21303D !important;
}

body.dark .DiscussionListItem-controls .Button {
    background: #21303D !important;
}

body.dark .item-notifications .Dropdown-menu {
    background: #21303D !important;
}

body.dark .item-flags .Dropdown-menu {
    background: #21303D !important;
}

body.dark .DiscussionListItem-controls .Dropdown-menu {
    background: #21303D !important;
}

body.dark .App-primaryControl .Dropdown-menu {
    background: #21303D !important;
}

body.dark .Modal-header {
    background: #21303D !important;
}

body.dark .Modal-body {
    background-color: #15202B !important;
}

body.dark .Modal-footer {
    background-color: #21303D !important;
}

body.dark .containerNarrow {
    color: rgb(136, 153, 166) !important;
}

body.dark .sideNav .Dropdown--select .Dropdown-menu>.Dropdown-separator {
    box-shadow: 0 1px 0px 0 rgb(56, 68, 77) !important;
}

body.dark .DiscussionListItem-content {
    border: 1px solid rgb(56, 68, 77) !important;
}

body.dark .DiscussionListItem-info .item-excerpt {
    color: #aaa !important;
}

body.dark .DiscussionListItem-info .item-excerpt {
    border-bottom: 1px solid rgb(56, 68, 77) !important;
}

body.dark .DiscussionList:not(.DiscussionList--searchResults) .read .DiscussionListItem-title {
    color: #ffff !important;
}

body.dark .Dropdown-menu {
    background: transparent !important;
}

body.dark .Scrubber-handle {
    background: transparent !important;
}

body.dark .Post.CommentPost {
    background: #21303D !important;
    border: 1px solid rgb(56, 68, 77) !important;
}

body.dark .ReplyPlaceholder {
    border: 1px dashed #aaa !important;
    background: #21303D !important;
}

body.dark {
    background: #15202B !important;
}

body.dark .DiscussionHero-title {
    color: #fff !important;
}

body.dark .Header-secondary .Button {
    color: rgb(136, 153, 166) !important;
}

body.dark .Button-label .username {
    color: #fff !important;
}

body.dark .Hero {
    box-shadow: 0 1px 0px 0 rgb(56, 68, 77) !important;
}

body.dark .darkenBackground {
    background: #15202B !important;
}

body.dark .UserBio {
    color: #aaa;
}

body.dark .username {
    color: #aaa;
}

body.dark .Button--primary {
    color: #fff !important;
}

body.dark .Composer {
    background: #21303D !important;
}

body.dark .FormControl {
    background-color: #21303D !important;
    color: #aaa !important;
}

body.dark .FormControl:focus, body.dark .FormControl.focus {
    background-color: #21303D !important;
}

body.dark .DiscussionListItem:hover {
    background: #21303D !important;
}

body.dark .UserCard-lastSeen {
    color: #aaa !important;
}

body.dark .item-joined {
    color: #aaa !important;
}

body.dark .NotificationGrid {
    background: #21303D !important;
    color: #aaa !important;
}

body.dark .App-backControl .Button:hover, body.dark .Button:focus, body.dark .Button.focus {
    background-color: transparent !important;
}

body.dark .App-navigation .Navigation .Button {
    background-color: transparent !important;
}

body.dark .App-titleControl .Button {
    color: #aaa!important;
}

body.dark .Slidable .Slidable-underneath {
    background: #21303D !important;
}


body.dark .DiscussionList-loadMore .Button {
    background: #21303D !important;
}

body.dark .DiscussionListItem {
    background: #15202B !important;
}

body.dark .DiscussionListItem.active {
    backgorund: #21303D !important;
}

body.dark .DiscussionPage-list {
    border: 1px solid rgb(56, 68, 77) !important;
    background: #15202B !important;
}

body.dark .App-drawer {
    background: #21303D !important;
}

body.dark #header-secondary>ul>li.item-signUp>button[title=Kaydol] {
    color: #fff !important;
}

body.dark #header-secondary > ul > li.item-logIn > button[title="Giriş Yap"] {
    color: rgb(255, 255, 255) !important;
}

body.dark .TagLabel.colored .TagLabel-text {
    color: none !important;
}

body.dark .DiscussionHero .TagsLabel .TagLabel.colored {
    background: #21303D !important;
}

body.dark .Search-results {
    background: #21303D !important;
}

body.dark .TagCategory.SubCategory .TagCategory-content {
    background-color: #21303D !important;
}

body.dark .UserCard, .UserCard a {
    color: #aaaa !important;
}

body.dark blockquote {
    background: #21303D !important;
}

body.dark .PostMention:first-child {
    background: #21303D !important;
    color: #aaa !important;
}

body.dark .Hero-subtitle {
    color: #8899a6 !important;
}

body.dark .Scrubber-before, body.dark .Scrubber-after {
    border-left: 2px solid #21303D !important;
}

body.dark .DiscussionList:not(.DiscussionList--searchResults) .read .DiscussionListItem-title {
    font-weight: 600 !important;
}

body.dark .DiscussionList:not(.DiscussionList--searchResults) .unread .DiscussionListItem-title {
    font-weight: 600 !important;
    color: #e7672e !important;
}

body.dark .NotificationsDropdown-unread {
    background: #e7672e !important;
}

body.dark .Post-footer .CommentPost .Post-header:before {
    background-color: #2CB37D !important;
} /* en iyi yanıt */

body.dark .Post-footer .item-bestAnswerPost {
    background-color: rgba(156, 232, 194, 0.33) !important;
} /* en iyi yanıt */

body.dark .Post-footer .item-bestAnswerPost .Post-body {
    color: #fff !important;
}

body.dark .Post-header, body.dark .Post-header a {
    color: #aaa !important;
}

body.dark .username {
    color: #fff !important;
}

body.dark .Post-body {
    color: #fff !important;
}

body.dark code {
    background: #21303D !important;
}
/* +++++++++++++++++ DIM MODE LAYOUT +++++++++++++++++ DIM MODE LAYOUT +++++++++++++++++ DIM MODE LAYOUT */

sezginyildirim

mekici Eklendi ve farklı düzenlemeler güncellendi.

tolgaaaltas

sezginyildirim Gönderiye opsiyonel bir satır olarak eklense daha iyi olur diye düşünüyorum, sonuçta herkes FlarumTR özelleştirmesini kullanmıyor.

mekici

CaylakWebte Bu gece modunun önceki bir sürümüne ait css kodları. https://flarumtr.com/d/1859-flarumtr-mobil-ve-masa-ustu-temasi-yeni-gece-modu-uyumlu/5 bu linkten yeni sürüme ait kodları bulabilirsin.

durpoy

mekici beta 14 de discuss view eklentisi için css tarafında iyileştirmeler yapıldı. Ben bu uzantıyı içeren cssleri kaldırdım.