Skip to content

Commit 19d67bc

Browse files
JulianPrieberJulianPrieber
authored
Merge pull request #273 from Yohn/Ace-editor
Updating Ace Editor for Dark Mode
2 parents bc93824 + afdc9c2 commit 19d67bc

File tree

2 files changed

+125
-3
lines changed

2 files changed

+125
-3
lines changed

‎resources/views/components/config/advanced-config.blade.php

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
1-
<p>Allows editing the frontend of your site. Amongst other things, this file allows customization of:<br>
1+
<p>Allows editing the frontend of your site. Amongst other things, this file allows customization of:<br>
22
Home Page, links, titles, Google Analytics and meta tags.</p>
33
<form action="{{ route('editAC') }}" method="post">
44
@csrf
55
<div class="form-group">
66
<label>Advanced Configuration file.</label>
77
<textarea style="width:100%;display:none;" class="form-control" name="AdvancedConfig" rows="280">{{ file_get_contents('config/advanced-config.php') }}</textarea>
8-
<div id="editor" style="width:100%; height:<?php echo count(file('config/advanced-config.php')) * 24 + 15;?>px;" class="form-control" name="AdvancedConfig" rows="280">{{ file_get_contents('config/advanced-config.php') }}</div>
8+
<div id="editor" style="width:100%; height:<?php echo count(file('config/advanced-config.php')) * 24 + 15;?>px; background-color:transparent !important;" class="form-control border-1 border-light" name="AdvancedConfig" rows="280">{{ file_get_contents('config/advanced-config.php') }}</div>
99
</div>
1010
<button type="submit" class="mt-3 ml-3 btn btn-info">Save</button>
1111
<a class="mt-3 ml-3 btn btn-primary confirmation" href="{{url('/panel/advanced-config?restore-defaults')}}">Restore defaults</a>
@@ -24,7 +24,13 @@
2424
<script src="{{ asset('studio/external-dependencies/ace.js') }}" type="text/javascript" charset="utf-8"></script>
2525
<script>
2626
var editor = ace.edit("editor");
27-
editor.setTheme("ace/theme/xcode");
27+
//if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
28+
if(!$('#toggle-switch').is(':checked')){
29+
// dark mode
30+
editor.setTheme("ace/theme/tomorrow_night");
31+
} else {
32+
editor.setTheme("ace/theme/xcode");
33+
}
2834
editor.getSession().setMode("ace/mode/javascript");
2935
editor.session.setUseWorker(false);
3036
</script>

‎studio/external-dependencies/theme-tomorrow_night.js

