Customizing SMF > Tips and Tricks

Smf 2.1 Rc3 Dark Mode

(1/6) > >>

gevv:
Hi,

It has some shortcomings but it is enough







Upload the dark.js file to your site

themes default index.template.php  add under line 237


--- Code: --- echo '
<li id="nojs_logout">

<script charset="UTF-8" src="http://SITE.COM/dark.js" async></script>

<label class="theme-switch" for="checkbox">
<input type="checkbox" id="checkbox" />
<div class="slider round"></div>
</label>
</li>';
--- End code ---

add to the bottom in  themes / default / css / index.css file;



--- Code: ---.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"]  .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, textarea:focus, button:focus, 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, #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;}

--- End code ---

gevv:
change;


--- Code: ---[data-theme="dark"] input:focus, textarea:focus, button:focus, select:focus {background: #000;color: #fff !important;}
--- End code ---

new code;


--- Code: ---[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;}

--- End code ---

Recursos:
SMF2.1 RC3
I made a copy of default theme Curve2,
then applied above instructions.
But everything looks the same, can't see nothing like the beautiful graphics on top of this thread.
What can I try?
Rec

Kindred:
Switch the default theme to your new theme and force everyone to use the new default --- admin, theme settings

Recursos:
Thank you for your answer.
I did that, but still no luck (I presume that after applying the steps above something should visually change).
Put dark.js in:
/htdocs/Themes/copy_default/scripts
Rec

Navigation

[0] Message Index

[#] Next page

Go to full version