Dynamic Material Theme (Dark/Light) #1380

marek-guran · 2023-08-07T10:26:16Z

About

Material You Inspired dark and light theme, which supports both stable and insiders versions. It uses PHP to calculate colors from color picker in system tab.

⚠ Themes support only dark color pallete, light color pallete will make everything unreadable
❌ Wasnt able to make them switchable by settings

Screenshots - PC (light)

Screenshots - PC (dark)

Screenshots - Mobile (light)

Screenshots - Mobile (dark)

Fixed few issues and restyled back to top button

marek-guran · 2023-08-08T04:44:42Z

Latest 2 commits fix these 2 buttons:

billz · 2023-08-09T02:59:57Z

Thanks for the PR! I'm traveling for the next few days - will give this a closer look when I return.

billz · 2023-08-25T11:30:48Z

In the minimal testing I've done the 'theme' cookie value isn't being set for some reason.
This results in an 'undefined' stylesheet being loaded. Needs troubleshooting.

billz · 2023-08-28T11:30:07Z

@marek-guran new themes also need to be defined here:

raspap-webgui/app/js/custom.js

Lines 562 to 567 in 4bb1873

    
           // Define themes 
        
           var themes = { 
        
               "default": "custom.php", 
        
               "hackernews" : "hackernews.css", 
        
               "lightsout" : "lightsout.css", 
        
           }

marek-guran · 2023-08-28T12:03:49Z

@marek-guran new themes also need to be defined here:

raspap-webgui/app/js/custom.js

Lines 562 to 567 in 4bb1873

// Define themes

var themes = {

"default": "custom.php",

"hackernews" : "hackernews.css",

"lightsout" : "lightsout.css",

}

Yes, I found out about this yesterday. For some reason it's not able to change to my themes, I am currently troubleshooting it and trying to make it work.

Still cant change themes in settings

marek-guran · 2023-08-28T13:03:15Z

Managed to make it work, for some reason it wasnt switching because of some caching so it did not get updated (even after today commit).

Then reloaded the page on one device (cleaned cache) and it switched themes correctly. But other device lets say phone that had it cached, refused to change it.

Screenshots:

billz · 2023-08-28T20:01:25Z

Confirmed themes load from the menu now.

I noticed that the card-body class has border-radius: 18px, which looks somewhat odd with the headers and footers. What do you think?

marek-guran · 2023-08-28T21:09:51Z

Confirmed themes load from the menu now.

I noticed that the card-body class has border-radius: 18px, which looks somewhat odd with the headers and footers. What do you think?

Yes, the issue is that the whole layout of items placed are basically cards on cards and it makes that effect. Basically it could be hidden, but if I did it... I might break default themes. I will try to fix it and not break them. Will take a look on it and mark this as draft until the issue is not resolved and you don't get spammed by my commits.

I got an idea with the lazy way and adding in CSS for the header and footer the 18 px down and up so it could overlap the cards or make the footer and header to be floating on top of them and then giving them defined space which would hide the unwanted corners.

Removed dark theme since it will be enabled by switch at top bar

Updated dark theme switcher so now it can switch between dark and light material theme while keeping it's functionality to stock theme.

1. The rounded corners issue is gone 2. Fixed light theme status indicator, so on latest insiders it wont hide active green button 3. Added new visuals to navigation menu to make it more clear what card is active

marek-guran · 2023-08-29T09:07:10Z

The issue is fixed and improved both themes. Now it is in settings as one theme and can be switchable by the dark theme switcher. Also fixed for insiders light theme (changed background color to secondary color) for status indicator button that switched from text to icon. Also the navigation menu got improved indicators for active items, so it is more clear to see what is active.

Material Theme (Non insiders look)

material-noninsiders-look.mp4

Material Theme (Insiders look)

material-insiders-look.mp4

billz · 2023-08-29T09:09:38Z

Looking good! Seems like the card-body is missing some vertical padding. This is with padding: 2.25rem 1.25rem 2.25rem 1.25rem;

