This site requires JavaScript, please enable it in your browser!
Greenfoot back
tr3x
tr3x wrote ...

2020/11/6

Dark mode ?

tr3x tr3x

2020/11/6

#
Hey, im new to programming & greenfoot and ive a question regarding " dark mode " or dark colours in the greenfoot interface. is there a way to change the greenfoot colours in the source code from white/green to gray/black ?
Super_Hippo Super_Hippo

2020/11/7

#
There is no dark mode directly available with some kind of setting. You can change the colors manually though if you have administrator rights on your computer. Find the following file: C:\Program Files\Greenfoot\lib\stylesheets\java-colors.css Create a copy of that file as a backup in case you mess something up. Open up the file and make changes. You can’t directly change the file in the folder, but you can save it somewhere else and then move the file into the folder to overwrite it.
Super_Hippo Super_Hippo

2020/11/7

#
I just played around with it for a bit and gave most of the options in the file a comment:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
.token-keyword1 { /* public/for/new */
    -fx-fill: #ff00ff;
}
.token-keyword2 { /* import/class */
    -fx-fill: #0000ff;
}
.token-keyword3 { /* true/super */
    -fx-fill: #00ffff;
}
 
.token-comment-normal { /* //... and /*...*/
    -fx-fill: #999999;
}
.token-comment-javadoc { /** ... */
    -fx-fill: #00a0ff;
}
.token-comment-special {
    -fx-fill: #ee00bb;
}
 
.token-primitive { /* int/double */
    -fx-fill: #ff0000;
}
.token-string-literal { /* "..." */
    -fx-fill: #00b000;
}
.token-label {
    -fx-fill: #999999;
}
.token-invalid {
    -fx-fill: #ff3300;
}
/* Default text colour */
.token-default { /* everything not under any other category */
    -fx-fill: #cccccc;
}
 
.scope-colors {
    -bj-background-color: rgb(63, 63, 63); /* background for normal code */
 
    -bj-class-color: rgb(0, 127, 0); /* background of class outside the box inside it, javadoc-comments above are included */
    -bj-class-outer-color: rgb(255, 0, 0); /* outline of the class */
    -bj-class-inner-color: rgb(0, 0, 255); /* outline of the box inside the "class-color" background */
 
    -bj-method-color: rgb(127, 127, 0); /* background of method outside the box inside it, javadoc-comments above are included */
    -bj-method-outer-color: rgb(255, 0, 0); /* outline of the box inside the "method-color" background */
 
    -bj-selection-color: rgb(0, 127, 127); /* background of if-blocks outside the box inside it */
    -bj-selection-outer-color: rgb(255, 0, 0); /* outline of the box inside the "selection-color" background */
 
    -bj-iteration-color: rgb(127, 0, 0); /* background of loops like for/while outside the box inside it */
    -bj-iteration-outer-color: rgb(255, 0, 0); /* outline of the the box inside the "iteration-color" background */
 
    -bj-breakpoint-overlay-color: rgba(0, 255, 0, 0.6); /* color over a line of code with a breakpoint */
    -bj-step-overlay-color: rgba(20, 140, 20, 0.6); /* color over a line of code where the code paused because of a breakpoint */
}
 
.moe-step-mark-icon {
    -fx-fill: rgb(20, 140, 20); /* color of the arrow which is at the line of code where the code paused because of a breakpoint */
    -fx-stroke: white; /* outline color of the arrow */
}
 
.moe-editor-pane {
    -fx-background-color: rgb(127, 127, 127); /* background color outside class */
    -fx-highlight-fill: hsb(211, 50%, 90%);
}
 
.moe-find-result {
    -rtfx-background-color: hsb(211, 20%, 99%);
}
.moe-editor-pane .caret {
   -fx-stroke: rgb(255, 0, 100);
}#
Resulting in this:
tr3x tr3x

2020/11/13

#
Thank you, very helpful and well explained. But i still have one question,is there a possibility to change the colors of the "window" of greenfoot as well so is there a config or smth else for this somewhere?
Super_Hippo Super_Hippo

2020/11/13

#
I looked into the other CSS files in that directory and tested some things, but some parts are still white... Ignore the almost invisible line numbers because I lost track where to change that and I am too lazy right now. And ignore that it is in German of course.
danpost danpost

2020/11/13

#
I think the frame would be controlled by your system preferences.
Super_Hippo Super_Hippo

2020/11/13

#
I think I have all possible Windows settings as dark mode. Windows Explorer is also in dark for example. What you can also notice is that there is a bug with the last }. As there are like a million different options to adjust, it would be amazing to have a dark mode option to choose from in a future version, so you can enable a more eye friendly program and website.
You need to login to post a reply.