Skip to content

Commit 99784ed

Browse files
UnthrottledUnthrottled
authored
Light Theme Usability (#61)
1 parent d55b687 commit 99784ed

82 files changed

Lines changed: 1838 additions & 869 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎CHANGELOG.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,10 @@
11
Changelog
22
---
33

4+
# 78.0-1.0.1 [Light Theme Enhancements]
5+
6+
- Made the light themes a bit more usable (Now that I am actually using them).
7+
48
# 78.0-1.0.0 [The Boys]
59

610
I'm trying to bring in a bit of inclusion.

‎buildSrc/assets/templates/tempCss.css.txt‎

Lines changed: 22 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,6 @@
4949
--color-avatar-border: #00000000 !important;
5050
--color-bg-canvas: {{baseBackground}} !important;
5151
--color-canvas-inset: {{baseBackground}} !important;
52-
--color-canvas-inset: {{baseBackground}} !important;
5352
--color-canvas-overlay: {{secondaryBackground}} !important;
5453
--color-bg-primary: {{baseBackground}} !important;
5554
--color-calendar-graph-day-bg: {{codeBlock}} !important;
@@ -89,8 +88,20 @@
8988
--color-input-disabled-border: {{borderColor}} !important;
9089
--color-text-secondary: {{infoForeground}} !important;
9190
--color-text-tertiary: {{lineNumberColor}} !important;
91+
--color-primer-fg-disabled: {{disabledColor}} !important;
92+
--lightness-threshold: 0.453 !important;
9293
}
9394

95+
[data-color-mode="light"][data-light-theme*="dark"] .hx_IssueLabel, [data-color-mode="dark"][data-dark-theme*="dark"] .hx_IssueLabel {
96+
--lightness-threshold: {{lightnessThreshold}} !important;
97+
--background-alpha: 0.18;
98+
--border-alpha: 0.3;
99+
--lighten-by: calc(((var(--lightness-threshold) - var(--perceived-lightness)) * 100) * var(--lightness-switch));
100+
color: {{issueLabelColor}};
101+
background: {{issueLabelBackground}};
102+
border-color: hsla(var(--label-h), calc(var(--label-s) * 1%), calc((var(--label-l) + var(--lighten-by)) * 1%), var(--border-alpha));
103+
}
104+
94105
.suggester li:hover .octicon,
95106
.suggester li[aria-selected="true"] .octicon {
96107
fill: {{defaultButtonColor|selectionForeground}};
@@ -160,6 +171,10 @@
160171
fill: {{baseIconColor}};
161172
}
162173