Just a suggestion.

The dark mode support works great 😎 We could probably just refer to the theme as 'Material' (exclude 'Use dark colors'). Users will figure this out pretty quick, I think.

marek-guran · 2023-08-29T09:12:35Z

Looking good! Seems like the card-body is missing some vertical padding. This is with padding: 2.25rem 1.25rem 2.25rem 1.25rem;
Just a suggestion.
The dark mode support works great 😎 We could probably just refer to the theme as 'Material' (exclude 'Use dark colors'). Users will figure this out pretty quick, I think.

I have fixed it the lazy way, so made the header go down by -18px (this hides the visual error - cant be fixed other way). Will take a look on this and see if I can fix it.

billz · 2023-08-29T09:17:21Z

One minor annoyance is the custom WireGuard icon doesn't highlight on mouseover like the other nav-items.

This isn't an issue with your theme — it's always done this. I just haven't looked into it.
It's a nice-to-have, not critical to this PR.

marek-guran · 2023-08-29T10:31:11Z

One minor annoyance is the custom WireGuard icon doesn't highlight on mouseover like the other nav-items.
This isn't an issue with your theme — it's always done this. I just haven't looked into it. It's a nice-to-have, not critical to this PR.

I tried but wasnt able to change it, there were some issues with type of file i think? It did not want to act like normal icons from fa fa class. Also the padding is now fixed and renamed it as you suggested. (See below images - its for both dark and light theme, just did not want to spam with screenshots)

billz · 2023-08-29T14:14:24Z

Nice work. You can also apply your theme colors to the link quality graph, if you wish.

raspap-webgui/app/js/linkquality.js

