Skip to content

Commit 44bab24

Browse files
sabistDarkaOnLine
sabist
and
DarkaOnLine
authored
Add dark mode config and styles (#598)
Co-authored-by: Darius Matulionis <darius.matulionis@supermetrics.com>
1 parent 28ca3cc commit 44bab24

File tree

2 files changed

+88
-1
lines changed

2 files changed

+88
-1
lines changed

‎config/l5-swagger.php

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -256,6 +256,7 @@
256256
*/
257257
'ui' => [
258258
'display' => [
259+
'dark_mode' => env('L5_SWAGGER_UI_DARK_MODE', false),
259260
/*
260261
* Controls the default expansion setting for the operations and tags. It can be :
261262
* 'list' (expands only the tags),

‎resources/views/index.blade.php

Lines changed: 87 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,9 +25,95 @@
2525
background: #fafafa;
2626
}
2727
</style>
28+
@if(config('l5-swagger.defaults.ui.display.dark_mode'))
29+
<style>
30+
body#dark-mode,
31+
#dark-mode .scheme-container {
32+
background: #1b1b1b;
33+
}
34+
#dark-mode .scheme-container,
35+
#dark-mode .opblock .opblock-section-header{
36+
box-shadow: 0 1px 2px 0 rgba(255, 255, 255, 0.15);
37+
}
38+
#dark-mode .operation-filter-input,
39+
#dark-mode .dialog-ux .modal-ux,
40+
#dark-mode input[type=email],
41+
#dark-mode input[type=file],
42+
#dark-mode input[type=password],
43+
#dark-mode input[type=search],
44+
#dark-mode input[type=text],
45+
#dark-mode textarea{
46+
background: #343434;
47+
color: #e7e7e7;
48+
}
49+
#dark-mode .title,
50+
#dark-mode li,
51+
#dark-mode p,
52+
#dark-mode table,
53+
#dark-mode label,
54+
#dark-mode .opblock-tag,
55+
#dark-mode .opblock .opblock-summary-operation-id,
56+
#dark-mode .opblock .opblock-summary-path,
57+
#dark-mode .opblock .opblock-summary-path__deprecated,
58+
#dark-mode h1,
59+
#dark-mode h2,
60+
#dark-mode h3,
61+
#dark-mode h4,
62+
#dark-mode h5,
63+
#dark-mode .btn,
64+
#dark-mode .tab li,
65+
#dark-mode .parameter__name,
66+
#dark-mode .parameter__type,
67+
#dark-mode .prop-format,
68+
#dark-mode .loading-container .loading:after{
69+
color: #e7e7e7;
70+
}
71+
#dark-mode .opblock-description-wrapper p,
72+
#dark-mode .opblock-external-docs-wrapper p,
73+
#dark-mode .opblock-title_normal p,
74+
#dark-mode .response-col_status,
75+
#dark-mode table thead tr td,
76+
#dark-mode table thead tr th,
77+
#dark-mode .response-col_links,
78+
#dark-mode .swagger-ui{
79+
color: wheat;
80+
}
81+
#dark-mode .parameter__extension,
82+
#dark-mode .parameter__in,
83+
#dark-mode .model-title{
84+
color: #949494;
85+
}
86+
#dark-mode table thead tr td,
87+
#dark-mode table thead tr th{
88+
border-color: rgba(120,120,120,.2);
89+
}
90+
#dark-mode .opblock .opblock-section-header{
91+
background: transparent;
92+
}
93+
#dark-mode .opblock.opblock-post{
94+
background: rgba(73,204,144,.25);
95+
}
96+
#dark-mode .opblock.opblock-get{
97+
background: rgba(97,175,254,.25);
98+
}
99+
#dark-mode .opblock.opblock-put{
100+
background: rgba(252,161,48,.25);
101+
}
102+
#dark-mode .opblock.opblock-delete{
103+
background: rgba(249,62,62,.25);
104+
}
105+
#dark-mode .loading-container .loading:before{
106+
border-color: rgba(255,255,255,10%);
107+
border-top-color: rgba(255,255,255,.6);
108+
}
109+
#dark-mode svg:not(:root){
110+
fill: #e7e7e7;
111+
}
112+
</style>
113+
@endif
28114
</head>
29115

30-
<body>
116+
<body @if(config('l5-swagger.defaults.ui.display.dark_mode')) id="dark-mode" @endif>
31117
<div id="swagger-ui"></div>
32118

33119
<script src="{{ l5_swagger_asset($documentation, 'swagger-ui-bundle.js') }}"></script>

0 commit comments

Comments
 (0)