Skip to content

Commit bb6cee7

Browse files
tito10047tito10047
committed
Add dark theme
1 parent 6a86154 commit bb6cee7

File tree

11 files changed

+95
-52
lines changed

11 files changed

+95
-52
lines changed

‎assets/styles/app.scss‎

Lines changed: 47 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
//https://huemint.com/bootstrap-basic/#palette=e3e8eb-ffffff-030619-204e7a-64b9e3-6c6b59
1+
// https://huemint.com/bootstrap-basic/#palette=e3e8eb-ffffff-030619-204e7a-64b9e3-6c6b59
22
$min-contrast-ratio: 3;
33
$white: #ffffff;
44

@@ -12,57 +12,79 @@ $theme-colors: (
1212
"warning": #e4cb22,
1313
"danger": #f41611,
1414
);
15+
1516
@import "bootstrap/scss/bootstrap";
17+
18+
/* Custom CSS variables for Bug Catcher components */
19+
:root {
20+
--bc-body-bg: var(--bs-body-bg);
21+
--bc-code-bg: #f6f8fa; /* light */
22+
--bc-code-selected-bg: #b5f5ec; /* light */
23+
--bc-timeline-line: #204e7a; /* matches primary */
24+
--bc-timeline-dot: #204e7a;
25+
}
26+
27+
/* Dark overrides */
28+
[data-bs-theme="dark"] {
29+
--bc-body-bg: var(--bs-body-bg);
30+
--bc-code-bg: #1f2430; /* dark code background */
31+
--bc-code-selected-bg: #16323f; /* dark selection */
32+
--bc-timeline-line: #6ea8fe; /* accessible on dark */
33+
--bc-timeline-dot: #6ea8fe;
34+
}
35+
36+
/* Use variables instead of hard-coded colors */
1637
body {
17-
background-color: lightgray;
38+
background-color: var(--bc-body-bg);
1839
}
1940

2041
code {
21-
white-space: pre-wrap;
42+
white-space: pre-wrap;
2243
}
2344

2445
div.code::before {
25-
counter-reset: listing;
46+
counter-reset: listing;
2647
}
2748

2849
div.code code {
29-
counter-increment: listing;
30-
display: block;
31-
width: 100%;
50+
counter-increment: listing;
51+
display: block;
52+
width: 100%;
53+
background-color: var(--bc-code-bg);
3254
}
3355

3456
div.code code.selected {
35-
background-color: #b5f5ec;
57+
background-color: var(--bc-code-selected-bg);
3658
}
3759

3860
div.code code::before {
39-
content: counter(listing) ". ";
40-
display: inline-block;
41-
width: 4em; /* now works */
42-
text-align: right; /* now works */
61+
content: counter(listing) ". ";
62+
display: inline-block;
63+
width: 4em;
64+
text-align: right;
4365
}
4466

4567
.timeline {
46-
border-left: 1px solid #204e7a;
47-
position: relative;
48-
list-style: none;
68+
border-left: 1px solid var(--bc-timeline-line);
69+
position: relative;
70+
list-style: none;
4971
}
5072

5173
.timeline .timeline-item {
52-
position: relative;
74+
position: relative;
5375
}
5476

5577
.timeline .timeline-item:after {
56-
position: absolute;
57-
display: block;
58-
top: 0;
78+
position: absolute;
79+
display: block;
80+
top: 0;
5981
}
6082

6183
.timeline .timeline-item:after {
62-
background-color: #204e7a;
63-
left: -38px;
64-
border-radius: 50%;
65-
height: 11px;
66-
width: 11px;
67-
content: "";
84+
background-color: var(--bc-timeline-dot);
85+
left: -38px;
86+
border-radius: 50%;
87+
height: 11px;
88+
width: 11px;
89+
content: "";
6890
}

‎public/579.9a6ebc31.js‎

Lines changed: 0 additions & 2 deletions
This file was deleted.

‎public/579.9a6ebc31.js.LICENSE.txt‎

Lines changed: 0 additions & 5 deletions
This file was deleted.

‎public/bug_catcher.84008d0c.css‎

Lines changed: 0 additions & 6 deletions
This file was deleted.

‎public/entrypoints.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,11 @@
33
"bug_catcher": {
44
"js": [
55
"/bundles/bugcatcher/runtime.f29bab85.js",
6-
"/bundles/bugcatcher/579.9a6ebc31.js",
6+
"/bundles/bugcatcher/579.c35234fc.js",
77
"/bundles/bugcatcher/bug_catcher.b421cb92.js"
88
],
99
"css": [
10-
"/bundles/bugcatcher/bug_catcher.84008d0c.css"
10+
"/bundles/bugcatcher/bug_catcher.2165f9c7.css"
1111
]
1212
}
1313
}