Lines 3 to 6 in dee77c7

    
           // Support for dark theme 
        
           theme = getCookie('theme'); 
        
           if (theme == 'lightsout.css') { 
        
             var bgColor1 = '#141414';

I've considered changing the backgroundColor property to 'transparent' since I think this looks better with all themes.

marek-guran · 2023-08-29T14:35:02Z

Nice work. You can also apply your theme colors to the link quality graph, if you wish.

raspap-webgui/app/js/linkquality.js

Lines 3 to 6 in dee77c7

// Support for dark theme

theme = getCookie('theme');

if (theme == 'lightsout.css') {

var bgColor1 = '#141414';

I've considered changing the backgroundColor property to 'transparent' since I think this looks better with all themes.

Sure, will take a look on it.

marek-guran · 2023-08-29T21:43:43Z

So I tried to implement it, I tried many ways but made it furthest with adding this to theme:

// Save colors to a text file
$colors = array(
    'textColor' => $textColor,
    'cardsColor' => $cardsColor,
    'secondaryColor' => $secondaryColor,
    'primaryColor' => $primaryColor,
    'backgroundColor' => $backgroundColor
);

$file = fopen('colors.json', 'w');
fwrite($file, json_encode($colors));
fclose($file);

This basically saves the colors to .json which looks for example like this:

{"textColor":"#fdf4f6","cardsColor":"#ec91a6","secondaryColor":"#e46482","primaryColor":"#d8224c","backgroundColor":"#efa7b7"}

Then I was trying to load them by that JavaScript code with:

// Function to fetch JSON data
function fetchColors() {
  return fetch('/app/css/colors.json')
    .then(response => response.json())
    .catch(error => {
      console.error('Error loading colors:', error);
    });
}

// Fetch colors from the JSON file
var colorsPromise = fetchColors();

// Support for dark theme
theme = getCookie('theme');
if (theme == 'lightsout.css') {
  var bgColor1 = '#141414';
  var bgColor2 = '#141414';
  var borderColor = 'rgba(37, 153, 63, 1)';
  var labelColor = 'rgba(37, 153, 63, 1)';
} else if (theme == 'material-light.php') {
  // Load colors from the fetched data
  colorsPromise.then(colors => {
    var bgColor1 = "'"+colors.primaryColor+"'";
    var bgColor2 = "'"+colors.primaryColor+"'";
    var borderColor = "'"+colors.secondaryColor+"'";
    var labelColor = "'"+colors.textColor+"'";

    // Print colors to the console
    console.log("bgColor1:", bgColor1);
    console.log("bgColor2:", bgColor2);
    console.log("borderColor:", borderColor);
    console.log("labelColor:", labelColor);
  });
} else {
  var bgColor1 = '#d4edda';
  var bgColor2 = '#eaecf4';
  var borderColor = 'rgba(147, 210, 162, 1)';
  var labelColor = 'rgba(130, 130, 130, 1)';
}
Rest of the code...

But no matter what I tried... For some reason it loaded full black or white colors for link quality. Most likely will have to use hard coded values to make it readable on all color schemes. But will try to make it work. If you have any suggestions or see any errors in my way how I want to achieve these colors, please let me know.

billz · 2023-08-30T07:20:38Z

includes/system.php

    ];
    $selectedTheme = array_search($_COOKIE['theme'], $themeFiles);

+    // widget options
+    $widgetOpt = $_SESSION["widgetOpt"];


$widgetOpt is from the Insiders edition 😉

$widgetOpt is from the Insiders edition 😉

Sorry my bad, didnt notice it here when i was copying the files to github. Now it is fixed and also made it the easy way and hard coded the color values. Now it uses white with transparency also. Chose this variant since it looked to me like best for both versions.

billz · 2023-08-30T07:21:33Z

No problem, for this PR it's not an issue. Post-merge I'll set the background color to transparent.

Added hard coded colors to material theme. Now it is more readable on dark and light versions.

billz · 2023-08-30T08:13:16Z

@marek-guran well done! we're good to merge. this is a great contribution to the project

billz · 2023-09-13T08:01:13Z

@marek-guran looks like the modal dialog could use some attention.

Not super critical, so rather than create a new issue I thought I'd mention it here.

marek-guran · 2023-09-13T16:32:25Z

@marek-guran looks like the modal dialog could use some attention.
Not super critical, so rather than create a new issue I thought I'd mention it here.

Oh... Will fix this once I find time for it.

marek-guran · 2023-09-29T21:33:21Z

Hey, just commenting to let you know that I didn't forget about this issue. I just didn't find time to fix this yet. It is still on my mind in To Do things.

marek-guran added 9 commits August 6, 2023 18:31

Create materialdark.php

a77168c

Added dynamic theming

5234e0b

Small styling fix for static leases

b0ef54a

Final Dark Version

e137bb6

Fixed few issues and restyled back to top button

Updated missing stuff

ac019d6

Last touch to dark theme

d8ef994

Create material-light.php

6b11b35

Update and rename materialdark.php to material-dark.php

bb0a82a

Added themes to settings

7b07869

marek-guran marked this pull request as draft August 7, 2023 16:25

marek-guran added 4 commits August 7, 2023 18:26

Small fix to dashboard text

bd7c07f

Small fix to dashboard text

7c0e4b7

Fixed shadows and fixed insiders dashboard

2f3582d

Fixed insiders dashboard - light theme

5970ee3

marek-guran marked this pull request as ready for review August 7, 2023 16:52

marek-guran added 2 commits August 8, 2023 06:34

Updated forgotten button - dark theme

f831794

Updated forgotten button - light theme

69967f6

marek-guran changed the title ~~Material theme~~ Dynamic Material Theme (Dark/Light) Aug 8, 2023

Added themes to custom.js

aec2e3b

Still cant change themes in settings

marek-guran marked this pull request as draft August 28, 2023 12:32

marek-guran marked this pull request as ready for review August 28, 2023 13:03

billz added the enhancement label Aug 28, 2023

marek-guran added 2 commits August 28, 2023 23:12

Small changes to system.php

3cf88d9

Removed dark theme since it will be enabled by switch at top bar

Update custom.js

7a1900d

Updated dark theme switcher so now it can switch between dark and light material theme while keeping it's functionality to stock theme.

marek-guran marked this pull request as draft August 28, 2023 21:41

Fixed visual errors and improved some visuals

2828b09

1. The rounded corners issue is gone 2. Fixed light theme status indicator, so on latest insiders it wont hide active green button 3. Added new visuals to navigation menu to make it more clear what card is active

marek-guran marked this pull request as ready for review August 29, 2023 09:09

marek-guran added 2 commits August 29, 2023 12:28

Renamed theme to Material

49634a4

Fixed missing padding to cards

5bd2ef1

billz reviewed Aug 30, 2023

View reviewed changes

marek-guran added 3 commits August 30, 2023 09:52

Update linkquality.js

dd2c648

Added hard coded colors to material theme. Now it is more readable on dark and light versions.

Removed mistakenly added insiders code

877ed46

Small fix (removed forgotten insiders part)

a259a4f

billz merged commit 16a413a into RaspAP:master Aug 30, 2023
3 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Dynamic Material Theme (Dark/Light) #1380

Dynamic Material Theme (Dark/Light) #1380

marek-guran commented Aug 7, 2023 •

edited

Loading

marek-guran commented Aug 8, 2023

billz commented Aug 9, 2023

billz commented Aug 25, 2023

billz commented Aug 28, 2023

marek-guran commented Aug 28, 2023

marek-guran commented Aug 28, 2023 •

edited

Loading

billz commented Aug 28, 2023

marek-guran commented Aug 28, 2023 •

edited

Loading

marek-guran commented Aug 29, 2023

billz commented Aug 29, 2023

marek-guran commented Aug 29, 2023

billz commented Aug 29, 2023

marek-guran commented Aug 29, 2023 •

edited

Loading

billz commented Aug 29, 2023

marek-guran commented Aug 29, 2023

marek-guran commented Aug 29, 2023 •

edited

Loading

billz Aug 30, 2023

marek-guran Aug 30, 2023

billz commented Aug 30, 2023

billz commented Aug 30, 2023

billz commented Sep 13, 2023

marek-guran commented Sep 13, 2023

marek-guran commented Sep 29, 2023

Dynamic Material Theme (Dark/Light) #1380

Dynamic Material Theme (Dark/Light) #1380

Conversation

marek-guran commented Aug 7, 2023 • edited Loading

About

Screenshots - PC (light)

Screenshots - PC (dark)

Screenshots - Mobile (light)

Screenshots - Mobile (dark)

marek-guran commented Aug 8, 2023

billz commented Aug 9, 2023

billz commented Aug 25, 2023

billz commented Aug 28, 2023

marek-guran commented Aug 28, 2023

marek-guran commented Aug 28, 2023 • edited Loading

billz commented Aug 28, 2023

marek-guran commented Aug 28, 2023 • edited Loading

marek-guran commented Aug 29, 2023

Material Theme (Non insiders look)

Material Theme (Insiders look)

billz commented Aug 29, 2023

marek-guran commented Aug 29, 2023

billz commented Aug 29, 2023

marek-guran commented Aug 29, 2023 • edited Loading

billz commented Aug 29, 2023

marek-guran commented Aug 29, 2023

marek-guran commented Aug 29, 2023 • edited Loading

billz Aug 30, 2023

Choose a reason for hiding this comment

marek-guran Aug 30, 2023

Choose a reason for hiding this comment

billz commented Aug 30, 2023

billz commented Aug 30, 2023

billz commented Sep 13, 2023

marek-guran commented Sep 13, 2023

marek-guran commented Sep 29, 2023

marek-guran commented Aug 7, 2023 •

edited

Loading

marek-guran commented Aug 28, 2023 •

edited

Loading

marek-guran commented Aug 28, 2023 •

edited

Loading

marek-guran commented Aug 29, 2023 •

edited

Loading

marek-guran commented Aug 29, 2023 •

edited

Loading