Help with Some Styling Variables for Themes

[psygo]

I'm trying to create some new themes of my own but have encountered 2 issues with trying to modify the following characteristics:

• The grid color
• Sabaki's background to the Go board — I've only managed to do it outside the .asar file, inside the preferences' theming tab

Are there ways of modifying those characteristics and embed them in the .asar file? If so, is there documentation about it — I couldn't find it neither here nor here —?

Additionally, are there ways of modifying more of Sabaki's styles through CSS?

And does anyone know how to open the inspector on Linux? I've tried googling it and using the shortcuts I use on my browser and on Windows but nothing really worked.

[ParmuzinAlexander]

Grid color
.shudan-goban {--shudan-board-foreground-color: #000;}
Board color

.shudan-goban {--shudan-board-background-color: #FFF;}
.shudan-goban-image {background-image: none;}

You may be interested in some of the tricks that I personally use.
P.S. Disable bar very extreme change, use only background settings for fixing bug #542

/* Stones texture */
.shudan-stone-image.shudan-sign_1 {background-image: url('0.png');}
.shudan-stone-image.shudan-sign_-1 {background-image: url('1.png');}
.shudan-stone-image.shudan-sign_-1.shudan-random_1 {background-image: url('2.png');}
.shudan-stone-image.shudan-sign_-1.shudan-random_2 {background-image: url('3.png');}
.shudan-stone-image.shudan-sign_-1.shudan-random_3 {background-image: url('4.png');}
.shudan-stone-image.shudan-sign_-1.shudan-random_4 {background-image: url('5.png');}
/* 100% stones size */
.shudan-vertex .shudan-stone {top: 0; left: 0; width: 100%; height: 100%;}
/* Black lines and disable borders */
.shudan-goban {--shudan-board-border-width: 0; --shudan-board-foreground-color: #000;}
.shudan-goban:not(.shudan-coordinates) {padding: 0;}
/* Board texture */
.shudan-goban-image {background-image: url('board1.png');}
/* Disable stones shadow */
.shudan-vertex:not(.shudan-sign_0) .shudan-shadow {background: none; box-shadow: none;}
/* Disable bar */
#bar {visibility: hidden;}
main {bottom: 0; background: #f0f0f0 url('background1.png') left top;}
/* Disable goban shadow */
#goban {box-shadow: none;}
/* Disable last move marker */
.shudan-vertex.shudan-marker_point.shudan-sign_1 .shudan-marker {background: none;}
.shudan-vertex.shudan-marker_point.shudan-sign_-1 .shudan-marker {background: none;}
/* Heat map */
.shudan-vertex .shudan-heat {transition: opacity 0s, box-shadow 0s;}
.shudan-vertex.shudan-heat_9 .shudan-heat {background: #009900; box-shadow: 0 0 0 .5em #009900; opacity: 1;}
.shudan-vertex.shudan-heat_8 .shudan-heat {background: none; box-shadow: none; opacity: 1;}
.shudan-vertex.shudan-heat_7 .shudan-heat {background: none; box-shadow: none; opacity: 1;}
.shudan-vertex.shudan-heat_6 .shudan-heat {background: none; box-shadow: none; opacity: 1;}
.shudan-vertex.shudan-heat_5 .shudan-heat {background: none; box-shadow: none; opacity: 1;}
.shudan-vertex.shudan-heat_4 .shudan-heat {background: none; box-shadow: none; opacity: 1;}
.shudan-vertex.shudan-heat_3 .shudan-heat {background: none; box-shadow: none; opacity: 1;}
.shudan-vertex.shudan-heat_2 .shudan-heat {background: none; box-shadow: none; opacity: 1;}
.shudan-vertex.shudan-heat_1 .shudan-heat {background: none; box-shadow: none; opacity: 1;}
.shudan-vertex .shudan-heatlabel {color: white; font-size: .38em; line-height: 1; text-shadow: none; opacity: 1;}

[psygo]

.shudan-goban {
    --shudan-board-foreground-color: #FFF; 
}

solved the color of the grid for me. Thanks a lot, @ParmuzinAlexander. Before I close this issue, could you please leave a reference to where you ended up finding all these properties?

[ParmuzinAlexander]

@psygo Source code like https://github.com/SabakiHQ/Shudan/blob/master/css/goban.css or inspect web version https://github.com/SabakiHQ/Sabaki/releases/download/v0.43.3/sabaki-v0.43.3-web.zip
But after adding settings for textures, I don't see the point in simple themes. Maybe things like custom Heat map in lizzie \ katrain style will be more useful. Using themes as an addon or plugin, unfortunately only one...

[psygo]

I wish there were more documentation for all this. Even the names are not quite great — how am I supposed to guess --shudan-board-foreground-color means the grid color? Anyway, I think this will do for now.

[yishn]

For future reference: https://github.com/SabakiHQ/Shudan/blob/master/docs/README.md#styling

Foreground color also refers to marker/label/arrow/line color on non-stone vertices.