fanbinit/rhymix
1
0
Fork 0
mirror of https://github.com/Lastorder-DC/rhymix.git synced 2026-05-09 03:52:15 +09:00
Code Issues Projects Releases Packages Wiki Activity

Add uicolor settings

Browse source 
uicolor 설정을 이용해서 moono-lisa 스킨의 다크모드를 구현합니다.
This commit is contained in:
Min-Soo Kim 2021-01-07 11:32:43 +09:00
parent 436f4f7f10
commit c4cb246b3d
2 changed files with 36 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

26
modules/editor/skins/ckeditor/css/default.less
View file

@ -32,6 +32,27 @@
margin: 0 0 @content_paragraph_spacing 0; margin: 0 0 @content_paragraph_spacing 0;
} }
/* if editor_auto_dark_mode == 'Y' load darkmode style */
.auto_dark(@cs) when not (@cs = moono-dark) {
html {
body.cke_editable {
if((@auto_dark_mode = Y), .light_dark(moono-dark), .light_dark(default));
}
}
.cke_reset {
span {
&.cke_top {
if((@auto_dark_mode = Y), .light_dark_top(moono-dark), .light_dark_top(default));
}
}
}
.cke_button_icon, .cke_combo_button, .cke_button_arrow, .cke_button_label {
filter: invert(1);
}
}
.auto_dark(@cs) when (@cs = moono-dark) {
}
.light_dark(@cs) when (@cs = moono-dark) { .light_dark(@cs) when (@cs = moono-dark) {
background-color: #333; background-color: #333;
color: #fff; color: #fff;
@ -98,7 +119,6 @@ p.editor_autosaved_message.autosave_message {
} }
} }
.xe_content.editable, .rhymix_content.editable, .cke_wysiwyg_div { .xe_content.editable, .rhymix_content.editable, .cke_wysiwyg_div {
.cont_font(@content_font); .cont_font(@content_font);
.cont_fontsize(@content_font_size); .cont_fontsize(@content_font_size);
@ -133,3 +153,7 @@ p.editor_autosaved_message.autosave_message {
} }
} }
} }
@media (prefers-color-scheme: dark) {
.auto_dark(@colorset)
}

11
modules/editor/skins/ckeditor/editor.html
View file

@ -6,6 +6,7 @@
{@ $css_var->content_line_height = $content_line_height ? $content_line_height: 'none';} {@ $css_var->content_line_height = $content_line_height ? $content_line_height: 'none';}
{@ $css_var->content_word_break = $content_word_break ? $content_word_break : 'none';} {@ $css_var->content_word_break = $content_word_break ? $content_word_break : 'none';}
{@ $css_var->content_paragraph_spacing = $content_paragraph_spacing ? $content_paragraph_spacing : 'none';} {@ $css_var->content_paragraph_spacing = $content_paragraph_spacing ? $content_paragraph_spacing : 'none';}
{@ $css_var->auto_dark_mode = ($editor_auto_dark_mode)? 'Y':'N' }
{@ Context::set('css_var',$css_var);} {@ Context::set('css_var',$css_var);}
<load target="css/default.less" vars="$css_var" /> <load target="css/default.less" vars="$css_var" />
@ -94,10 +95,17 @@ var auto_saved_msg = "{$lang->msg_auto_saved}";
// Apply auto dark mode. // Apply auto dark mode.
var editor_skin = '{$colorset}'; var editor_skin = '{$colorset}';
var editor_color = null;
<!--@if($editor_auto_dark_mode)--> <!--@if($editor_auto_dark_mode)-->
if (getColorScheme() === 'dark') { if (getColorScheme() === 'dark') {
if(editor_skin === 'moono-lisa' ) {
editor_color = '#333333'
}
else {
editor_skin = 'moono-dark'; editor_skin = 'moono-dark';
} }
}
<!--@endif--> <!--@endif-->
// Initialize CKEditor settings. // Initialize CKEditor settings.
@ -114,7 +122,8 @@ var auto_saved_msg = "{$lang->msg_auto_saved}";
toolbarCanCollapse: true, toolbarCanCollapse: true,
allowedContent: true, allowedContent: true,
startupFocus: {json_encode($editor_focus)}, startupFocus: {json_encode($editor_focus)},
language: "{str_replace('jp','ja',$lang_type)}" language: "{str_replace('jp','ja',$lang_type)}",
uiColor: editor_color
}, },
loadXeComponent: true, loadXeComponent: true,
enableToolbar: true, enableToolbar: true,