174+
.octicon .octicon-git-merge {
175+
fill: {{baseBackground}} !important;
176+
}
177+
163178
.btn-primary .octicon {
164179
fill: {{defaultButtonColor|selectionForeground}} !important;
165180
}
@@ -13654,21 +13669,18 @@
1365413669
.Label--orange {
1365513670
background-color: #f3582c;
1365613671
}
13657-
/* source #9: "#6a737d" */
13658-
.state, .State {
13659-
background-color: #444;
13660-
}
13672+
1366113673
/* source #9: "#2cbe4e" */
1366213674
.State--green {
13663-
background-color: #373;
13675+
background-color: {{breakpointActiveColor}};
1366413676
}
1366513677
/* source #9: "#6f42c1" */
1366613678
.State--purple {
13667-
background-color: #8368aa;
13679+
background-color: {{filePurple}};
1366813680
}
1366913681
/* source #9: "#cb2431" */
1367013682
.State--red {
13671-
background-color: #911;
13683+
background-color: {{diff.conflict}};
1367213684
}
1367313685
/* source #9: "color: #586069", "rgba(27,31,35,.08)" */
1367413686
.Counter {
@@ -14688,7 +14700,7 @@
1468814700
}
1468914701
/* source #14: "color: rgba(36,41,46,.4)", "#eff3f6", "none", "rgba(27,31,35,0.2)", "box-shadow: none" */
1469014702
.btn.disabled, .btn:disabled, .btn[aria-disabled="true"] {
14691-
color: rgba(210, 210, 210, 0.4);
14703+
color: {{disabledColor}};
1469214704
background-color: {{selectionInactive}};
1469314705
background-image: none;
1469414706
border-color: rgba(200, 200, 200, 0.15);
@@ -17878,7 +17890,7 @@ div[style*="background-color: #044d6e"],
1787817890
background: radial-gradient(ellipse at center, #000 0%, rgba(0, 0, 0, .6) 65%, rgba(0, 0, 0, .6) 100%) !important;
1787917891
}
1788017892
.TimelineItem-break {
17881-
background: linear-gradient(to bottom, rgba(25, 25, 25, .8) 1%, transparent 80%) !important;
17893+
background: linear-gradient(to bottom, {{lightEditorColor}} 1%, transparent 80%) !important;
1788217894
}
1788317895
/* light grey gradient */
1788417896
.signup-button:hover, a.signin:hover, .hero .textographic,

‎buildSrc/src/BuildThemes.ts‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,9 @@ import {
44
DokiThemeDefinitions,
55
evaluateTemplates,
66
fillInTemplateScript,
7+
getColorFromTemplate,
78
MasterDokiThemeDefinition,
9+
resolveColor,
810
resolvePaths,
911
} from 'doki-build-source';
1012

@@ -95,6 +97,21 @@ function evaluateTemplate(
9597
),
9698
accentColorEditor: dokiThemeDefinition.overrides?.editorScheme?.colors?.accentColor ||
9799
dokiThemeDefinition.colors.accentColor,
100+
lightnessThreshold: dokiThemeDefinition.dark ? 0.6 : 0.453,
101+
issueLabelColor: dokiThemeDefinition.dark ? 'hsl(var(--label-h), calc(var(--label-s) * 1%), calc((var(--label-l) + var(--lighten-by)) * 1%))' : 'hsl(0deg, 0%, calc(var(--lightness-switch) * 100%))',
102+
issueLabelBackground: dokiThemeDefinition.dark ? 'rgba(var(--label-r), var(--label-g), var(--label-b), var(--background-alpha))' : 'rgb(var(--label-r), var(--label-g), var(--label-b));',
103+
},
104+
(templateVariable, templateVariables) => {
105+
const colorFromTemplate = getColorFromTemplate(templateVariables, templateVariable);
106+
if(typeof colorFromTemplate === 'number') {
107+
return colorFromTemplate;
108+
}
109+
110+
const hexColor = resolveColor(
111+
colorFromTemplate,
112+
templateVariables
113+
);
114+
return hexColor;
98115
}
99116
);
100117
} catch (e) {

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "doki-theme-github",
3-
"version": "78.1.0",
3+
"version": "78.1.1",
44
"dependencies": {
55
}
66
}

‎themes/aqua.user.css‎

