The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

Dark Mode Admin Panel

3 posters

Go down

Dark Mode Admin Panel Empty Dark Mode Admin Panel

Post by Guest September 5th 2021, 8:40 pm

After having my eyes burned by the Admin Panel's white color-scheme for way too long, I decided it was time to take action! I think this screenshot speaks for itself:
Dark Mode Admin Panel Screen41

How to achieve the same result

Add this javascript code to the javascript code management section of the admin panel, with placement on all pages:
Code:

/* Created by Occultist
    Inspired by JScript:https://help.forumotion.com/t137122-project-cp_addon-configure-scripts
*/

document.addEventListener("DOMContentLoaded", () => {
    let link = document.querySelector("[href*='/admin/']");
    if(!link) return;
    link.addEventListener("click", (e) => {
        e.preventDefault();
        /* when admin button is clicked, inject the admin panel in an iframe;
        the iframe options are taken directly from JScript's tutorial*/
        document.body.innerHTML = '<iframe name="cpframe" id="cpframe" onLoad="darkLightInit()" src="' + link.href +
            '" style="position:fixed; top:0px; left:0px; bottom:0px; right:0px; width:100%; height:100%; border:none;' +
            ' margin:0; padding:0; overflow:hidden; z-index:999999;">IFrame is not supported</iframe>';

    });
});

let darkLightInit = () => {
    let frame=document.querySelector("#cpframe"), frameDoc=frame.contentDocument || frame.contentWindow;
    
    /* update the address bar and title everytime a new admin page is loaded */
    document.body.title=frameDoc.title;
    window.history.replaceState({}, frameDoc.title, frameDoc.location.href);

    /* add the style for the dark theme */
    let style=frameDoc.createElement("style");
    style.innerHTML="#page-header,.logo-header{background:#2f2f2f}.txt_green{color:#f2f2f2}.packageTag{background:#4f4f4f!important}.right-header{color:#fff}.right-header:hover{background:#4f4f4f;border-left-color:#4f4f4f}.right-menu-header{background:#4f4f4f}.right-menu-header a{color:#fff!important}.right-menu-header a:hover{background:#2f2f2f}#content{background:#3f3f3f}fieldset{background:#2f2f2f;border:none;color:#f2f2f2;border:none}input{background:#1f1f1f!important;color:#fff}tr:nth-child(2n){background:#3f3f3f!important}tr:nth-child(2n+1){background:#4f4f4f!important}dd,td{color:#fff;background:0 0!important}.warning_topicit{background:#3f3f3f!important}#menu{background:#2f2f2f;border:none}.left-top{color:#fff}#activesubmenu,.submenu{border-bottom:none!important}.submenu span{color:#f2f2f2!important}blockquote{background:0 0!important}.explain{color:#fff;background:0 0!important}textarea{background:#1f1f1f!important;color:#fff!important}.sceditor-container{background:#2f2f2f!important}.sceditor-toolbar{background:#1f1f1f!important}.sceditor-button{background:gray!important}.sceditor-button:hover{background:#a9a9a9!important}.sceditor-group{background:#2f2f2f!important;border:none!important}label{color:#fff}#zone_fav_ico{color:#fff}select{background:#1f1f1f;color:#fff}.panel_menu{background:#3f3f3f;border:none}#tabs_menu a,#tabs_menu span{background:#2f2f2f!important}table{background:#3f3f3f!important;border:none!important}.CodeMirror{background:#1f1f1f!important}body .cm-s-default .activeline{background:#2f2f2f!important}.CodeMirror-lines span{color:#fff!important}.CodeMirror-lines .cm-string{color:#a11!important}.CodeMirror-lines .cm-comment{color:#a50!important}.CodeMirror-gutter{background:#1f1f1f!important;border:none!important}.CodeMirror-gutter pre{color:#fff}";
    frameDoc.head.appendChild(style);

    /* when the link to the forum is clicked, load the forum normally, without the iframe */
    frameDoc.querySelector(".url").addEventListener("click", (e)=>{
        e.preventDefault();
        location=location.origin;
    })
}


The CSS code on line 29 can be modified to make the admin panel look however you want! Here is what the uncompressed CSS looks like:
Code:
#page-header,
.logo-header {
 background:#2f2f2f
}
.txt_green {
 color:#f2f2f2
}
.packageTag {
 background:#4f4f4f!important
}
.right-header {
 color:#fff
}
.right-header:hover {
 background:#4f4f4f;
 border-left-color:#4f4f4f
}
.right-menu-header {
 background:#4f4f4f
}
.right-menu-header a {
 color:#fff!important
}
.right-menu-header a:hover {
 background:#2f2f2f
}
#content {
 background:#3f3f3f
}
fieldset {
 background:#2f2f2f;
 border:none;
 color:#f2f2f2;
 border:none
}
input {
 background:#1f1f1f!important;
 color:#fff
}
tr:nth-child(2n) {
 background:#3f3f3f!important
}
tr:nth-child(2n+1) {
 background:#4f4f4f!important
}
dd,
td {
 color:#fff;
 background:0 0!important
}
.warning_topicit {
 background:#3f3f3f!important
}
#menu {
 background:#2f2f2f;
 border:none
}
.left-top {
 color:#fff
}
.submenu, #activesubmenu{
 border-bottom:none!important
}

