Main Issue

The current code base was designed and dedicated to a single WordPress website in 2017. Most of the CSS can be removed and refactored.

Style-Guide.md or Contributing.md Draft

Most, if not all, CSS selectors should have a comment on top of them to clearly describe what it is and optionally include a path to the most recent screenshot of the component or layout. Screenshots are uploaded to docs/images/.

Here's an example of the style guide described above in SCSS:

// Button Description
// Image: docs/images/components/button.jpeg
// Guidelines: https://m3.material.io/components/all-buttons
button {
  // ...
}

You can use the Image Preview extension for Visual Studio Code to view the images while hovering your cursor over the image link.

Stylesheets dedicated to layouts like an admin bar should have something like this at the top:

// -----------------------------------------------------------------------------
// This file contains all styles related to the admin bar of the site.
// Image: docs/images/layout/admin_bar.png
// Guidelines: https://m3.material.io/components/top-app-bar/overview
// -----------------------------------------------------------------------------

#wpadminbar 
  .ab-empty-item {
    // ...
  }

  // ...
}

Guideline links are optional for both component and layout documentation. More than one guideline link can be added to the documentation.

Describe the bug
Automatic system theme setting does not take effect until after two page refreshes. This is caused by PHP, as the server-side code base, not able to instantly fetch client-side values provided by the browser. The current implementation saves the system theme to local storage and PHP loads the value from there. Some possible solutions are:

• to use ajax
• load the system theme to local storage instantly after the option is selected
• listen for theme changes
• run the theme engine entirely on Javascript

Google.com also has the same issue with light and dark mode, requiring another refresh to load the correct theme, since they also use server-side rendering to display search results. Youtube.com solves this issue by forcing the browser to refresh after the first visit to the page.

To Reproduce
Steps to reproduce the behavior:

1. Go to Appearance → Material Dashboard
2. Change theme setting to System
3. Save changes
4. No changes to page theme
5. Refresh the page, changes are applied

Expected behavior
The system theme option should apply instantly after saving changes.

Additional context
The methods to get current system theme are as follows:

if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
    // dark mode
}

Or to watch for system theme changes:

window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
    const newColorScheme = event.matches ? "dark" : "light";
});

Posts page column sorting icons appear to be broken. Show correctly when hovering.
Oddly they work correctly on Pages

Describe the bug
The dropbox layout in the Plugins page is white in dark mode.

To Reproduce
Steps to reproduce the behavior:

1. Switch to dark mode in Appearance -> Material Dashboard
2. Go to Plugins -> Add Plugins
3. Click on Upload Plugin

Expected behavior
Should be dark

Screenshots

Describe the bug
When the admin bar is enlarged, the admin menu is blank on mobile (or vertical, small window on desktop).

To Reproduce
Steps to reproduce the behavior:

1. Go to Appearance → Material Dashboard
2. Enable Large Admin Bar
3. Save changes
4. Tap menu button
5. Admin menu is blank

Expected behavior
A clear and visible admin menu. Similar to when large admin bar is disabled.

Screenshots
https://github.com/fatihbalsoy/material-board/assets/28816254/0a92b1f5-abce-4c11-98c1-d53b52183d29

Describe the bug
The language options at the top of the screen are covered by the login card when a large error message appears or the screen is small.

To Reproduce
Steps to reproduce the behavior:

1. Go to '*/wp-login.php' as a logged out user
2. Done if small screen, else
3. Enter incorrect credentials and click 'Log In'
4. Language options are covered by login card

Expected behavior
Language options could be inside the card, moved out of the way, or displayed over the card. Card padding could be reduced.

Screenshots

Desktop:

• Screen Height dependent

Smartphone:

• Screen Height dependent

Describe the bug
Selecting a bright primary color will cause readability issues with most components and layouts. Using tinycolor to predetermine the text colors is one possible solution.

To Reproduce
Steps to reproduce the behavior:

1. Go to Appearance -> Material Dashboard
2. Select a bright primary color like light pink
3. Save changes
4. Admin bar text is not visible

Expected behavior
Text should be dark over light and pastel primary colors

Screenshots

Screenshots

Desktop:

• OS: Windows
• Browser: all
• Display scale: 175%
  • Issue only occurs on specific display scales