webapp/bookstack
1
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2025-12-13 07:42:23 +03:00
Code Activity

Styles: Made non-active dark/light css variables exist by default

Browse Source 
This means that it would be possible to jump between light/dark mode
with just the class, and no reload needed.
Not something we'll directly use right now, but may be useful in
customizations.
This commit is contained in:
Dan Brown
2025-11-27 21:55:32 +00:00
parent 0f40aeb0d3
commit bb350639c6
2 changed files with 31 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
resources/views/layouts/parts/custom-styles.blade.php
View File

@@ -1,15 +1,22 @@
@php
$settingSuffix = setting()->getForCurrentUser('dark-mode-enabled') ? '-dark' : '';
@endphp
<style>
:root {
--color-primary: {{ setting('app-color' . $settingSuffix) }};
--color-primary-light: {{ setting('app-color-light' . $settingSuffix) }};
--color-link: {{ setting('link-color' . $settingSuffix) }};
--color-bookshelf: {{ setting('bookshelf-color' . $settingSuffix)}};
--color-book: {{ setting('book-color' . $settingSuffix)}};
--color-chapter: {{ setting('chapter-color' . $settingSuffix)}};
--color-page: {{ setting('page-color' . $settingSuffix)}};
--color-page-draft: {{ setting('page-draft-color' . $settingSuffix)}};
--color-primary: {{ setting('app-color') }};
--color-primary-light: {{ setting('app-color-light') }};
--color-link: {{ setting('link-color') }};
--color-bookshelf: {{ setting('bookshelf-color') }};
--color-book: {{ setting('book-color') }};
--color-chapter: {{ setting('chapter-color') }};
--color-page: {{ setting('page-color') }};
--color-page-draft: {{ setting('page-draft-color') }};
}
:root.dark-mode {
--color-primary: {{ setting('app-color-dark') }};
--color-primary-light: {{ setting('app-color-light-dark') }};
--color-link: {{ setting('link-color-dark') }};
--color-bookshelf: {{ setting('bookshelf-color-dark') }};
--color-book: {{ setting('book-color-dark') }};
--color-chapter: {{ setting('chapter-color-dark') }};
--color-page: {{ setting('page-color-dark') }};
--color-page-draft: {{ setting('page-draft-color-dark') }};
}
</style>

13
tests/Settings/SettingsTest.php
View File

@@ -101,4 +101,17 @@ class SettingsTest extends TestCase
file_get_contents(public_path('favicon.ico')),
);
}
public function test_both_light_and_dark_colors_are_used_in_the_base_view()
{
// To allow for dynamic color changes on the front-end where desired.
$this->setSettings(['page-color' => 'superlightblue', 'page-color-dark' => 'superdarkblue']);
$resp = $this->get('/login');
$resp->assertSee(':root {');
$resp->assertSee('superlightblue');
$resp->assertSee(':root.dark-mode {');
$resp->assertSee('superdarkblue');
}
}