Skip to content

more lexxy darkmode fixes #47

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
BillyRuffian merged 1 commit into from
Jan 7, 2026
Merged

more lexxy darkmode fixes #47

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
50 changes: 45 additions & 5 deletions app/assets/stylesheets/application.bootstrap.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1169,6 +1169,31 @@
/* Content area */
.lexxy-editor__content {
color: var(--lexxy-color-ink);
background-color: var(--lexxy-color-canvas);
}

/* Tables inside the editor - dark mode fix */
table {
background-color: var(--lexxy-color-canvas);

th,
td {
background-color: var(--lexxy-color-canvas);
border-color: var(--border-color);
color: var(--lexxy-color-ink);
}

/* Header cells */
th,
.lexxy-content__table-cell--header {
background-color: var(--lexxy-color-table-header-bg);
}

/* Selected cells */
.table-cell--selected,
.lexxy-content__table-cell--selected {
background-color: var(--lexxy-color-selected) !important;
}
}

/* Inputs inside dropdowns */
Expand Down Expand Up @@ -1487,21 +1512,36 @@ lexxy-editor,
width: unset;
inline-size: calc(100% - 0.5ch);
margin: 0.25ch;

Copilot AI Jan 7, 2026

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Remove trailing whitespace at the end of this line.

Suggested change

Copilot uses AI. Check for mistakes.
/* Use canvas color for table background - adapts to dark mode */
background-color: var(--lexxy-color-canvas, white);

th,
/* Header cells - th elements get header background */
th {
border: 1px solid var(--lexxy-color-ink-lighter, #dee2e6);
padding: 1ch;
text-align: start;
background-color: var(--lexxy-color-table-header-bg, #f8f9fa);
color: var(--lexxy-color-ink, inherit);
font-weight: bold;
vertical-align: top;
box-shadow: none;
}

/* Regular cells */
td {
border: 1px solid var(--lexxy-color-ink-lighter, #dee2e6);
padding: 1ch;
text-align: start;
background-color: transparent;
background-color: var(--lexxy-color-canvas, white);
color: var(--lexxy-color-ink, inherit);
vertical-align: top;
/* Reset Bootstrap's td/th padding */
box-shadow: none;
}

/* Header cell styling */
/* Header cell class styling (for cells marked as headers via class) */
.lexxy-content__table-cell--header {
background-color: var(--lexxy-color-ink-lightest, #f8f9fa);
background-color: var(--lexxy-color-table-header-bg, #f8f9fa) !important;
font-weight: bold;
}
}
Expand Down
7 changes: 6 additions & 1 deletion app/assets/stylesheets/lexxy-content.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -208,6 +208,11 @@
inline-size: calc(100% - 0.5ch);
margin: 0.25ch;

th {
background-color: var(--lexxy-color-table-header-bg);
font-weight: bold;
}

th,
td {
border: 1px solid var(--lexxy-color-ink-lighter);
Expand All @@ -220,7 +225,7 @@
}

&.lexxy-content__table-cell--header {
background-color: var(--lexxy-color-ink-lightest);
background-color: var(--lexxy-color-table-header-bg);
font-weight: bold;
}

Expand Down
48 changes: 48 additions & 0 deletions app/assets/stylesheets/lexxy-variables.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,4 +78,52 @@
--lexxy-radius: 0.5ch;
--lexxy-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
--lexxy-z-popup: 1000;
}

/* Dark mode overrides */
@media (prefers-color-scheme: dark) {
:root {
/* Invert the ink colors for dark backgrounds */
--lexxy-color-ink: #e9ecef;
--lexxy-color-ink-medium: #adb5bd;
--lexxy-color-ink-light: #6c757d;
--lexxy-color-ink-lighter: #6c757d;

Copilot AI Jan 7, 2026

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The variables --lexxy-color-ink-light and --lexxy-color-ink-lighter are both set to the same color value #6c757d. These variables should represent different lightness levels in the dark mode color scheme. Consider adjusting one of these values to maintain the intended color hierarchy, similar to how they differ in the light mode (lines 5-6).

Suggested change
--lexxy-color-ink-lighter: #6c757d;
--lexxy-color-ink-lighter: #868e96;

Copilot uses AI. Check for mistakes.
--lexxy-color-ink-lightest: #2d2d2d;
--lexxy-color-ink-inverted: #1a1a1a;

/* Canvas and text colors */
--lexxy-color-canvas: #2d2d2d;
--lexxy-color-text: #e9ecef;
--lexxy-color-text-subtle: #adb5bd;

/* Link and accent colors - brighter for dark mode */
--lexxy-color-link: #6ea8fe;
--lexxy-color-accent-dark: #6ea8fe;
--lexxy-color-accent-medium: #9ec5fe;
--lexxy-color-accent-light: #3d5a80;
--lexxy-color-accent-lightest: #2d3d50;

/* Selection colors */
--lexxy-color-selected: rgba(110, 168, 254, 0.2);
--lexxy-color-selected-hover: rgba(110, 168, 254, 0.3);
--lexxy-color-selected-dark: #6ea8fe;

/* Code colors for dark mode */
--lexxy-color-code-bg: rgba(255, 255, 255, 0.1);
--lexxy-color-code-token-att: #ff7b72;
--lexxy-color-code-token-comment: #8b949e;
--lexxy-color-code-token-function: #d2a8ff;
--lexxy-color-code-token-operator: #ff7b72;
--lexxy-color-code-token-property: #79c0ff;
--lexxy-color-code-token-punctuation: #c9d1d9;
--lexxy-color-code-token-selector: #7ee787;
--lexxy-color-code-token-variable: #ffa657;

/* Table colors */
--lexxy-color-table-header-bg: #4a4a4a;
--lexxy-color-table-cell-border: #6c757d;

/* Shadow for dark mode */
--lexxy-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}
}