Lines changed: 23 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/* ==UserStyle==
22
@name Doki-Theme: Aqua
33
@namespace github.com/doki-theme
4-
@version 78.1.0
4+
@version 78.1.1
55
@description Cute anime themes for GitHub
66
@author Unthrottled
77
@license MIT
@@ -49,7 +49,6 @@
4949
--color-avatar-border: #00000000 !important;
5050
--color-bg-canvas: #282b42 !important;
5151
--color-canvas-inset: #282b42 !important;
52-
--color-canvas-inset: #282b42 !important;
5352
--color-canvas-overlay: #242942 !important;
5453
--color-bg-primary: #282b42 !important;
5554
--color-calendar-graph-day-bg: #2e3149 !important;
@@ -89,8 +88,20 @@
8988
--color-input-disabled-border: #2a334b !important;
9089
--color-text-secondary: #7b8bab !important;
9190
--color-text-tertiary: #61647b !important;
91+
--color-primer-fg-disabled: #585F6F !important;
92+
--lightness-threshold: 0.453 !important;
9293
}
9394

95+
[data-color-mode="light"][data-light-theme*="dark"] .hx_IssueLabel, [data-color-mode="dark"][data-dark-theme*="dark"] .hx_IssueLabel {
96+
--lightness-threshold: 0.6 !important;
97+
--background-alpha: 0.18;
98+
--border-alpha: 0.3;
99+
--lighten-by: calc(((var(--lightness-threshold) - var(--perceived-lightness)) * 100) * var(--lightness-switch));
100+
color: hsl(var(--label-h), calc(var(--label-s) * 1%), calc((var(--label-l) + var(--lighten-by)) * 1%));
101+
background: rgba(var(--label-r), var(--label-g), var(--label-b), var(--background-alpha));
102+
border-color: hsla(var(--label-h), calc(var(--label-s) * 1%), calc((var(--label-l) + var(--lighten-by)) * 1%), var(--border-alpha));
103+
}
104+
94105
.suggester li:hover .octicon,
95106
.suggester li[aria-selected="true"] .octicon {
96107
fill: #fbfbfb;
@@ -160,6 +171,10 @@
160171
fill: #717981;
161172
}
162173

174+
.octicon .octicon-git-merge {
175+
fill: #282b42 !important;
176+
}
177+
163178
.btn-primary .octicon {
164179
fill: #fbfbfb !important;
165180
}
@@ -13654,21 +13669,18 @@
1365413669
.Label--orange {
1365513670
background-color: #f3582c;
1365613671
}
13657-
/* source #9: "#6a737d" */
13658-
.state, .State {
13659-
background-color: #444;
13660-
}
13672+
1366113673
/* source #9: "#2cbe4e" */
1366213674
.State--green {
13663-
background-color: #373;
13675+
background-color: #2b503c;
1366413676
}
1366513677
/* source #9: "#6f42c1" */
1366613678
.State--purple {
13667-
background-color: #8368aa;
13679+
background-color: #342b58;
1366813680
}
1366913681
/* source #9: "#cb2431" */
1367013682
.State--red {
13671-
background-color: #911;
13683+
background-color: #5d323f;
1367213684
}
1367313685
/* source #9: "color: #586069", "rgba(27,31,35,.08)" */
1367413686
.Counter {
@@ -14688,7 +14700,7 @@
1468814700
}
1468914701
/* source #14: "color: rgba(36,41,46,.4)", "#eff3f6", "none", "rgba(27,31,35,0.2)", "box-shadow: none" */
1469014702
.btn.disabled, .btn:disabled, .btn[aria-disabled="true"] {
14691-
color: rgba(210, 210, 210, 0.4);
14703+
color: #585F6F;
1469214704
background-color: #31344b;
1469314705
background-image: none;
1469414706
border-color: rgba(200, 200, 200, 0.15);
@@ -17878,7 +17890,7 @@ div[style*="background-color: #044d6e"],
1787817890
background: radial-gradient(ellipse at center, #000 0%, rgba(0, 0, 0, .6) 65%, rgba(0, 0, 0, .6) 100%) !important;
1787917891
}
1788017892
.TimelineItem-break {
17881-
background: linear-gradient(to bottom, rgba(25, 25, 25, .8) 1%, transparent 80%) !important;
17893+
background: linear-gradient(to bottom, #2a2d44 1%, transparent 80%) !important;
1788217894
}
1788317895
/* light grey gradient */
1788417896
.signup-button:hover, a.signin:hover, .hero .textographic,

‎themes/astolfo.user.css‎

Lines changed: 23 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/* ==UserStyle==
22
@name Doki-Theme: Astolfo
33
@namespace github.com/doki-theme
4-
@version 78.1.0
4+
@version 78.1.1
55
@description Cute anime themes for GitHub
66
@author Unthrottled
77
@license MIT
@@ -49,7 +49,6 @@
4949
--color-avatar-border: #00000000 !important;
5050
--color-bg-canvas: #171816 !important;
5151
--color-canvas-inset: #171816 !important;
52-
--color-canvas-inset: #171816 !important;
5352
--color-canvas-overlay: #141513 !important;
5453
--color-bg-primary: #171816 !important;
5554
--color-calendar-graph-day-bg: #201d1d !important;
@@ -89,8 +88,20 @@
8988
--color-input-disabled-border: #212220 !important;
9089
--color-text-secondary: #957a4d !important;
9190
--color-text-tertiary: #8e856e !important;
91+
--color-primer-fg-disabled: #6f6f6f !important;
92+
--lightness-threshold: 0.453 !important;
9293
}
9394

95+
[data-color-mode="light"][data-light-theme*="dark"] .hx_IssueLabel, [data-color-mode="dark"][data-dark-theme*="dark"] .hx_IssueLabel {
96+
--lightness-threshold: 0.6 !important;
97+
--background-alpha: 0.18;
98+
--border-alpha: 0.3;
99+
--lighten-by: calc(((var(--lightness-threshold) - var(--perceived-lightness)) * 100) * var(--lightness-switch));
100+
color: hsl(var(--label-h), calc(var(--label-s) * 1%), calc((var(--label-l) + var(--lighten-by)) * 1%));
101+
background: rgba(var(--label-r), var(--label-g), var(--label-b), var(--background-alpha));
102+
border-color: hsla(var(--label-h), calc(var(--label-s) * 1%), calc((var(--label-l) + var(--lighten-by)) * 1%), var(--border-alpha));
103+
}
104+
94105
.suggester li:hover .octicon,
95106
.suggester li[aria-selected="true"] .octicon {
96107
fill: #fbfbfb;
@@ -160,6 +171,10 @@
160171
fill: #837e6f;
161172
}
162173

174+
.octicon .octicon-git-merge {
175+
fill: #171816 !important;
176+
}
177+
163178
.btn-primary .octicon {
164179
fill: #fbfbfb !important;
165180
}
@@ -13654,21 +13669,18 @@
1365413669
.Label--orange {
1365513670
background-color: #f3582c;
1365613671
}
13657-
/* source #9: "#6a737d" */
13658-
.state, .State {
13659-
background-color: #444;
13660-
}
13672+
1366113673
/* source #9: "#2cbe4e" */
1366213674
.State--green {
13663-
background-color: #373;
13675+
background-color: #21461c;
1366413676
}
1366513677
/* source #9: "#6f42c1" */
1366613678
.State--purple {
13667-
background-color: #8368aa;
13679+
background-color: #251a32;
1366813680
}
1366913681
/* source #9: "#cb2431" */
1367013682
.State--red {
13671-
background-color: #911;
13683+
background-color: #422121;
1367213684
}
1367313685
/* source #9: "color: #586069", "rgba(27,31,35,.08)" */
1367413686
.Counter {
@@ -14688,7 +14700,7 @@
1468814700
}
1468914701
/* source #14: "color: rgba(36,41,46,.4)", "#eff3f6", "none", "rgba(27,31,35,0.2)", "box-shadow: none" */
1469014702
.btn.disabled, .btn:disabled, .btn[aria-disabled="true"] {
14691-
color: rgba(210, 210, 210, 0.4);
14703+
color: #6f6f6f;
1469214704
background-color: #261c20;
1469314705
background-image: none;
1469414706
border-color: rgba(200, 200, 200, 0.15);
@@ -17878,7 +17890,7 @@ div[style*="background-color: #044d6e"],
1787817890
background: radial-gradient(ellipse at center, #000 0%, rgba(0, 0, 0, .6) 65%, rgba(0, 0, 0, .6) 100%) !important;
1787917891
}
1788017892
.TimelineItem-break {
17881-
background: linear-gradient(to bottom, rgba(25, 25, 25, .8) 1%, transparent 80%) !important;
17893+
background: linear-gradient(to bottom, #1e201d 1%, transparent 80%) !important;
1788217894
}
1788317895
/* light grey gradient */
1788417896
.signup-button:hover, a.signin:hover, .hero .textographic,

0 commit comments

Comments
 (0)