Hi,
It has some shortcomings but it is enough
(https://i.ibb.co/DQgnGH0/dark-smf.png) (https://ibb.co/0rV3BRH)
(https://i.ibb.co/S3XLyZ8/Screenshot-2020-10-20-Welcome-to-SMF.png) (https://ibb.co/CH5r8SZ)
(https://i.ibb.co/kS9swkd/Untitled.gif) (https://ibb.co/QKC3Tz5)
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;}
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;}
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
Switch the default theme to your new theme and force everyone to use the new default --- admin, theme settings
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
Does SMF even know about the copy you made? It probably doesn't unless you installed it...
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
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!
@marcosbr
Thank you for sharing
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
@Recursos What is your site address? send by pm
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>
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.
SMF 2.1 has loadCSSFile & loadJavaScriptFile func.
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.
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.
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.
Fair enough. :)
Hi,
Demo site ; http://smf.infinityfreeapp.com/index.php
user: test
pass: test
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
When logged in there is a red button above the words: SMF 2.1 RC3 Demo
@Tonyvic
logged in as "test"
?? can't see red button!
(https://i.ibb.co/19Kg5BN/image-2020-11-03-112541.png) (https://ibb.co/nDfGv4y)
yes he mean the blue circle after alerts
You mean the button that toggles between light and dark mode?
yes I mean this button see attachment
The button is blue in light mode and red in dark mode.
Understood.
Is OK now.
Thank you everyone,
Rec
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;}