Implement dark mode with medieval grey/brown theme as default for web client by Copilot · Pull Request #32 · Preponderous-Software/barony

Copilot · 2026-02-16T00:22:14Z

Implement dark mode for web app
Replace purple theme with grey/brown medieval color scheme per user feedback
Move login.html inline styles to shared style.css (reviewer feedback)
Move .user-info inline styles to style.css (reviewer feedback)
Remove redundant clearRect() in canvas drawing (reviewer feedback)
Update canvas colors for medieval theme
Scope global label styles to .form-group label to avoid layout interference with .policy-section flex rows (reviewer feedback)
Run code review and CodeQL checks

Screenshots

Game Page (Medieval Theme):

Login Page (Medieval Theme):

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

Co-authored-by: dmccoystephenson <21204351+dmccoystephenson@users.noreply.github.com>

Copilot

Pull request overview

Updates the web client’s UI styling so dark mode becomes the default theme across the login and game pages.

Changes:

Updated global stylesheet colors (backgrounds, text, panels, inputs/selects, scrollbar track) for a dark theme.
Updated login.html inline styles to match the dark theme.
Updated game.html to use a dark user-info bar and to explicitly paint a dark canvas background before drawing.

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 3 comments.

File	Description
`web-client/src/main/resources/templates/login.html`	Dark-themed inline CSS for the login page (background, container, inputs, error state).
`web-client/src/main/resources/templates/game.html`	Darker user-info bar and canvas background fill to avoid bright flashes/transparent clears.
`web-client/src/main/resources/static/css/style.css`	Dark default styling for the main game UI, including panels, form controls, and canvas container.

Comments suppressed due to low confidence (1)

web-client/src/main/resources/static/css/style.css:81

In style.css, headings now use the new accent color #7b8cff, but .info-section still uses the old accent #667eea for its left border. Consider updating this border color (or centralizing accents via a CSS variable) so the theme stays consistent and avoids mixed accent colors.

.info-section {
    background: #2a2a3d;
    padding: 15px;
    border-radius: 8px;
    border-left: 4px solid #667eea;
}

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

Copilot · 2026-02-16T00:39:48Z

    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
+            color: #e0e0e0;
        }

        .login-container {
-            background: white;
+            background: #1e1e2f;
            padding: 40px;
            border-radius: 15px;
-            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
+            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
            max-width: 400px;
            width: 90%;
        }


login.html duplicates most of the global theme styling (body/container/error/button colors) instead of reusing the shared stylesheet used by game.html. This will make future theme changes require editing both files and increases the risk of visual drift; consider linking /css/style.css here and moving the login-specific rules into the shared CSS (or a small login-only CSS file).

Moved all login page inline styles to the shared style.css and replaced the inline <style> block with a <link> to /css/style.css. Login-specific layout overrides (flexbox centering, no padding) are kept in a minimal inline <style> tag. See fb4fee8.

Copilot · 2026-02-16T00:39:49Z

+        <div class="user-info" style="text-align: center; margin-bottom: 20px; padding: 10px; background: #2a2a3d; border-radius: 8px;">
            <p style="margin: 5px 0;"><strong>Player:</strong> <span id="currentUsername">Loading...</span></p>
            <button onclick="logout()" style="background: #dc3545; color: white; border: none; padding: 8px 16px; border-radius: 4px; cursor: pointer; font-weight: bold;">Logout</button>


The .user-info element uses a class but still relies on a long inline style attribute for layout and background color. Moving these styles into style.css (e.g., .user-info { ... }) will keep them consistent with the rest of the page theme and reduce inline-style maintenance.

Moved all .user-info inline styles into style.css (including .user-info, .user-info p, and .user-info .logout-button rules). The HTML now uses just class references with no inline style attribute. See fb4fee8.

Copilot · 2026-02-16T00:39:49Z

            // Clear canvas
            ctx.clearRect(0, 0, canvas.width, canvas.height);


drawMap() now does clearRect() immediately followed by a full-canvas fillRect(). Since the fillRect() overwrites every pixel, the clearRect() is redundant work each frame; removing it would slightly reduce per-frame drawing cost.

Suggested change

// Clear canvas

ctx.clearRect(0, 0, canvas.width, canvas.height);

// Clear canvas by drawing background

Removed the redundant clearRect() call since the fillRect() overwrites every pixel. Updated the comment to "Fill canvas with background color" for clarity. See 91cb4db.

dmccoystephenson · 2026-02-16T00:45:47Z

@copilot abandon purple theme, go for grey and brown for a medieval look

… to shared CSS, move user-info inline styles to CSS, remove redundant clearRect Co-authored-by: dmccoystephenson <21204351+dmccoystephenson@users.noreply.github.com>

Co-authored-by: dmccoystephenson <21204351+dmccoystephenson@users.noreply.github.com>

Copilot · 2026-02-16T00:54:20Z

