opened
psygo
username_0
I'm trying to create some [new themes of my own](https://github.com/FanaroEngineering/fanaro_sabaki_theme_collection) but have encountered 2 issues with trying to modify the following characteristics:

- The grid color
- Sabaki's background to the Go board &mdash; 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 &mdash; I couldn't find it neither [here](https://github.com/SabakiHQ/Shudan/tree/master/docs#styling) nor [here](https://github.com/SabakiHQ/Sabaki/blob/master/docs/guides/create-themes.md) &mdash;?

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.
Help with Some Styling Variables for Themes
issue
created
ParmuzinAlexander
username_1
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 https://github.com/SabakiHQ/Sabaki/pull/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;}
```
comment
created
psygo
username_0
```css
.shudan-goban {
    --shudan-board-foreground-color: #FFF; 
}
```

solved the color of the grid for me. Thanks a lot, @username_1. Before I close this issue, could you please leave a reference to where you ended up finding all these properties?
comment
created
ParmuzinAlexander
username_1
@username_0 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...
comment
closed
psygo
username_0
issue
created
psygo
username_0
I wish there were more documentation for all this. Even the names are not quite great &mdash; how am I supposed to guess `--shudan-board-foreground-color` means the grid color? Anyway, I think this will do for now.
comment
created
yishn
username_2
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.
comment