Merge pull request 'marcia-patch-2' (#11) from marcia/docs.cwtch.im:marcia-patch-2 into staging

Reviewed-on: #11
Reviewed-by: Sarah Jamie Lewis <sarah@openprivacy.ca>
This commit is contained in:
Sarah Jamie Lewis 2024-06-03 19:41:45 +00:00
commit ebdc9ad785
4 changed files with 128 additions and 4 deletions

View File

@ -10,8 +10,42 @@ We are still finalizing the exact format of the theme files. Please consider thi
:::
Cwtch now supports customized Cwtch themes. Themes can be loaded via the [Settings Pane](https://docs.cwtch.im/docs/settings/).
Good news, now you can create your own Cwtch light and dark themes with a simple template! Follow these steps to create a new theme:
#### Downloading and installing the test theme:
* Download [this test folder](https://docs.cwtch.im/static/test_theme), which includes: [theme.yml](https://docs.cwtch.im/static/test_theme/theme.yml) (editable file), [test.png](https://docs.cwtch.im/static/test_theme/test.png) (background image) and [Instructions.pdf](https://docs.cwtch.im/static/test_theme/Instructions.pdf)
* Load the test theme through the settings pane. [Settings](https://docs.cwtch.im/docs/settings/) > Import theme , select the “test” folder and click on “select folder”
* Now you have the test theme installed and you can edit the .yml file
* Check the instructions.pdf file for more in depth instructions on how to edit the .yml file and what each part of the code changes!
#### Editing the .yml file:
* Pick your colours using any web tool
* Pick a colour to be your accent colour and select all the other colours based on that one
* Open theme.yml
* Replace the part under "colours" where 0x`FFFFFF` colours appear with the HEX value of colours you chose (follow the instructions after each colour for better results!)
* Don't include the # on the HEX value
* Replace test.png for a transparent png you want to use as a background, if you dont want a background image, disable theme images on settings>theme images
* Don't forget to save!
#### Testing your new theme:
* Re-load the test theme through the settings pane. Settings> Import theme , select the “test” folder and click on “select folder”
* Repeat until you're satisfied with your new theme!
* If you're an advanced user, feel free to edit the .yml code beyond selecting colours!
As always, let us know if this is working for you, [we'd love to hear your feedback](https://docs.cwtch.im/docs/contribute/testing/#submitting-feedback)
The easiest way to get started with custom themes is to make a copy of an existing theme
directory (e.g. [Cwtch Theme](https://git.openprivacy.ca/cwtch.im/cwtch-ui/src/branch/trunk/assets/themes/cwtch) and
edit the yaml file.

Binary file not shown.

BIN
static/test_theme/test.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 19 KiB

View File

@ -0,0 +1,90 @@
themes:
name: test
dark:
colors:
background: 0x00CFFF #cyan #pick a dark colour
header: 0xFF0098 #magenta # pick a second dark colour
userBubble: 0xFFC000 #yellow #pick a colour that will contrast with BG
peerBubble: 0xFF0029 #red #pick a colour that will contrast with BG
font: 0xFFFFFF #white #pick a light colour or a colour that contrasts with your background and your bubbles
settings: 0x3FFF00 #green #pick a colour that will contrast with your accent colour
accent: 0x0013FF #blue #pick a colour that will contrast with BG
reaction: 0x8900FF #purple #pick a colour that will contrast with BG
theme:
backgroundHilightElementColor: peerBubble
backgroundMainColor: background
backgroundPaneColor: background
defaultButtonColor: accent
defaultButtonActiveColor: accent
defaultButtonDisabledColor: peerBubble
dropShadowColor: userBubble
mainTextColor: font
messageFromMeBackgroundColor: userBubble
messageFromMeTextColor: font
messageFromOtherBackgroundColor: peerBubble
messageFromOtherTextColor: font
portraitContactBadgeColor: accent
portraitContactBadgeTextColor: font
portraitProfileBadgeColor: accent
portraitProfileBadgeTextColor: font
portraitOfflineBorderColor: peerBubble
portraitOnlineBorderColor: accent
portraitBackgroundColor: background
scrollbarDefaultColor: accent
sendHintTextColor: reaction
textfieldBackgroundColor: peerBubble
textfieldBorderColor: accent
toolbarIconColor: settings
topbarColor: header
chatReactionIconColor: reaction
snackbarBackgroundColor: accent
snackbarTextColor: font
messageSelectionColor: reaction
textfieldSelectionColor: accent
menuBackgroundColor: background
chatImage: test.png
chatImageColor: reaction
light:
colors:
background: 0x00CFFF #cyan #pick a light colour
header: 0xFF0098 #magenta # pick a second light colour
userBubble: 0xFFC000 #yellow #pick a colour that will contrast with BG
peerBubble: 0xFF0029 #red #pick a colour that will contrast with BG
font: 0xFFFFFF #white #pick a dark colour or a colour that contrasts with your background and your bubbles
settings: 0x3FFF00 #green #pick a colour that will contrast with your accent colour
accent: 0x0013FF #blue #pick a colour that will contrast with BG
reaction: 0x8900FF #purple #pick a colour that will contrast with BG
theme:
backgroundHilightElementColor: peerBubble
backgroundMainColor: background
backgroundPaneColor: background
defaultButtonColor: accent
defaultButtonActiveColor: accent
defaultButtonDisabledColor: peerBubble
dropShadowColor: userBubble
mainTextColor: font
messageFromMeBackgroundColor: userBubble
messageFromMeTextColor: font
messageFromOtherBackgroundColor: peerBubble
messageFromOtherTextColor: font
portraitContactBadgeColor: accent
portraitContactBadgeTextColor: font
portraitProfileBadgeColor: accent
portraitProfileBadgeTextColor: font
portraitOfflineBorderColor: peerBubble
portraitOnlineBorderColor: accent
portraitBackgroundColor: background
scrollbarDefaultColor: accent
sendHintTextColor: reaction
textfieldBackgroundColor: peerBubble
textfieldBorderColor: accent
toolbarIconColor: settings
topbarColor: header
chatReactionIconColor: reaction
snackbarBackgroundColor: accent
snackbarTextColor: font
messageSelectionColor: reaction
textfieldSelectionColor: accent
menuBackgroundColor: background
chatImage: test.png
chatImageColor: reaction