@copilot abandon purple theme, go for grey and brown for a medieval look

Replaced the purple theme with a grey/brown medieval color scheme in fb4fee8. Key colors: dark brown backgrounds (#1a1510, #2b2520, #352f28), gold accents for headings (#c9a96e), warm tan borders (#8b7355), parchment-toned text (#d4cfc8), and earthy brown buttons (#6b5a3e).

Copilot

Pull request overview

Copilot reviewed 3 out of 3 changed files in this pull request and generated 1 comment.

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

Copilot · 2026-02-16T00:57:42Z

+label {
+    display: block;
+    margin-bottom: 8px;
+    color: #d4cfc8;
+    font-weight: bold;


The global label { display: block; margin-bottom: 8px; ... } rule will also apply to the game page policy controls (.policy-section is a flex row). This can introduce unintended vertical spacing / layout changes there. Consider scoping these label styles to the login form (e.g., .login-container label or .form-group label) or explicitly overriding in .policy-section label (e.g., margin-bottom: 0;).

Scoped the label rule to .form-group label so it only applies within login form groups and won't interfere with .policy-section flex layout. See 9e97ac5.

dmccoystephenson · 2026-02-16T01:00:51Z

@copilot address comment

…icy-section flex layout Co-authored-by: dmccoystephenson <21204351+dmccoystephenson@users.noreply.github.com>

Copilot · 2026-02-16T01:02:28Z

@copilot address comment

Addressed in 9e97ac5 — scoped label styles to .form-group label to prevent layout interference with the policy controls flex rows.

Initial plan

b3a9073

Copilot AI assigned Copilot and dmccoystephenson Feb 16, 2026

Copilot started work on behalf of dmccoystephenson February 16, 2026 00:22 View session

Implement dark mode for web app and make it the default

9dc58c2

Co-authored-by: dmccoystephenson <21204351+dmccoystephenson@users.noreply.github.com>

Copilot AI changed the title ~~[WIP] Implement dark mode as the default setting for web app~~ Implement dark mode as default theme for web client Feb 16, 2026

Copilot AI requested a review from dmccoystephenson February 16, 2026 00:32

Copilot finished work on behalf of dmccoystephenson February 16, 2026 00:32

dmccoystephenson requested a review from Copilot February 16, 2026 00:36

Copilot started reviewing on behalf of dmccoystephenson February 16, 2026 00:37 View session

dmccoystephenson marked this pull request as ready for review February 16, 2026 00:38

Copilot AI reviewed Feb 16, 2026

View reviewed changes

Copilot started work on behalf of dmccoystephenson February 16, 2026 00:46 View session

Copilot AI and others added 2 commits February 16, 2026 00:53

Replace purple theme with grey/brown medieval look, move login styles…

fb4fee8

… to shared CSS, move user-info inline styles to CSS, remove redundant clearRect Co-authored-by: dmccoystephenson <21204351+dmccoystephenson@users.noreply.github.com>

Fix canvas comment wording per code review

91cb4db

Co-authored-by: dmccoystephenson <21204351+dmccoystephenson@users.noreply.github.com>

dmccoystephenson requested a review from Copilot February 16, 2026 00:54

Copilot AI changed the title ~~Implement dark mode as default theme for web client~~ Implement dark mode with medieval grey/brown theme as default for web client Feb 16, 2026

Copilot finished work on behalf of dmccoystephenson February 16, 2026 00:54

Copilot started reviewing on behalf of dmccoystephenson February 16, 2026 00:55 View session

Copilot AI reviewed Feb 16, 2026

View reviewed changes

Copilot started work on behalf of dmccoystephenson February 16, 2026 01:01 View session

Scope global label styles to .form-group label to avoid affecting pol…

9e97ac5

…icy-section flex layout Co-authored-by: dmccoystephenson <21204351+dmccoystephenson@users.noreply.github.com>

Copilot finished work on behalf of dmccoystephenson February 16, 2026 01:02

dmccoystephenson merged commit e41b7fc into main Feb 16, 2026
3 checks passed

dmccoystephenson deleted the copilot/implement-dark-mode-default branch February 16, 2026 04:35

		// Clear canvas
		ctx.clearRect(0, 0, canvas.width, canvas.height);

	// Clear canvas
	ctx.clearRect(0, 0, canvas.width, canvas.height);
	// Clear canvas by drawing background

Conversation

Copilot AI commented Feb 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Screenshots

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Feb 16, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 16, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 16, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 16, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 16, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 16, 2026

Choose a reason for hiding this comment

Uh oh!

dmccoystephenson commented Feb 16, 2026

Uh oh!

Copilot AI commented Feb 16, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI Feb 16, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 16, 2026

Choose a reason for hiding this comment

Uh oh!

dmccoystephenson commented Feb 16, 2026

Uh oh!

Copilot AI commented Feb 16, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Copilot AI commented Feb 16, 2026 •

edited

Loading