Hi all and thanks for this great project. Is there a way to change colors of DarkMode by editing js or css file? If so, where can I find those files and the relevant lines?
Gigi
If you would like to refer to this comment somewhere else in this project, copy and paste the following link:
Thanks for pointing this out to us Ramiro.
I'm loving using this ai2offline and am very very grateful for your work to bring it to us, I also very much like working in dark mode.
That being said that neon green was not making my day, so I came up with something a a little more tame.
This is what I have done so far. Let me know if you want the files when I'm done.
No worries, I'm currently parameterize all the colors into CSS vars so you could just change 5 or so colors in one spot and get the completely new theme.
Is this the best place to post a zip file when I'm done?
If you would like to refer to this comment somewhere else in this project, copy and paste the following link:
Well here is what I have so far, I went a little darker on the headers and main background but I think it looks pretty sweet.
Just backup the files: ai2blockly.css, blockly.css, gwt.css, Ya.css and extract the zip file into war/static/css and enjoy!
PS: Ramiro, please let me know how I can help more.
This is much closer to what I was after now, a little less blue, more contrast for the sections of the app and blockly is more complete.
I'm calling this done unless something else jumps out at me or you guys point something out.
Have fun :D
Ramiro we missed the import extension dialog styling of the tabs.
I've added the following locally to gwt.css, its basically a copy of buttons without the round corners and a thicker border.
Hi all and thanks for this great project. Is there a way to change colors of DarkMode by editing js or css file? If so, where can I find those files and the relevant lines?
Gigi
The changes are located in the .oscuro class inside the following .css files
ai2blockly.css
blockly.css
gwt.css
Ya.css
Thanks for pointing this out to us Ramiro.
I'm loving using this ai2offline and am very very grateful for your work to bring it to us, I also very much like working in dark mode.
That being said that neon green was not making my day, so I came up with something a a little more tame.
This is what I have done so far. Let me know if you want the files when I'm done.
Last edit: Andrew Williams 2022-11-28
It looks much cleaner that way.If you choose to share your changes, they will be gladly included in a future update.Cheers
No worries, I'm currently parameterize all the colors into CSS vars so you could just change 5 or so colors in one spot and get the completely new theme.
Is this the best place to post a zip file when I'm done?
Well here is what I have so far, I went a little darker on the headers and main background but I think it looks pretty sweet.
Just backup the files: ai2blockly.css, blockly.css, gwt.css, Ya.css and extract the zip file into war/static/css and enjoy!
PS: Ramiro, please let me know how I can help more.
Hi Andrew, I tried replacing the original css files with yours but DarkMode the neon green is still there ...
Last edit: GigiG 2022-11-28
GigiG Make sure to hold shift when you reload your browser they like to cache css. or just clear cache.
This is much closer to what I was after now, a little less blue, more contrast for the sections of the app and blockly is more complete.
I'm calling this done unless something else jumps out at me or you guys point something out.
Have fun :D
Last edit: Andrew Williams 2022-11-28
Great dark theme! Thanks
Great job, I found a small detail in the text color of the comments.
I see it, --text-dark-color works here
it's a change in blockly.css and it's fixed
Last edit: Ramiro Prieto Alvarez 2022-11-28
I have as follows, trying to stick to the variables to promote theming.
We can always add some more as we go for a larger palette.
Thanks to Andrew Williams, it's now easier to edit the colors for dark mode in the Ya.css file.
Ramiro we missed the import extension dialog styling of the tabs.
I've added the following locally to gwt.css, its basically a copy of buttons without the round corners and a thicker border.
.oscuro .gwt-TabBar .gwt-TabBarItem {
margin: 0px 5px 0px 0px;
padding: 3px 6px 3px 6px;
cursor: pointer;
font-size: 13px;
text-align: center;
background-color: var(--button-color);
border: 2px solid #cccccc;
border-color: #e6e6e6 #e6e6e6 #bfbfbf;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
border-bottom-color: var(--light-bg-color);
transform: scale(1); / Standard Property /
transform-origin: 0 0; / Standard Property /
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
}
.oscuro .gwt-TabBar .gwt-TabBarItem .gwt-Label {
color: var(--text-dark-color);
}
.oscuro .gwt-TabBar .gwt-TabBarItem-selected {
cursor: default;
border-color: #e6e6e6 #e6e6e6 #bfbfbf;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
background-color: var(--light-bg-color);
background-position: 0 -15px;
-webkit-transition: background-position 0.1s linear;
-moz-transition: background-position 0.1s linear;
-o-transition: background-position 0.1s linear;
transition: background-position 0.1s linear;
}
.oscuro .gwt-TabBar .gwt-TabBarItem-selected .gwt-Label {
color: var(--text-sec-color);
}
OK, it will be included in the next update