Skip to content

Add support for darkmode #27

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

Closed
wants to merge 5 commits into from
Closed

Add support for darkmode #27

Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
f069498
Move colors to css variables
zebreus Feb 9, 2024
8b67e1f
Unify similar colors
zebreus Feb 9, 2024
4d22767
Adjust css color descriptions
zebreus Feb 9, 2024
095429a
Add support for prefers-color-scheme: dark
zebreus Feb 9, 2024
a12c4d2
Use css variables
zebreus Feb 10, 2024
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
161 changes: 107 additions & 54 deletions src/styles/index.less
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,74 @@
@color_borg: #2D8F34;
@color_debug: #8F2D87;
@color_man: #424775;
@color_man_bg: #EDF3FF;
@color_header_bg: #eeeeee;
@color_header_fg: #005FFF;
@color_tab_bg: #AFFFFF;
@color_tab_selected: #ffffff;
@color_tab_focus: #DC00B8;

@line_height: 1.3rem;
@header_height: @line_height;
:root {
/* Background color of the body */
/* Text color for the borg screen of death */
--color-bg: #ffffff;
/* Background color for man messages */
--color-man-bg: #EDF3FF;
/* Background color for the header bar */
/* Line color between log messages */
--color-header-bg: #eeeeee;
/* Background color of the line that shows the builder (below the header) */
--color-builder-bg: #FFFAAF;
/* Foreground color of the line that shows the builder (below the header) */
--color-builder: #5270A3;

/* Background color for the selected header tab if it is not focused */
--color-tab-selected: #005FFF;
/* Background color for non-selected tabs */
/* Background color for hovered, focused or active links */
--color-tab-unselected: #AFFFFF;
/* Background color of the focused tab */
--color-tab-focus: #DC00B8;
/* Text color for the header bar */
/* Text color of unclicked links. */
--color-tab-text: var(--color-tab-selected);
/* Text color for selected tabs (also if they are selected) */
--color-tab-selected-text: var(--color-bg);

/* Default text color of the body */
--color-text: #000000;
/* Text color for ofborg and stomp messages */
/* Color of the message that you require js */
/* Text color of the line that shows the builder (below the header) */
--color-info: rgba(0, 0, 0, 0.5);
/* Text color for error messages */
--color-error: #BA3300;

/* Left border color for borg messages, like man or system information */
/* Background of the borg screen of death */
--color-borg: #2D8F34;
/* Left border color for man messages */
--color-man: #424775;
/* Text color for stompjs debug messages */
/* Text color for visited links */
--color-debug: #8F2D87;

/* Line height */
--line-height: 1.3rem;
/* Header height */
--header-height: var(--line-height);
}

@media (prefers-color-scheme: dark) {
:root {
--color-bg: #1e1e1e;
--color-man-bg: #272727;
--color-header-bg: #303030;
--color-builder-bg: #cd9309;
--color-builder: rgba(0, 0, 0, 0.8);
--color-tab-selected: #444444;
--color-tab-unselected: #00000000;
--color-tab-focus: #4b4b4b;
--color-tab-text: var(--color-text);
--color-tab-selected-text: var(--color-text);
--color-text: #ffffff;
--color-info: rgba(255, 255, 255, 0.5);
--color-error: #ff7b63;
--color-borg: #26a269;
--color-man: #1a5fb4;
--color-debug: #613583;
}
}

#no-select {
-webkit-touch-callout: none;
Expand All @@ -22,11 +81,11 @@
}

body {
color: #000000;
background-color: #ffffff;
color: var(--color-text);
background-color: var(--color-bg);
margin: 0;
padding: 0;
line-height: @line_height;
line-height: var(--line-height);
font-family:
"Go Mono",
"DejaVu Sans Mono",
Expand All @@ -36,8 +95,8 @@ body {
}

.bsod {
background: @color_borg;
color: #ffffff;
background: var(--color-borg);
color: var(--color-bg);
white-space: pre;
}

Expand All @@ -46,7 +105,7 @@ body {
display: block;
}
em {
color: #666;
color: var(--color-info);
}
}

Expand All @@ -55,9 +114,9 @@ body {
}

.app > header {
background: @color_header_bg;
color: @color_header_fg;
height: @header_height;
background: var(--color-header-bg);
color: var(--color-tab-text);
height: var(--header-height);
z-index: 10;
position: sticky;
top: 0;
Expand Down Expand Up @@ -97,7 +156,7 @@ body {

ul > li {
display: inline-block;
background-color: @color_tab_bg;
background-color: var(--color-tab-unselected);
margin-right: 1em;
}
li > * {
Expand All @@ -123,14 +182,14 @@ body {
}
li {
&:focus, &.__focus {
color: @color_tab_selected;
background-color: @color_tab_focus;
color: var(--color-tab-selected-text);
background-color: var(--color-tab-focus);
}
}

.selected {
color: @color_tab_selected;
background-color: @color_header_fg;
color: var(--color-tab-selected-text);
background-color: var(--color-tab-selected);
}
}

Expand All @@ -142,7 +201,7 @@ body {

// A logger pane.
.logger-log {
@left_border: 1em;
--left-border: 1em;

// Makes it mostly behave like pre.
// But with more wrapping.
Expand All @@ -151,48 +210,44 @@ body {

// All lines.
& > * {
border-bottom: 0.05em solid #eee;
padding-left: @left_border;
min-height: @line_height;
border-bottom: 0.05em solid var(--color-header-bg);
padding-left: var(--left-border);
min-height: var(--line-height);
}

a {
color: @color_header_fg;
color: var(--color-tab-text);
text-decoration: underline;
&:hover, &:focus, &:active {
background-color: @color_tab_bg;
background-color: var(--color-tab-unselected);
}
&:visited {
color: @color_debug;
color: var(--color-debug);
}
}

// Specially tagged messages.
.ofborg, .stomp, .man {
border-left: @left_border/2 solid transparent;
padding-left: @left_border/2;
border-left: calc(var(--left-border) / 2) solid transparent;
padding-left: calc(var(--left-border) / 2);
}
.ofborg, .stomp {
color: #888;
color: var(--color-info);
}

// And their (tagged) colors.
.ofborg {
border-left-color: @color_borg;
border-left-color: var(--color-borg);
}
.stomp {
border-left-color: @color_debug;
border-left-color: var(--color-debug);
}
.stderr {
color: #BA3300;
color: var(--color-error);
}
.man {
border-left-color: @color_man;
background-color: @color_man_bg;
}

// The previous bits of logs.
&.backlog {
border-left-color: var(--color-man);
background-color: var(--color-man-bg);
}

// The "live" part of the logs.
Expand All @@ -212,22 +267,20 @@ body {

.logger .identity {
z-index: 1;
background: #FFFAAF;
color: #5270A3;
min-height: @line_height;
background: var(--color-builder-bg);
color: var(--color-builder);
min-height: var(--line-height);
position: sticky;
top: @header_height;
top: var(--header-height);
left: 0;
right: 0;
}

@keyframes flash {
@low: 0.1;

0% {opacity: @low;}
0% {opacity: 0.1;}
16.6% {opacity: 1;}
33.3% {opacity: @low;}
33.3% {opacity: 0.1;}
50% {opacity: 1;}
66.6% {opacity: @low;}
66.6% {opacity: 0.1;}
100% {opacity: 1;}
}