Skip to content

Commit f02a56c

Browse files
pseudo-rnd-thoughtspseudo-rnd-thoughts
authored
Fixes Atari redirect for different themes (#1354)
1 parent 6e8227a commit f02a56c

Some content is hidden

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

105 files changed

+6090
-9450
lines changed

Diff for: ‎docs/environments/atari.md

+58-90
Original file line numberDiff line numberDiff line change
@@ -10,104 +10,41 @@ lastpage:
1010
<head>
1111
<title>Redirecting to Atari's documentation</title>
1212
<style>
13-
:root {
14-
--background-color: #ffffff;
15-
--text-color: #333333;
16-
--popup-background: #ffffff;
17-
--popup-shadow: rgba(0, 0, 0, 0.5);
18-
--button-background: #f0f0f0;
19-
--button-text: #333333;
20-
--button-hover: #e0e0e0;
21-
--button-border: #cccccc;
22-
--link-color: #0066cc;
23-
}
24-
25-
@media (prefers-color-scheme: dark) {
26-
:root {
27-
--background-color: #222222;
28-
--text-color: #e0e0e0;
29-
--popup-background: #333333;
30-
--popup-shadow: rgba(0, 0, 0, 0.7);
31-
--button-background: #444444;
32-
--button-text: #e0e0e0;
33-
--button-hover: #555555;
34-
--button-border: #666666;
35-
--link-color: #66b0ff;
36-
}
37-
}
38-
39-
body {
40-
background-color: var(--background-color);
41-
color: var(--text-color);
42-
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
43-
line-height: 1.5;
44-
margin: 20px;
45-
transition: background-color 0.3s, color 0.3s;
46-
}
47-
48-
a {
49-
color: var(--link-color);
50-
text-decoration: none;
51-
}
52-
53-
a:hover {
54-
text-decoration: underline;
55-
}
56-
5713
/* Basic styles for the popup */
5814
.popup {
59-
display: none;
60-
position: fixed;
61-
top: 0;
62-
left: 0;
63-
width: 100%;
64-
height: 100%;
65-
background-color: var(--popup-shadow);
66-
z-index: 999;
67-
justify-content: center;
68-
align-items: center;
15+
display: none;
16+
position: fixed;
17+
top: 0;
18+
left: 0;
19+
width: 100%;
20+
height: 100%;
21+
background-color: rgba(0, 0, 0, 0.5); /* Default background overlay */
22+
z-index: 999;
23+
justify-content: center;
24+
align-items: center;
6925
}
70-
7126
.popup-content {
72-
background-color: var(--popup-background);
73-
padding: 20px;
74-
border-radius: 10px;
75-
text-align: center;
76-
width: 300px;
77-
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
78-
transition: background-color 0.3s;
27+
background-color: #fff; /* Default light content background */
28+
padding: 20px;
29+
border-radius: 10px;
30+
text-align: center;
31+
width: 300px;
7932
}
80-
81-
button {
82-
margin-top: 10px;
83-
padding: 8px 14px;
84-
cursor: pointer;
85-
background-color: var(--button-background);
86-
color: var(--button-text);
87-
border: 1px solid var(--button-border);
88-
border-radius: 4px;
89-
font-size: 14px;
90-
transition: background-color 0.2s, color 0.2s;
91-
}
92-
93-
button:hover {
94-
background-color: var(--button-hover);
33+
.dark-theme .popup {
34+
background-color: rgba(0, 0, 0, 0.7); /* Darker overlay for dark theme */
9535
}
96-
97-
#atariRedirectBtn {
98-
background-color: var(--link-color);
99-
color: white;
100-
border: none;
36+
.dark-theme .popup-content {
37+
background-color: #333; /* Dark content background */
38+
color: #fff; /* Light text for dark theme */
10139
}
102-
103-
#atariRedirectBtn:hover {
104-
opacity: 0.9;
40+
button {
41+
margin-top: 10px;
42+
padding: 5px 10px;
43+
cursor: pointer;
10544
}
106-
107-
label {
108-
display: block;
109-
margin: 15px 0;
110-
user-select: none;
45+
/* Add spacing between checkbox and label text */
46+
input[type="checkbox"] {
47+
margin-right: 5px;
11148
}
11249
</style>
11350
</head>
@@ -145,8 +82,39 @@ lastpage:
14582
document.cookie = `${name}=${value}; ${expires}; path=/`; // environments/atari/
14683
}
14784

85+
// Function to apply theme to the popup
86+
function applyTheme() {
87+
const theme = localStorage.getItem("theme") || "auto";
88+
const body = document.body;
89+
90+
// Remove any existing theme classes
91+
body.classList.remove("dark-theme", "light-theme");
92+
93+
if (theme === "dark") {
94+
body.classList.add("dark-theme");
95+
} else if (theme === "light") {
96+
body.classList.add("light-theme");
97+
} else if (theme === "auto") {
98+
// Check system preference for dark mode
99+
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
100+
body.classList.add("dark-theme");
101+
} else {
102+
body.classList.add("light-theme");
103+
}
104+
105+
// Listen for system theme changes
106+
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
107+
body.classList.remove("dark-theme", "light-theme");
108+
body.classList.add(e.matches ? "dark-theme" : "light-theme");
109+
});
110+
}
111+
}
112+
148113
// Show popup if the cookie doesn't exist
149114
window.onload = function() {
115+
// Apply theme first
116+
applyTheme();
117+
150118
const atariAutoRedirect = getCookie('atariAutoRedirect');
151119
if (atariAutoRedirect) {
152120
window.location.href = "https://ale.farama.org/environments/";

Diff for: ‎docs/environments/atari/adventure.md

+58-90
Original file line numberDiff line numberDiff line change
@@ -8,104 +8,41 @@ title: Adventure
88
<head>
99
<title>Redirecting to Adventure's documentation</title>
1010
<style>
11-
:root {
12-
--background-color: #ffffff;
13-
--text-color: #333333;
14-
--popup-background: #ffffff;
15-
--popup-shadow: rgba(0, 0, 0, 0.5);
16-
--button-background: #f0f0f0;
17-
--button-text: #333333;
18-
--button-hover: #e0e0e0;
19-
--button-border: #cccccc;
20-
--link-color: #0066cc;
21-
}
22-
23-
@media (prefers-color-scheme: dark) {
24-
:root {
25-
--background-color: #222222;
26-
--text-color: #e0e0e0;
27-
--popup-background: #333333;
28-
--popup-shadow: rgba(0, 0, 0, 0.7);
29-
--button-background: #444444;
30-
--button-text: #e0e0e0;
31-
--button-hover: #555555;
32-
--button-border: #666666;
33-
--link-color: #66b0ff;
34-
}
35-
}
36-
37-
body {
38-
background-color: var(--background-color);
39-
color: var(--text-color);
40-
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
41-
line-height: 1.5;
42-
margin: 20px;
43-
transition: background-color 0.3s, color 0.3s;
44-
}
45-
46-
a {
47-
color: var(--link-color);
48-
text-decoration: none;
49-
}
50-
51-
a:hover {
52-
text-decoration: underline;
53-
}
54-
5511
/* Basic styles for the popup */
5612
.popup {
57-
display: none;
58-
position: fixed;
59-
top: 0;
60-
left: 0;
61-
width: 100%;
62-
height: 100%;
63-
background-color: var(--popup-shadow);
64-
z-index: 999;
65-
justify-content: center;
66-
align-items: center;
13+
display: none;
14+
position: fixed;
15+
top: 0;
16+
left: 0;
17+
width: 100%;
18+
height: 100%;
19+
background-color: rgba(0, 0, 0, 0.5); /* Default background overlay */
20+
z-index: 999;
21+
justify-content: center;
22+
align-items: center;
6723
}
68-
6924
.popup-content {
70-
background-color: var(--popup-background);
71-
padding: 20px;
72-
border-radius: 10px;
73-
text-align: center;
74-
width: 300px;
75-
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
76-
transition: background-color 0.3s;
25+
background-color: #fff; /* Default light content background */
26+
padding: 20px;
27+
border-radius: 10px;
28+
text-align: center;
29+
width: 300px;
7730
}
78-
79-
button {
80-
margin-top: 10px;
81-
padding: 8px 14px;
82-
cursor: pointer;
83-
background-color: var(--button-background);
84-
color: var(--button-text);
85-
border: 1px solid var(--button-border);
86-
border-radius: 4px;
87-
font-size: 14px;
88-
transition: background-color 0.2s, color 0.2s;
89-
}
90-
91-
button:hover {
92-
background-color: var(--button-hover);
31+
.dark-theme .popup {
32+
background-color: rgba(0, 0, 0, 0.7); /* Darker overlay for dark theme */
9333
}
94-
95-
#atariRedirectBtn {
96-
background-color: var(--link-color);
97-
color: white;
98-
border: none;
34+
.dark-theme .popup-content {
35+
background-color: #333; /* Dark content background */
36+
color: #fff; /* Light text for dark theme */
9937
}
100-
101-
#atariRedirectBtn:hover {
102-
opacity: 0.9;
38+
button {
39+
margin-top: 10px;
40+
padding: 5px 10px;
41+
cursor: pointer;
10342
}
104-
105-
label {
106-
display: block;
107-
margin: 15px 0;
108-
user-select: none;
43+
/* Add spacing between checkbox and label text */
44+
input[type="checkbox"] {
45+
margin-right: 5px;
10946
}
11047
</style>
11148
</head>
@@ -143,8 +80,39 @@ title: Adventure
14380
document.cookie = `${name}=${value}; ${expires}; path=/`; // environments/atari/
14481
}
14582

83+
// Function to apply theme to the popup
84+
function applyTheme() {
85+
const theme = localStorage.getItem("theme") || "auto";
86+
const body = document.body;
87+
88+
// Remove any existing theme classes
89+
body.classList.remove("dark-theme", "light-theme");
90+
91+
if (theme === "dark") {
92+
body.classList.add("dark-theme");
93+
} else if (theme === "light") {
94+
body.classList.add("light-theme");
95+
} else if (theme === "auto") {
96+
// Check system preference for dark mode
97+
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
98+
body.classList.add("dark-theme");
99+
} else {
100+
body.classList.add("light-theme");
101+
}
102+
103+
// Listen for system theme changes
104+
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
105+
body.classList.remove("dark-theme", "light-theme");
106+
body.classList.add(e.matches ? "dark-theme" : "light-theme");
107+
});
108+
}
109+
}
110+
146111
// Show popup if the cookie doesn't exist
147112
window.onload = function() {
113+
// Apply theme first
114+
applyTheme();
115+
148116
const atariAutoRedirect = getCookie('atariAutoRedirect');
149117
if (atariAutoRedirect) {
150118
window.location.href = "https://ale.farama.org/environments/adventure";

0 commit comments

Comments
 (0)