trnck.dev
blog.trnck.dev
Dark mode for twitter
+50
-15
+13
-1
_layouts/home.html
+13
-1
_layouts/home.html
···
64
64
<!-- Loading stuff -->
65
65
Loading the data just for you.
66
66
</div>
67
+
<br>
68
+
<a class="twitter-timeline" data-theme="light" href="https://twitter.com/filiptronicek?ref_src=twsrc%5Etfw">Tweets by filiptronicek</a>
67
69
70
+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
68
71
<script>
69
72
GitHubCalendar(".calendar", "filiptronicek", { responsive: true });
73
+
74
+
const value = window
75
+
.getComputedStyle(document.documentElement)
76
+
.getPropertyValue('content')
77
+
.replace(/"/g, '')
78
+
79
+
if(value == "dark") {
80
+
$(".twitter-timeline").attr("data-theme", "dark")
81
+
}
70
82
</script>
71
-
83
+
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
72
84
</div>
73
85
</div>
74
86
</div>
+37
-14
assets/styles.scss
+37
-14
assets/styles.scss
···
1
1
---
2
2
---
3
-
@import url('https://unpkg.com/primer/build/build.css');
4
-
@import 'highlight-syntax';
5
3
4
+
@import url("https://unpkg.com/primer/build/build.css");
5
+
@import "highlight-syntax";
6
6
7
7
// If a user adds a custom font, this component will stop it from bleeding into GitHub components:
8
8
.github-component {
9
-
font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol !important;
9
+
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial,
10
+
sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol !important;
10
11
}
11
12
12
13
.repo-language-color {
13
-
filter: brightness(125%) !important;
14
-
border-radius: 50%;
15
-
display: inline-block;
16
-
height: 12px;
17
-
position: relative;
18
-
top: 2px;
19
-
width: 12px;
14
+
filter: brightness(125%) !important;
15
+
border-radius: 50%;
16
+
display: inline-block;
17
+
height: 12px;
18
+
position: relative;
19
+
top: 2px;
20
+
width: 12px;
20
21
}
21
22
22
23
.emoji {
···
26
27
}
27
28
28
29
.article {
29
-
h1, h2, h3, h4,
30
+
h1,
31
+
h2,
32
+
h3,
33
+
h4,
30
34
.highlight {
31
35
margin-bottom: 16px;
32
36
}
···
38
42
margin-bottom: 16px;
39
43
}
40
44
41
-
ul, ol {
45
+
ul,
46
+
ol {
42
47
padding-left: 32px;
43
48
margin-bottom: 16px;
44
49
}
45
50
46
-
li ul, li ol {
51
+
li ul,
52
+
li ol {
47
53
padding-left: 16px;
48
54
margin-bottom: 0px;
49
55
}
···
91
97
.octicon {
92
98
filter: invert(1);
93
99
}
94
-
.link-gray-dark, .contrib-number {
100
+
.link-gray-dark,
101
+
.contrib-number {
95
102
color: #e4e4e4 !important;
96
103
}
97
104
.border-md-right,
···
99
106
border: none !important;
100
107
}
101
108
}
109
+
.twitter-timeline {
110
+
margin-top: 150px;
111
+
}
112
+
html {
113
+
content: "";
114
+
}
115
+
@media (prefers-color-scheme: light) {
116
+
html {
117
+
content: "light";
118
+
}
119
+
}
120
+
@media (prefers-color-scheme: dark) {
121
+
html {
122
+
content: "dark";
123
+
}
124
+
}