‎public/manifest.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
{
2-
"/bug_catcher.css": "/bundles/bugcatcher/bug_catcher.84008d0c.css",
2+
"/bug_catcher.css": "/bundles/bugcatcher/bug_catcher.2165f9c7.css",
33
"/bug_catcher.js": "/bundles/bugcatcher/bug_catcher.b421cb92.js",
44
"/runtime.js": "/bundles/bugcatcher/runtime.f29bab85.js",
5-
"/579.9a6ebc31.js": "/bundles/bugcatcher/579.9a6ebc31.js",
5+
"/579.c35234fc.js": "/bundles/bugcatcher/579.c35234fc.js",
66
"/assets/mama-mia.mp3": "/bundles/bugcatcher/assets/mama-mia.4c2a7475.mp3",
77
"/assets/logo/green/vertical.svg": "/bundles/bugcatcher/assets/logo/green/vertical.8a1f42b5.svg",
88
"/assets/logo/blue/vertical.svg": "/bundles/bugcatcher/assets/logo/blue/vertical.c5a6d0aa.svg",

‎templates/base.html.twig‎

Lines changed: 37 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<!DOCTYPE html>
2-
<html>
2+
<html data-bs-theme="light">
33
<head>
44
<meta charset="UTF-8">
55
<title>{% block title %}{{ app_name|default('Bug Catcher') }}{% endblock %}</title>
@@ -11,10 +11,25 @@
1111

1212
{% block javascripts %}
1313
{{ encore_entry_script_tags('bug_catcher',null,'bug_catcher') }}
14+
<script>
15+
(function () {
16+
const key = 'bc-theme';
17+
const saved = localStorage.getItem(key) || 'auto';
18+
const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
19+
const theme = saved === 'auto' ? (prefersDark ? 'dark' : 'light') : saved;
20+
document.documentElement.setAttribute('data-bs-theme', theme);
21+
if (saved === 'auto' && window.matchMedia) {
22+
window.matchMedia('(prefers-color-scheme: dark)')
23+
.addEventListener('change', (e) => {
24+
document.documentElement.setAttribute('data-bs-theme', e.matches ? 'dark' : 'light');
25+
});
26+
}
27+
})();
28+
</script>
1429
{% endblock %}
1530
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
1631
</head>
17-
<body class="bg-light" {{ stimulus_controller('toast') }}
32+
<body class="bg-body" {{ stimulus_controller('toast') }}
1833
{{ stimulus_action('toast',"show","toast:show") }}
1934
>
2035
<div {{ stimulus_target('toast','container') }} class="toast-container"></div>
@@ -66,9 +81,29 @@
6681
<a class="dropdown-item" href="{{ path('bug_catcher.security.change-password') }}">Change password</a>
6782
<hr class="dropdown-divider">
6883
<a class="dropdown-item" href="{{ path('bug_catcher.security.logout') }}">Log out</a>
84+
<hr class="dropdown-divider">
85+
<div class="px-3 py-2 text-muted small">Theme</div>
86+
<a class="dropdown-item" href="#" data-theme-choice="light">Light</a>
87+
<a class="dropdown-item" href="#" data-theme-choice="dark">Dark</a>
88+
<a class="dropdown-item" href="#" data-theme-choice="auto">Auto</a>
6989
</li>
7090
</ul>
7191
</div>
92+
<script>
93+
document.addEventListener('click', function (e) {
94+
const a = e.target.closest('[data-theme-choice]');
95+
if (!a) return;
96+
e.preventDefault();
97+
const choice = a.getAttribute('data-theme-choice');
98+
localStorage.setItem('bc-theme', choice);
99+
if (choice === 'auto') {
100+
const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
101+
document.documentElement.setAttribute('data-bs-theme', prefersDark ? 'dark' : 'light');
102+
} else {
103+
document.documentElement.setAttribute('data-bs-theme', choice);
104+
}
105+
});
106+
</script>
72107
</div>
73108
</body>
74109
</html>

‎templates/components/Detail/Header.html.twig‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<header{{ attributes.defaults({
22
class:'pb-1 mb-4 border-bottom'
33
}) }}>
4-
<a href="{{ record.requestUri }}" target="_blank" class="d-flex align-items-center text-dark text-decoration-none">
4+
<a href="{{ record.requestUri }}" target="_blank" class="d-flex align-items-center text-body text-decoration-none">
55
<img class="p-1" src="{{ asset('/assets/logo/'~logo~'/icon.svg', 'bug_catcher') }}" alt="bug" style="width: 43px;height:43px;"/>
66
<span class="fs-4">{{ record.requestUri|u.truncate(150, '...') }} </span>
77
</a>

‎templates/components/Detail/StackTrace.html.twig‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
{% for key,item in this.trace %}
66
<div class="accordion-item">
77
<h3 class="accordion-header" id="heading-{{ key }}">
8-
<button class="accordion-button collapsed"
8+
<button class="accordion-button collapsed text-body"
99
type="button" data-bs-toggle="collapse"
1010
data-bs-target="#collapse-{{ key }}"
1111
aria-expanded="{% if opened==key %}true{% else %}false{% endif %}"

‎templates/components/LogCount.html.twig‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,8 @@
22
class:'col-2 px-1'
33
}) }}>
44
{% set count = this.count %}
5-
<div class="w-100 badge text-bg-{% if count==0 %}success0{% elseif count<5 %}warning{% else %}danger{% endif %} fs-6">
5+
{% set color = count==0 ? 'success' : (count<5 ? 'warning' : 'danger') %}
6+
<div class="w-100 badge border border-{{ color }}-subtle bg-{{ color }}-subtle text-{{ color }}-emphasis fs-6">
67
<div class="mt-px">{{ count }}</div>
78
</div>
89
</div>

0 commit comments

Comments
 (0)