Better theme experience by 1208nn · Pull Request #2088 · RaspAP/raspap-webgui

1208nn · 2026-03-31T04:58:29Z

#2087

Text Below Generated By AI

This pull request makes significant improvements to the project's CSS structure and theme management, focusing on modularizing and modernizing the stylesheets. The main changes include splitting and refactoring the CSS files for better maintainability, updating theme variable usage, and cleaning up the documentation.

Key changes:

CSS Refactoring and Theming

The main shared CSS file was renamed from all.css to base.css, and its formatting was improved for readability and consistency. The new base.css is now more maintainable and easier to update. [1] [2] [3] [4] [5] [6] [7] [8] [9] [10] [11] [12] [13] [14]
The theme system was overhauled: the PHP-generated custom.php stylesheet was removed, and its contents were replaced by a static default.css file. This change simplifies theme management and removes server-side CSS generation. [1] [2]
The dark theme CSS was merged into default.css, and the standalone dark.css file was removed. This consolidates theme logic and ensures all theme styles are managed in a single file. [1] [2]
The hackernews.css theme was updated to import from base.css instead of the removed all.css, ensuring consistency with the new structure. [1] [2]

Documentation

The CONTRIBUTING.md file was updated for clarity and formatting, making it easier for new contributors to get started. [1] [2]

These changes collectively improve the maintainability, clarity, and scalability of the project's frontend architecture.

fix conslole error when not on dhcp page

Rename base.css to all.css and optimize import

…matting, variable declarations, and event handling

Staticize default style, extracting dynamic parts

Remove Unused

ThemeColor -> User selected color (done); ThemeMode -> light / dark / system (WIP); Theme -> A Full set stlye (default / HackerNews / etc...) (WIP)

Copilot

Pull request overview

This PR refactors the theming system to separate shared styles from theme-specific styles, introduce a “theme mode” (light/dark/system) that can follow the browser preference, and consolidate default/dark theme styling into a single CSS theme file.

Changes:

Loads a new shared stylesheet (app/css/base.css) globally and introduces a cookie-driven theme-mode mechanism (data-theme-mode → resolved to data-bs-theme in JS).
Replaces the PHP-generated theme CSS with static theme CSS (default.css) plus a small PHP CSS endpoint for theme color variables (theme-color.php).
Updates theme settings UI, theme assets (SVG/PHP images), and reformats/cleans several JS/CSS/Python files.

Reviewed changes

Copilot reviewed 21 out of 27 changed files in this pull request and generated 6 comments.

Show a summary per file

File	Description
templates/system/theme.php	Updates theme settings UI (theme color input class rename).
index.php	Switches theme attribute wiring and adds global base/theme stylesheets (contains a broken stylesheet link).
includes/system.php	Adjusts theme list to use css filenames and passes selected theme to template.
includes/navbar.php	Replaces night-mode toggle with a theme-mode click target/icon placeholder.
includes/functions.php	Adds `getThemeMode()`, renames theme color accessor, updates theme cookie defaults.
CONTRIBUTING.md	Heading reformat (still contains a typo in body text).
composer.lock	Adds dependency lockfile.
app/pitft/stats.py	Formatting and minor command quoting cleanup.
app/js/vendor/speedtestUI.js	Formatting (retains/introduces a `data = null` state bug).
app/js/vendor/huebee.js	Updates Huebee binding and moves theme color cookie name to `theme-color`.
app/js/vendor/dashboardchart.js	Formatting cleanup.
app/js/vendor/bandwidthcharts.js	Formatting cleanup.
app/js/ui/main.js	Adds theme switching/mode resolution logic and XSS escaping for some UI templates (theme select handler currently broken).
app/js/ajax/main.js	Minor whitespace cleanup.
app/img/solid.php	Uses new `getThemeColorOpt()` for SVG stroke coloring.
app/img/right-solid.php	Uses new `getThemeColorOpt()` for SVG stroke coloring.
app/img/raspAP-logo.php	Uses new `getThemeColorOpt()` for logo coloring.
app/img/devices/zero.php	Uses new `getThemeColorOpt()` for device SVG stroke.
app/img/devices/default.php	Uses new `getThemeColorOpt()` for device SVG stroke.
app/img/devices/compute.php	Uses new `getThemeColorOpt()` for device SVG stroke.
app/css/theme-color.php	New PHP CSS endpoint that defines `--raspap-theme-color` and variants.
app/css/hackernews.css	Removes theme import and reformats rules.
app/css/default.css	New consolidated default theme CSS (includes dark-mode selectors).
app/css/dark.css	Removed (dark styling moved into `default.css`).
app/css/custom.php	Removed (replaced by static `default.css` + `theme-color.php`).
app/css/base.css	Renamed/refactored shared CSS and adds theme-mode icon pseudo-content.
.gitignore	Ignores `vendor/`.