Lines changed: 116 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
define("ace/theme/tomorrow_night",["require","exports","module","ace/lib/dom"], function(require, exports, module) {
2+
3+
exports.isDark = true;
4+
exports.cssClass = "ace-tomorrow-night";
5+
exports.cssText = ".ace-tomorrow-night .ace_gutter {\
6+
background: #25282c;\
7+
color: #C5C8C6\
8+
}\
9+
.ace-tomorrow-night .ace_print-margin {\
10+
width: 1px;\
11+
background: #25282c\
12+
}\
13+
.ace-tomorrow-night {\
14+
background-color: #1D1F21;\
15+
color: #C5C8C6\
16+
}\
17+
.ace-tomorrow-night .ace_cursor {\
18+
color: #AEAFAD\
19+
}\
20+
.ace-tomorrow-night .ace_marker-layer .ace_selection {\
21+
background: #373B41\
22+
}\
23+
.ace-tomorrow-night.ace_multiselect .ace_selection.ace_start {\
24+
box-shadow: 0 0 3px 0px #1D1F21;\
25+
}\
26+
.ace-tomorrow-night .ace_marker-layer .ace_step {\
27+
background: rgb(102, 82, 0)\
28+
}\
29+
.ace-tomorrow-night .ace_marker-layer .ace_bracket {\
30+
margin: -1px 0 0 -1px;\
31+
border: 1px solid #4B4E55\
32+
}\
33+
.ace-tomorrow-night .ace_marker-layer .ace_active-line {\
34+
background: #282A2E\
35+
}\
36+
.ace-tomorrow-night .ace_gutter-active-line {\
37+
background-color: #282A2E\
38+
}\
39+
.ace-tomorrow-night .ace_marker-layer .ace_selected-word {\
40+
border: 1px solid #373B41\
41+
}\
42+
.ace-tomorrow-night .ace_invisible {\
43+
color: #4B4E55\
44+
}\
45+
.ace-tomorrow-night .ace_keyword,\
46+
.ace-tomorrow-night .ace_meta,\
47+
.ace-tomorrow-night .ace_storage,\
48+
.ace-tomorrow-night .ace_storage.ace_type,\
49+
.ace-tomorrow-night .ace_support.ace_type {\
50+
color: #B294BB\
51+
}\
52+
.ace-tomorrow-night .ace_keyword.ace_operator {\
53+
color: #8ABEB7\
54+
}\
55+
.ace-tomorrow-night .ace_constant.ace_character,\
56+
.ace-tomorrow-night .ace_constant.ace_language,\
57+
.ace-tomorrow-night .ace_constant.ace_numeric,\
58+
.ace-tomorrow-night .ace_keyword.ace_other.ace_unit,\
59+
.ace-tomorrow-night .ace_support.ace_constant,\
60+
.ace-tomorrow-night .ace_variable.ace_parameter {\
61+
color: #DE935F\
62+
}\
63+
.ace-tomorrow-night .ace_constant.ace_other {\
64+
color: #CED1CF\
65+
}\
66+
.ace-tomorrow-night .ace_invalid {\
67+
color: #CED2CF;\
68+
background-color: #DF5F5F\
69+
}\
70+
.ace-tomorrow-night .ace_invalid.ace_deprecated {\
71+
color: #CED2CF;\
72+
background-color: #B798BF\
73+
}\
74+
.ace-tomorrow-night .ace_fold {\
75+
background-color: #81A2BE;\
76+
border-color: #C5C8C6\
77+
}\
78+
.ace-tomorrow-night .ace_entity.ace_name.ace_function,\
79+
.ace-tomorrow-night .ace_support.ace_function,\
80+
.ace-tomorrow-night .ace_variable {\
81+
color: #81A2BE\
82+
}\
83+
.ace-tomorrow-night .ace_support.ace_class,\
84+
.ace-tomorrow-night .ace_support.ace_type {\
85+
color: #F0C674\
86+
}\
87+
.ace-tomorrow-night .ace_heading,\
88+
.ace-tomorrow-night .ace_markup.ace_heading,\
89+
.ace-tomorrow-night .ace_string {\
90+
color: #B5BD68\
91+
}\
92+
.ace-tomorrow-night .ace_entity.ace_name.ace_tag,\
93+
.ace-tomorrow-night .ace_entity.ace_other.ace_attribute-name,\
94+
.ace-tomorrow-night .ace_meta.ace_tag,\
95+
.ace-tomorrow-night .ace_string.ace_regexp,\
96+
.ace-tomorrow-night .ace_variable {\
97+
color: #CC6666\
98+
}\
99+
.ace-tomorrow-night .ace_comment {\
100+
color: #969896\
101+
}\
102+
.ace-tomorrow-night .ace_indent-guide {\
103+
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAACCAYAAACZgbYnAAAAEklEQVQImWNgYGBgYHB3d/8PAAOIAdULw8qMAAAAAElFTkSuQmCC) right repeat-y\
104+
}";
105+
106+
var dom = require("../lib/dom");
107+
dom.importCssString(exports.cssText, exports.cssClass);
108+
});
109+
(function() {
110+
window.require(["ace/theme/tomorrow_night"], function(m) {
111+
if (typeof module == "object" && typeof exports == "object" && module) {
112+
module.exports = m;
113+
}
114+
});
115+
})();
116+

0 commit comments

Comments
 (0)