.submenu span {
 color:#f2f2f2!important
}
blockquote {
 background:0 0!important
}
.explain {
 color:#fff;
 background:0 0!important
}
textarea {
 background:#1f1f1f!important;
 color:#fff!important
}
.sceditor-container {
 background:#2f2f2f!important
}
.sceditor-toolbar {
 background:#1f1f1f!important
}
.sceditor-button {
 background:gray!important
}
.sceditor-button:hover {
 background:#a9a9a9!important
}
.sceditor-group {
 background:#2f2f2f!important;
 border:none!important
}
label {
 color:#fff
}
#zone_fav_ico {
 color:#fff
}
select {
 background:#1f1f1f;
 color:#fff
}
.panel_menu {
 background:#3f3f3f;
 border:none
}
#tabs_menu a,
#tabs_menu span {
 background:#2f2f2f!important
}
table {
 background:#3f3f3f!important;
  border:none !important;
}
.CodeMirror{
  background:#1f1f1f !important;
}
body .cm-s-default .activeline{
  background:#2f2f2f !important;
}
.CodeMirror-lines span{
  color:white !important;
}
.CodeMirror-lines .cm-string{
  color:#a11 !important;
}
.CodeMirror-lines .cm-comment{
  color:#a50 !important;
}
.CodeMirror-gutter{
  background:#1f1f1f !important;
  border:none !important;
}
.CodeMirror-gutter pre{
  color:white;
}
To modify the look of the Admin Panel, modify the code above, then run it through https://cssminifier.com/ and finally replace it in the javascript code.

How does it work?

The method is the same as the one in the code made by @JScript here. When the admin button is clicked, the code opens the admin panel in an iframe, which can then be modified by javascript. Smile

The dark mode theme is currently incomplete. There are some regions of the admin panel that have not yet been switched to the Dark Side. I will update this post as soon as the theme is finalised! I also plan to add a switch so you can always choose between the dark and the light mode!

Please note that this will only work if you open the admin panel through the link on the forum, since there's no way to directly inject javascript into the admin panel. Let me know if this code works, and report any unstyled section that you can find! Enjoy Wink !
avatar
Guest
Guest


Back to top Go down

Dark Mode Admin Panel Empty Re: Dark Mode Admin Panel

Post by SLGray September 5th 2021, 8:59 pm

You must be reading peoples' minds, wink.


Dark Mode Admin Panel Slgray10

When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.
SLGray
SLGray
Administrator
Administrator

Male Posts : 50246
Reputation : 3466
Language : English
Location : United States

View user profile https://forumsclub.com/gc/128-link-directory/

Back to top Go down

Dark Mode Admin Panel Empty Re: Dark Mode Admin Panel

Post by Guest September 5th 2021, 9:03 pm

Perhaps. Or maybe our minds are just similar Razz
avatar
Guest
Guest


Back to top Go down

Dark Mode Admin Panel Empty Re: Dark Mode Admin Panel

Post by The Godfather September 6th 2021, 10:25 am

Hello @Occultist

The mysteries of the calendar! We have been working for over a week on DARK mode for the admin panel and the online launch was done this morning:

Dark Mode Admin Panel Dfdffd10

cheers
The Godfather
The Godfather
Administrator
Administrator

Posts : 4575
Reputation : 782

View user profile

TonnyKamper likes this post

Back to top Go down

Dark Mode Admin Panel Empty Re: Dark Mode Admin Panel

Post by Guest September 6th 2021, 11:11 am

OMG! That's such an amazing feature, I'm not even mad cheers Cheer Super :party:


I suppose I'll keep this topic around just in case someone needs it. No idea what they would need it for tho Razz
Now for some quick live feedback:The dark mode button in the panel looks good on Chrome, but on Firefox it looks a little bit wonky:
Dark Mode Admin Panel Screen42
avatar
Guest
Guest


Back to top Go down

Dark Mode Admin Panel Empty Re: Dark Mode Admin Panel

Post by The Godfather September 6th 2021, 11:17 am

There may be some issues related to the CSS cache:

Dark Mode Admin Panel Cache10
The Godfather
The Godfather
Administrator
Administrator

Posts : 4575
Reputation : 782

View user profile

Back to top Go down

Dark Mode Admin Panel Empty Re: Dark Mode Admin Panel

Post by Guest September 6th 2021, 11:21 am

Yep, you're right. A quick cache & cookies deletion solved it! Smile
avatar
Guest
Guest


Back to top Go down

Dark Mode Admin Panel Empty Re: Dark Mode Admin Panel

Post by SLGray September 7th 2021, 6:34 am

Since it is a default feature now, could this topic be archived?


Dark Mode Admin Panel Slgray10

When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.
SLGray
SLGray
Administrator
Administrator

Male Posts : 50246
Reputation : 3466
Language : English
Location : United States

View user profile https://forumsclub.com/gc/128-link-directory/

Back to top Go down

Dark Mode Admin Panel Empty Re: Dark Mode Admin Panel

Post by Guest September 7th 2021, 9:48 am

Yeah, I guess so.
avatar
Guest
Guest


Back to top Go down

Dark Mode Admin Panel Empty Re: Dark Mode Admin Panel

Post by Ape September 7th 2021, 12:45 pm

now installed on your ACP archived


Dark Mode Admin Panel Left1212Dark Mode Admin Panel Center11Dark Mode Admin Panel Right112
Dark Mode Admin Panel Ape_b110
Dark Mode Admin Panel Keep_s10
Dark Mode Admin Panel Ape1010
Ape
Ape
Administrator
Administrator

Male Posts : 17739
Reputation : 1897
Language : fluent in dork / mumbojumbo & English haha

View user profile http://chatworld.forumotion.co.uk/

TonnyKamper likes this post

Back to top Go down

Back to top

- Similar topics

 
Permissions in this forum:
You cannot reply to topics in this forum