Getting started - dark/light screenshots

content/getting-started/finding-kata.md

@@ -12,7 +12,16 @@ Your account is configured and you are ready for your next challenge. Now you wi
 
 The easiest way of getting started is to use the personal trainer on the dashboard to pick your next kata.
 
-![training routines](./img/finding-kata_01_training-routines.png)
+<div class="block dark:hidden">
+
+![training routines](./img/finding-kata_01_training-routines_light.png)
+
+</div>
+<div class="hidden dark:block">
+
+![training routines](./img/finding-kata_01_training-routines_dark.png)
+
+</div>
 
 The personal trainer suggests you a kata based on the selected language and focus area. You can either train on the suggested kata or skip to see the next suggestion.
 
@@ -26,7 +35,16 @@ If, for some reason, you do not like suggested kata, you can skip on it without
 
 For those really looking for a hard challenge or for a specific kind of rank/task/..., we recommend you go directly to the full list of kata where you can select from over 8000 kata to train on. Remember, 8 kyū is the easiest level a kata can be.
 
-![sidebar](./img/finding-kata_02_sidebar.png)
+<div class="block dark:hidden">
+
+![sidebar](./img/finding-kata_02_sidebar_light.png)
+
+</div>
+<div class="hidden dark:block">
+
+![sidebar](./img/finding-kata_02_sidebar_dark.png)
+
+</div>
 
 Details of kata search page are described in [UI documentation (TODO: insert link to documentation of kata search panel)](), but here are some useful hints for beginners:
 

content/getting-started/kata-solved.md

@@ -16,7 +16,16 @@ You worked hard to solve your last challenge, and after you succeeded, you defin
 
 Rank level reflects your experience and knowledge you have gained by solving kata. You start at the lowest rank of 8 kyū, and each correct solution brings you closer to a higher rank. You can see your rank progress toward next level on your profile page:
 
-![rank progress](./img/solving_01_rank-progress.png)
+<div class="block dark:hidden">
+
+![rank progress](./img/solving_01_rank-progress_light.png)
+
+</div>
+<div class="hidden dark:block">
+
+![rank progress](./img/solving_01_rank-progress_dark.png)
+
+</div>
 
 More information on ranks and progress can be found [here (TODO: add link to docs on progress)]().
 
@@ -28,6 +37,15 @@ Honor points are rewarded by contributing to Codewars in many ways, and solving
 
 After you have successfully solved a task, you can let others know how you liked it. One way to do this is to leave your satisfaction vote:
 
-![satisfaction vote](./img/solving_02_vote.png)
+<div class="block dark:hidden">
+
+![satisfaction vote](./img/solving_02_vote_light.png)
+
+</div>
+<div class="hidden dark:block">
+
+![satisfaction vote](./img/solving_02_vote_dark.png)
+
+</div>
 
 You can also participate in discussion on a kata. If you wish to log an issue about this specific kata, such as poorly worded descriptions or issues with test cases, then you can leave a comment in discourse section. More on this in the next part.

content/getting-started/setting-up.md

@@ -12,7 +12,16 @@ In this section you will learn how to set up your account to get the best traini
 
 You can enter your account settings panel by navigating with [this link](https://www.codewars.com/users/edit), or using following menu:
 
-![Account Settings menu](./img/setting-up_01_account-menu.png)
+<div class="block dark:hidden">
+
+![Account Settings menu](./img/setting-up_01_account-menu_light.png)
+
+</div>
+<div class="hidden dark:block">
+
+![Account Settings menu](./img/setting-up_01_account-menu_dark.png)
+
+</div>
 
 You can find all options described in detail [here (TODO: insert link to actual documentation of UI)](), and below are listed ones useful to get you running as soon as possible:
 
@@ -34,7 +43,16 @@ Now you just need to clik `UPDATE` to have your settings stored in the database.
 
 You can enter your training setup panel by navigating with [this link](https://www.codewars.com/trainer/setup), or using following menu:
 
-![Training Setup menu](./img/setting-up_02_training-menu.png)
+<div class="block dark:hidden">
+
+![Training Setup menu](./img/setting-up_02_training-menu_light.png)
+
+</div>
+<div class="hidden dark:block">
+
+![Training Setup menu](./img/setting-up_02_training-menu_dark.png)
+
+</div>
 
 Again, detailed description can be found in [UI documentation (TODO: insert link to actual documentation of UI)](), but things needed to get you started are briefly explaned below:
 

content/getting-started/solving-kata.md

@@ -11,7 +11,17 @@ After opening a kata page, you are presented with the [kata details (TODO: link
 ## Kata Trainer
 
 Welcome to the kata trainer! You use this view to take your attempts on solution, write the code and run tests. A few tips to get you started:
-![kata trainer](./img/solving_03_trainer.png)
+
+<div class="block dark:hidden">
+
+![kata trainer](./img/solving_03_trainer_light.png)
+
+</div>
+<div class="hidden dark:block">
+
+![kata trainer](./img/solving_03_trainer_dark.png)
+
+</div>
 
 ### Solution editor