Comments suppressed due to low confidence (1)

app/css/base.css:742

For the system mode icon you set content: "\f042" on #theme-mode-icon::before, but \f042 (Font Awesome adjust) is only present in the solid font (fa-solid-900). The element currently uses the far (regular) style, so the glyph may not render. Either switch the icon element to the solid style (e.g., use fas/fa-solid or set an appropriate font-weight), or pick a system icon that exists in the regular set.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-04-02T13:23:46Z

+
+  <!-- Custom CSS -->
+  <link rel="stylesheet" href="app/css/base.css?v=<?= filemtime('app/css/base.css'); ?>">
+  <link rel="stylesheet" href="app/css/theme-color.php'); ?>">


The stylesheet link tag for theme-color.php has malformed PHP/quotes (href="app/css/theme-color.php'); ?>"), which will generate invalid HTML and prevent the theme color variables from loading. Update this to a valid href (and consider adding a cache-busting ?v= like the other assets).

Suggested change

<link rel="stylesheet" href="app/css/theme-color.php'); ?>">

<link rel="stylesheet" href="app/css/theme-color.php?v=<?= filemtime('app/css/theme-color.php'); ?>">

Origin custom.php was loaded with no such query, should this add it?

Copilot · 2026-04-02T13:23:47Z

+$themeColor = getThemeColorOpt();
+?>
+
+:root {
+  --raspap-theme-color: <?php echo htmlspecialchars($themeColor, ENT_QUOTES, 'UTF-8'); ?>;
+  --raspap-theme-color-lighter: <?php echo htmlspecialchars(lightenColor($themeColor, 20), ENT_QUOTES, 'UTF-8'); ?>;
+  --raspap-theme-color-darker: <?php echo htmlspecialchars(darkenColor($themeColor, 20), ENT_QUOTES, 'UTF-8'); ?>;


theme-color.php computes lighter/darker variants via lightenColor() / darkenColor(), but getThemeColorOpt() currently allows non-hex formats (e.g., rgb(...), named colors). The lighten/darken helpers assume a #RRGGBB string and will produce incorrect results or warnings for other formats. Either constrain getThemeColorOpt() to validated hex only, or add conversion logic before calling the helpers and fall back safely when conversion isn’t possible.

Suggested change

$themeColor = getThemeColorOpt();

?>

:root {

--raspap-theme-color: <?php echo htmlspecialchars($themeColor, ENT_QUOTES, 'UTF-8'); ?>;

--raspap-theme-color-lighter: <?php echo htmlspecialchars(lightenColor($themeColor, 20), ENT_QUOTES, 'UTF-8'); ?>;

--raspap-theme-color-darker: <?php echo htmlspecialchars(darkenColor($themeColor, 20), ENT_QUOTES, 'UTF-8'); ?>;

/**

* Normalize a CSS color string to a #RRGGBB hex color if possible.

* Returns the normalized hex string or null if the input is not a hex color.

*

* This ensures we only pass valid hex colors to lightenColor()/darkenColor().

*

* @param string $color

* @return string|null

*/

function normalizeHexColorOrNull($color)

{

if (!is_string($color)) {

return null;

}

$color = trim($color);

// Match #RGB or #RRGGBB (case-insensitive)

if (!preg_match('/^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/', $color, $matches)) {

return null;

}

$hex = ltrim($matches[0], '#');

// Expand 3-digit hex (#RGB) to 6-digit (#RRGGBB)

if (strlen($hex) === 3) {

$hex = $hex[0] . $hex[0]

. $hex[1] . $hex[1]

. $hex[2] . $hex[2];

}

return '#' . strtoupper($hex);

}

$themeColor = getThemeColorOpt();

$themeColorHex = normalizeHexColorOrNull($themeColor);

?>

:root {

--raspap-theme-color: <?php echo htmlspecialchars($themeColor, ENT_QUOTES, 'UTF-8'); ?>;

--raspap-theme-color-lighter: <?php echo htmlspecialchars($themeColorHex !== null ? lightenColor($themeColorHex, 20) : $themeColor, ENT_QUOTES, 'UTF-8'); ?>;

--raspap-theme-color-darker: <?php echo htmlspecialchars($themeColorHex !== null ? darkenColor($themeColorHex, 20) : $themeColor, ENT_QUOTES, 'UTF-8'); ?>;

Copilot · 2026-04-02T13:23:47Z

+        <label class="form-check-label" id="theme-mode">
+          <i id="theme-mode-icon" class=" far mr-1 text-muted"></i>
+        </label>


The theme mode control is rendered as a <label> with a click handler but no associated form control, button semantics, or keyboard support. This is not accessible (screen readers won’t announce it as a control, and keyboard users may not be able to toggle it). Consider using a <button type="button"> (or add role="button", tabindex="0", and key handlers) and provide an aria-label describing the current/next mode.

Suggested change

<label class="form-check-label" id="theme-mode">

<i id="theme-mode-icon" class=" far mr-1 text-muted"></i>

</label>

<button type="button" class="form-check-label btn btn-link p-0" id="theme-mode" aria-label="Toggle theme mode">

<i id="theme-mode-icon" class=" far mr-1 text-muted"></i>

</button>

Co-authored-by: Copilot <[email protected]>

billz · 2026-04-19T15:58:49Z

@1208nn this PR was submitted in parallel with @Jixabon's work refactoring our JS + CSS assets. there are significant conflicts here, so I suggest you pull the latest from master to see how best to apply your changes. closing this for now, thanks

Rename Night Mode to Dark Mode

d97d5f3

fix conslole error when not on dhcp page

billz requested a review from Jixabon March 31, 2026 13:30

1208nn mentioned this pull request Mar 31, 2026

Better theme experience #2087

Open

1208nn added 3 commits March 31, 2026 23:18

使用 base.css 替代 all.css，并优化导入

f9fbc1e

Rename base.css to all.css and optimize import

Refactor main.js for improved readability and consistency; update for…

a613c92

…matting, variable declarations, and event handling

重构主题管理，使用 default.css 替代 custom.php，抽离主题颜色支持

9ca08c5

Staticize default style, extracting dynamic parts

github-advanced-security AI found potential problems Mar 31, 2026

View reviewed changes

Comment thread app/js/ui/main.js Fixed

Comment thread app/js/ui/main.js Fixed

1208nn added 6 commits April 1, 2026 09:23

Standardize some formats

0d3e574

移除未使用的 setupTabs 函数和相关调用

f90854c

Remove Unused

Clarify theme-related words.

5de2b5b

ThemeColor -> User selected color (done); ThemeMode -> light / dark / system (WIP); Theme -> A Full set stlye (default / HackerNews / etc...) (WIP)

fix: CodeQL DOM text reinterpreted as HTML

f344048

Update gitignore, generate composer.lock

635b8ee

Ready

5706d31

1208nn marked this pull request as ready for review April 2, 2026 13:17

Copilot AI review requested due to automatic review settings April 2, 2026 13:17

Copilot started reviewing on behalf of 1208nn April 2, 2026 13:17 View session

Copilot AI reviewed Apr 2, 2026

View reviewed changes

Apply suggestion from @Copilot

59134e7

Co-authored-by: Copilot <[email protected]>

github-advanced-security AI found potential problems Apr 2, 2026

View reviewed changes

Comment thread app/js/ui/main.js Fixed

1208nn and others added 4 commits April 2, 2026 22:16

Apply suggestions from code review

1299a0d

Co-authored-by: Copilot <[email protected]>

fix: encode theme selection to prevent issues with special characters

14c9014

fix: improve theme cookie handling and ensure proper default value

e8d921f

fix: correct icon class for theme mode in navbar

f46f162

Jixabon mentioned this pull request Apr 5, 2026

Maintenance: Refactor CSS & Themes #2092

Merged

billz closed this Apr 19, 2026

Navigation Menu

Uh oh!

Uh oh!

Better theme experience - #2088

Better theme experience#2088
1208nn wants to merge 15 commits into
RaspAP:masterfrom
1208nn:feat/betterthemeexp

1208nn commented Mar 31, 2026 •

edited

Loading

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Apr 2, 2026

Uh oh!

1208nn Apr 3, 2026

Uh oh!

Uh oh!

Copilot AI Apr 2, 2026

Uh oh!

Uh oh!

Copilot AI Apr 2, 2026

Uh oh!

Uh oh!

Uh oh!

billz commented Apr 19, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

	<link rel="stylesheet" href="app/css/theme-color.php'); ?>">
	<link rel="stylesheet" href="app/css/theme-color.php?v=<?= filemtime('app/css/theme-color.php'); ?>">

-$themeColor = getThemeColorOpt();
-?>
-:root {
-  --raspap-theme-color: <?php echo htmlspecialchars($themeColor, ENT_QUOTES, 'UTF-8'); ?>;
-  --raspap-theme-color-lighter: <?php echo htmlspecialchars(lightenColor($themeColor, 20), ENT_QUOTES, 'UTF-8'); ?>;
-  --raspap-theme-color-darker: <?php echo htmlspecialchars(darkenColor($themeColor, 20), ENT_QUOTES, 'UTF-8'); ?>;
+/**
+ * Normalize a CSS color string to a #RRGGBB hex color if possible.
+ * Returns the normalized hex string or null if the input is not a hex color.
+ *
+ * This ensures we only pass valid hex colors to lightenColor()/darkenColor().
+ *
+ * @param string $color
+ * @return string|null
+ */
+function normalizeHexColorOrNull($color)
+{
+    if (!is_string($color)) {
+        return null;
+    }
+    $color = trim($color);
+    // Match #RGB or #RRGGBB (case-insensitive)
+    if (!preg_match('/^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/', $color, $matches)) {
+        return null;
+    }
+    $hex = ltrim($matches[0], '#');
+    // Expand 3-digit hex (#RGB) to 6-digit (#RRGGBB)
+    if (strlen($hex) === 3) {
+        $hex = $hex[0] . $hex[0]
+            . $hex[1] . $hex[1]
+            . $hex[2] . $hex[2];
+    }
+    return '#' . strtoupper($hex);
+}
+$themeColor = getThemeColorOpt();
+$themeColorHex = normalizeHexColorOrNull($themeColor);
+?>
+:root {
+  --raspap-theme-color: <?php echo htmlspecialchars($themeColor, ENT_QUOTES, 'UTF-8'); ?>;
+  --raspap-theme-color-lighter: <?php echo htmlspecialchars($themeColorHex !== null ? lightenColor($themeColorHex, 20) : $themeColor, ENT_QUOTES, 'UTF-8'); ?>;
+  --raspap-theme-color-darker: <?php echo htmlspecialchars($themeColorHex !== null ? darkenColor($themeColorHex, 20) : $themeColor, ENT_QUOTES, 'UTF-8'); ?>;

Uh oh!

Uh oh!

Conversation

1208nn commented Mar 31, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

#2087

Text Below Generated By AI

CSS Refactoring and Theming

Documentation

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Apr 2, 2026

Choose a reason for hiding this comment

Uh oh!

1208nn Apr 3, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Copilot AI Apr 2, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Copilot AI Apr 2, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

billz commented Apr 19, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

1208nn commented Mar 31, 2026 •

edited

Loading