Dash and cpanel

Informal
1

have you any thoughts for adding the dark theme (like the forum) for
https://dash.infinityfree.com/
and
https://cpanel.infinityfree.com/

thanks

4 Likes
2

For the Client Area, it’s already there. Just go on Profile, then edit your profile and on the “Dashboard Theme” dropdown there is a dark theme. But for the Control Panel it’ll be custom styling; maybe Admin should do that if it’s possible.

8 Likes
3

I’m afraid that Admin couldn’t do that customization to the panel. It is controlled by iFastNet after all.

2 Likes
4

But I found an useful resource for Control Panel themes, easy to install as well as it’s a snippet to add on an ad snippet section in the reseller panel:

3 Likes
5

I admit it was an 1000 IQ play of injecting stuffs into the ads section :joy:
Never thought about that

2 Likes
6

The dashboard theme has dark mode support and you can enable it through the profile settings.

Dark mode for the control panel is a lot harder. There is no official theming support, but you can abuse the ad slots to inject custom code in the panel. I know it’s possible, because most of the examples you see floating around the web to edit the control panel sections are based on stolen InfinityFree code.

While there are examples of custom themes being loaded into the panel, it changes the theme for everyone. But I would like for dark mode to be configurable by users, and off by default. This makes it far more complicated that just dumping a CSS file into the page, and as far as I know nobody has done it before.

9 Likes
7

thanks for the info, ive updated my dash to the dark theme and its great :+1:

for the css for the advert slot, maybe this might do the job
https://medium.com/js-dojo/how-to-enable-dark-mode-on-your-website-with-pure-css-32640335474

im not sure how to make it persistent ? maybe a cookie if thats possible in css ?

5 Likes
8

Hmm, those examples make use of browser dark mode preferences. Then you can just leverage browser/device settings to enable dark mode without having to keep track of user settings. That’s actually quite a nice way to do it, although it will require quite some changes to the existing theme CSS you can find to make it work I think.

9 Likes
9

to be honest I stopped reading it after a few lines :rofl:

4 Likes
10

Just a bit more. I have dark/light mode toggle setup on my vP (The toggle is separate from the client area as of now, but it’s still a color mode toggle).

My line of thinking was to use JavaScript to check if dark mode should be used, if so, create a link element with the CSS for dark mode, otherwise, create it with the light mode file.

Because the control panel already has a load wheel built-in, there really is not any additional wait time for the user.

7 Likes
11

How about css variables?
If you make use of those (for colors) then there will be no need for a lot of Javascript code. Not even a need for 2 css files.

5 Likes
12

How would you do the logic of toggling the theme then?

4 Likes
13

For that you need to define the variables first (for body tag)

body {
    --bg: #fff;
    --text: #000:
}

And define the same variables for the darkmode class:

.darkmode{
    --bg: #000;
    --text: #fff;
}

You will need to set the style attributes which you wish to change to var(--variable_name)
And a javascript code which toggles the darkmode class based on user’s preference. (body tag)
I may give the functional example code when I’m home.

8 Likes
14

Ah, my apologies, I’m just stupid and though you were saying that no JavaScript was needed at all. I understand where you are going with that (This is how I have the client area setup, with one CSS file and the dark mode class switcher).

4 Likes
15

FYI
If you didn’t know that is for the main page only, when you click into the options it’s still light mode

Anyways, Admin should make a new Control Panel frontend. It will eliminate the worry of code being copied, and you can get full control of the design.

Like how the SSL installation, client area’s options work

3 Likes
16

Yes, that’s the route I’m going for in the long term. Styling the control panel is comparatively easy compared to replicating/proxying the entire panel into the client area, but does enable me to completely redesign the UX from the ground up and hide of some of the crude implementations of the control panel.

But it’s difficult to do and the code is quite fragile (web scraping generally breaks very easily), so it’s very much a long term process.

6 Likes
17

I wish you the best admin/moderators and to thank you for your amazing service and ongoing support
:+1: :+1: :+1: :+1: :+1:

4 Likes
18

I’m more in favor of having one look
but which is made to cover both worlds (dark and light)

this is how you get a unique look, feel and recognizable interface

Something similar to “the dark gray” theme on the forum because it is good at any time of the day.
It always rests on the eyes, and important things pop out and are emphasized with contrasting colors.

For a dark look, it would be necessary to adjust all the images and icons from the control panel, because without that it wouldn’t make much sense (what is the use of a black background when some icon shines “in your eyes” like a reflector).

7 Likes
19

You might be interested in this, it’s not perfect, but can be used as a reference
https://github.com/GenerateApps/GenerateClient

7 Likes
20

This topic was automatically closed 15 days after the last reply. New replies are no longer allowed.