Smf 2.1 Rc3 Dark Mode

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

Previous topic - Next topic

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

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>';


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


.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;}
ElkArte is a modern, powerful community building forum software. https://www.elkarte.net/

gevv

change;

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

new 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;}
ElkArte is a modern, powerful community building forum software. https://www.elkarte.net/

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
Слaва
Украинi

Please do not PM, IM or Email me with support questions.  You will get better and faster responses in the support boards.  Thank you.

"Loki is not evil, although he is certainly not a force for good. Loki is... complicated."

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

Arantor

Does SMF even know about the copy you made? It probably doesn't unless you installed it...

Recursos

Quote from: Arantor on November 01, 2020, 08:28:18 AM
Does SMF even know about the copy you made? It probably doesn't unless you installed it...
I Think it knows, as the displayed theme is indeed "copy_default" under
► Administration Center► Themes and Layout► Theme Settings \Theme URLs and Configuration etc.
but it has not changed the looks at all.
Any way to check what is amiss?

Rec
ED:
in smf_themes all those
cc_primary_color
cc_secondary_color
...
cc_remove_shadows
cc_admin_only
etc.
value is either none or 0

marcosbr


I know a lot of people don't like me. Nothing bothers me ...
SMF is wonderful!
It allows them to spoil a work of years ...
These images are horrible. It may even be that someone likes it. I do not!
And if I were the owner, I would hate it!
Nothing in life is absolute. We are always learning... Did you know that?
https://amigosdaeletronica.com.br

Recursos

@marcosbr
Thank you for sharing

Recursos

Meanwhile, intrigued by what would make "dark.js" run I looked into the code piece inserted in index.template.php and noticed:

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

so I was dumb enough to leave it "as is"!
Full of expectations replaced SITE.COM with true url.
But still nothing changes.
Any hint?
Rec

gevv

#10
@Recursos What is your site address?  send by pm
ElkArte is a modern, powerful community building forum software. https://www.elkarte.net/

Kindred

because the URL is completely wrong...   

CSS files should be in the css folder of the theme

<link rel="stylesheet" type="text/css" href="', $settings['theme_url'], '/css/index.css?fin20" />';


and your javascript should be in the scripts folder...

<script type="text/javascript" src="', $settings['theme_url'], '/scripts/dark.js?fin20"></script>
Слaва
Украинi

Please do not PM, IM or Email me with support questions.  You will get better and faster responses in the support boards.  Thank you.

"Loki is not evil, although he is certainly not a force for good. Loki is... complicated."

Antechinus

That wouldn't affect function as long as the src attribute was pointing to an actual file in its actual location. The file itself could be anywhere. It's the convention to put CSS files in the /css folder and javascript files in the /scripts folder, but it's not essential for them to work.

Personally I would generally put them in the conventional location. I'm just pointing out that having them elsewhere would not necessarily break things. An obvious example is calling jQuery from a CDN: as long as you use the correct src, it will work.

Antes

SMF 2.1 has loadCSSFile & loadJavaScriptFile func.

Antechinus

Quote from: marcosbr on November 01, 2020, 03:55:42 PM

I know a lot of people don't like me. Nothing bothers me ...
SMF is wonderful!
It allows them to spoil a work of years ...
These images are horrible. It may even be that someone likes it. I do not!
And if I were the owner, I would hate it!
Can't say I'm a huge fan of it myself, but Gevv obviously likes it and some other people seem to like it too. If you don't like it, nobody is forcing you to use it.

Leaving aesthetics aside, and just thinking about the coding: I have to wonder what the advantage of this is. Seems to me that you might as well just make a standard variant, using SMF's built-in variant support. That way you don't need any js. You just need a supplementary CSS file with the altered colours. That sort of presentation is what CSS was invented for.

Antechinus

Quote from: Antes on November 02, 2020, 02:29:53 PM
SMF 2.1 has loadCSSFile & loadJavaScriptFile func.

I know. That doesn't change what I said. If the calls for the js files are hard-coded in the template, they will still work as long as you point them at the right thing.

Antes

Quote from: Antechinus on November 02, 2020, 02:32:27 PM
Quote from: Antes on November 02, 2020, 02:29:53 PM
SMF 2.1 has loadCSSFile & loadJavaScriptFile func.

I know. That doesn't change what I said. If the calls for the js files are hard-coded in the template, they will still work as long as you point them at the right thing.

My reply wasn't to you actually but with SMF 2.1 people should do things right way and these functions actually allow people to hook their files into the system directly which leads to no-edit modifications.

Antechinus


gevv

ElkArte is a modern, powerful community building forum software. https://www.elkarte.net/

Recursos

Thanks, gevv.
The strange thing is that the site looks is still the old Curve2
Can't see nothing dark!
What am I missing?
Rec

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: