Smf 2.1 Rc3 Dark Mode

Started by gevv, October 21, 2020, 10:37:32 AM

Previous topic - Next topic

Tonyvic

When logged in there is a red button above the words: SMF 2.1 RC3 Demo

Recursos

@Tonyvic
logged in as "test"
?? can't see red button!


aryansindy

yes he mean the blue circle after alerts


Arantor

You mean the button that toggles between light and dark mode?

aryansindy

yes I mean this button see attachment

Arantor

The button is blue in light mode and red in dark mode.

Recursos

Understood.
Is OK now.
Thank you everyone,
Rec

gevv

Hi,

New  css  and mobile menu icon (Put the menudark.svg file into the theme's images / icons folder)


.theme-switch {top: 4px;display: inline-block;height: 14px;position: relative;width: 14px;}
.theme-switch input {display: none;}
.slider {background-color: #488fd2;bottom: 0;cursor: pointer;left: 0;position: absolute;right: 0;top: 0;transition: 0.4s;}
.slider:before {background-color: #f4f4f4;bottom: 4px;content: "";height: 6px;width: 6px;left: 4px;position: absolute;transition: 0.4s;}
.slider.round {border-radius: 34px;}
.slider.round:before {border-radius: 50%;}
input:checked + .slider {background-color: #b00;}
input:checked + .slider:before {transform: translateX(0px);}


[data-theme="dark"] body {background-color: #2d2d2d !important;color: #000;}
[data-theme="dark"]  #inner_wrap {color: #fbc609;background-color: #1d1d1d !important;}
[data-theme="dark"] #main_content_section {color: #fbc609;background-color: #1d1d1d !important;}
[data-theme="dark"]  #inner_section {color: #fbc609;background: #1d1d1d !important;}
[data-theme="dark"]  .navigate_section ul{background: #1d1d1d !important;}
[data-theme="dark"]  .imgbb{background: #1d1d1d !important;}
[data-theme="dark"]  .navigate_section ul li {text-shadow: none;color: #fbc609;}
[data-theme="dark"]  .navigate_section a {text-shadow: none;color: #fbc609;}
[data-theme="dark"]  #info_center {color: #fbc609;background: #1d1d1d !important;}
[data-theme="dark"]  #info_center a{color: #fff;}
[data-theme="dark"]  .main_container {color: #fbc609;background: #1d1d1d !important;}
[data-theme="dark"] .windowbg:nth-of-type(odd){background: #1d1d1d !important;}
[data-theme="dark"] .bg.odd {background: #1d1d1d !important;}
[data-theme="dark"] .catbg{background: #580606 !important;}
[data-theme="dark"] .title_bar{background: #580606 !important;}
[data-theme="dark"] .information {background: #580606 !important;}
[data-theme="dark"] .title_bar a{color: #fff !important;}
[data-theme="dark"] .dropmenu a{color: #fff !important;}
[data-theme="dark"] .dropmenu li a:hover {background: #580606 !important;border: 1px solid #4a6b8c;}
[data-theme="dark"] .dropmenu li a:focus {background: #580606 !important;border: 1px solid #4a6b8c;}
[data-theme="dark"] #top_info > li > a:hover {background: #580606 !important;border: 1px solid #4a6b8c;}
[data-theme="dark"] #top_info > li > a.open {background: #580606 !important;border: 1px solid #4a6b8c;}
[data-theme="dark"] .dropmenu ul{background: #580606 !important;}
[data-theme="dark"] .roundframe {background: #1d1d1d !important;}
[data-theme="dark"] #top_section {background: #373738 !important;}
[data-theme="dark"] .welcome{color: #fff !important;}
[data-theme="dark"] .welcome strong{color: #fff !important;}
[data-theme="dark"] #top_section  a{color: #fbc609;}
[data-theme="dark"] #profile_menu  {background: #580606 !important;color: #fff !important;}
[data-theme="dark"] #description_board{background: #580606 !important;}
[data-theme="dark"] #description_board h3{color: #fff !important;}
[data-theme="dark"] .titlebg {background: #000 !important;}
[data-theme="dark"] .button {background: #1d1d1d !important;color: #fbc609;}
[data-theme="dark"] .windowbg a {color: #fff;}
[data-theme="dark"] .lastpost strong {color: #fff;}
[data-theme="dark"]  .up_contain  {color: #fbc609;background: #1d1d1d !important;}
[data-theme="dark"] input {background: #000;color: #fff !important;}
[data-theme="dark"] button {background: #000;color: #fff !important;}
[data-theme="dark"] select{background: #000;color: #fff !important;}
[data-theme="dark"] textarea {background: #000;color: #fff !important;}
[data-theme="dark"] input:focus {background: #000;color: #fff !important;}
[data-theme="dark"] textarea:focus{background: #000;color: #fff !important;}
[data-theme="dark"] button:focus {background: #000;color: #fff !important;}
[data-theme="dark"] select:focus {background: #000;color: #fff !important;}
[data-theme="dark"] .windowbg {background: #1d1d1d !important;color: #fbc609;}
[data-theme="dark"] textarea {background: #1d1d1d !important;color: #fff !important;}
[data-theme="dark"] .sceditor-toolbar{background: #580606 !important;}
[data-theme="dark"] .sceditor-container{background: #580606 !important;}
[data-theme="dark"] .under_message li {background: #580606 !important; color: #fff;}
[data-theme="dark"] .quickbuttons li ul {background: #580606 !important;}
[data-theme="dark"] .quickbuttons li ul li:hover{background: #580606 !important;}
[data-theme="dark"] .quickbuttons ul li a:focus{background: #580606 !important;}
[data-theme="dark"] #detailedinfo dt {color: #fff;}
[data-theme="dark"] .infolinks, .basicinfo {color: #fff;}
[data-theme="dark"] .news h2 {color: #fff;}
[data-theme="dark"] #pm_menu {background: #580606 !important; color: #fff;}
[data-theme="dark"] #alerts_menu {background: #580606 !important; color: #fff;}
[data-theme="dark"] #footer {background: #580606 !important; color: #fff;}
[data-theme="dark"] #error_serious  {color: #000 !important; }
[data-theme="dark"] a {color: #FF0000 !important; }
[data-theme="dark"] .bbc_standard_quote {background: #38383d !important; }
[data-theme="dark"] .bbc_code {background: #38383d !important; }
[data-theme="dark"]  #top_info li a.active {background: #be0000;color: #fff !important;}
[data-theme="dark"] .dropmenu li a.active {background: #be0000;}
[data-theme="dark"] #post_draft_options {background: #580606 !important;}
[data-theme="dark"] #post_draft_options strong {color: #fff !important;}
[data-theme="dark"] #top_subject {color: #fff !important;}
[data-theme="dark"] #display_head p {color: #fff !important;}
[data-theme="dark"] .inline strong {color: #fff !important;}
[data-theme="dark"] .table_grid th {color: #fff !important;}
[data-theme="dark"] .settings strong  {color: #fff !important;}
[data-theme="dark"] .counter  {color: #fff !important;}
[data-theme="dark"] .topic_details strong  {color: #fff !important;}
[data-theme="dark"] #recent strong  {color: #fff !important;}
[data-theme="dark"] #recent h5  {color: #fff !important;}
[data-theme="dark"] #register_screen label  {color: #fff !important;}
[data-theme="dark"] #upper_section {padding: 0px;}
[data-theme="dark"] .modified {color: #fff !important;}
[data-theme="dark"] .modified strong {color: #fff !important;}
[data-theme="dark"] .popup_window {background: #000 !important;}
[data-theme="dark"] .menu_icon {background: url(../images/icons/menudark.svg) no-repeat;}
ElkArte is a modern, powerful community building forum software. https://www.elkarte.net/

Advertisement: