search

sbarex / SourceCodeSyntaxHighlight

Quick Look extension for highlight source code files on macOS 10.15 and later.
GNU General Public License v3.0
3.02k stars 72 forks source link

The light/dark scheme doesn't change automatically #214

Open dingyiyi0226 opened 1 year ago

dingyiyi0226 commented 1 year ago

If I change the system appearance to light/dark scheme, the quicklook content doesn't change. It only works if I relaunch the Finder app.

Dark scheme:

Screen Shot 2022-12-15 at 13 01 12

Change to light scheme:

Screen Shot 2022-12-15 at 13 01 20
setanarut commented 1 year ago

Paste the following CSS code here. (Custom CSS Style window)

Ekran Resmi 2022-12-15 11 12 42 
:root {
  /* LIGHT THEME*/
  --default_text: #2e2e2e;
  --hl_Background: #F6F8FA ;
  --hl_Number: #005cc5 ;
  --hl_Escape: #032f62 ;
  --hl_String: #032f62 ;
  --hl_String_Pre_Processor: #549ef1 ;
  --hl_Block_Comment: #6a737d ;
  --hl_Line_Comment: #6a737d ;
  --hl_Pre_Processor: #d73a49 ;
  --hl_Line_Number:  #52565C ;
  --hl_Operator: #032f62 ;
  --hl_Interpolation:  #79c0ff ;
  --hl_Keyword-1: #d73a49 ;
  --hl_Keyword-2: #d73a49 ;
  --hl_Keyword-3: #24292e ;
  --hl_Keyword-4: #6f42c1 ;
  --hl_Keyword-5: #d73a49 ;
  --hl_Keyword-6: #d73a49 ;
}

@media (prefers-color-scheme: dark) {
  /* DARK THEME*/
  :root {
  --default_text: #e3e3e3;
  --hl_Background: #2d333b ;
  --hl_Number: #79c0ff ;
  --hl_Escape: #a5d6ff ;
  --hl_String: #549ef1 ;
  --hl_String_Pre_Processor: #549ef1 ;
  --hl_Block_Comment: #8b949e ;
  --hl_Line_Comment: #8b949e ;
  --hl_Pre_Processor: #FF7B72 ;
  --hl_Line_Number:  #52565C ;
  --hl_Operator: #79c0ff ;
  --hl_Interpolation:  #79c0ff ;
  --hl_Keyword-1: #FF7B72 ;
  --hl_Keyword-2: #FF7B72 ;
  --hl_Keyword-3: #c9d1d9 ;
  --hl_Keyword-4: #eea8ff ; 
  --hl_Keyword-5: #FF7B72 ;
  --hl_Keyword-6: #FF7B72 ;
  }
}
/*Syntax Highlight*/

body.hl { background-color: var(--hl_Background);} /* Canvas */
pre.hl  { color: var(--default_text);} /* Default text */
pre.hl  { background-color: var(--hl_Background);} /* Default content BG*/
.hl.num { color: var(--hl_Number); font-weight: normal;} /* Numbers */
.hl.esc { color: var(--hl_Escape); font-weight: normal;} /* Escape */
.hl.sng { color: var(--hl_String); font-weight: normal;} /* String */
.hl.pps { color: var(--hl_String_Pre_Processor); font-weight: normal;} /* Preprocessor */
.hl.slc { color: var(--hl_Line_Comment); font-weight: normal;}  /* Single line comment */
.hl.com { color: var(--hl_Block_Comment); font-weight: normal;} /* Multi line comment */
.hl.ppc { color: var(--hl_Pre_Processor); font-weight: normal;} /* Post-processor */
.hl.opt { color: var(--hl_Operator); font-weight: normal;}  /* Operator */
.hl.ipl { color: var(--hl_Interpolation); font-weight: normal;} /* Interpolation */
.hl.lin { color: var(--hl_Line_Number); font-weight: normal;}   /* Line numbers */
.hl.kwa { color: var(--hl_Keyword-1); font-weight: normal;} /* Keyword a */
.hl.kwb { color: var(--hl_Keyword-2); font-weight: normal;} /* Keyword b */
.hl.kwc { color: var(--hl_Keyword-3); font-weight: normal;} /* Keyword c */
.hl.kwd { color: var(--hl_Keyword-4); font-weight: normal;} /* Keyword d */
.hl.kwe { color: var(--hl_Keyword-5); font-weight: normal;} /* Keyword e */
.hl.kwf { color: var(--hl_Keyword-6); font-weight: normal;} /* Keyword f */

/* hl.hvr {}    LS Hover
hl.err {}   LS Syntax Error
hl.sta {}   LS Type
hl.stb {}   LS Class
hl.stc {}   LS Struct
hl.std {}   LS Interface
hl.ste {}   LS Parameter
hl.stf {}   LS Variable
hl.stg {}   LS Enum Member
hl.sth {}   LS Function
hl.sti {}   LS Method
hl.stj {}   LS Keyword
hl.stk {}   LS Number
hl.stl {}   LS Regexp
hl.stm {}   LS Operator */

If you want, you can edit the colors with a Code Editor (VS Code). Edit this CSS -> ~/Library/Application Support/Syntax Highlight/Styles/global.css

Ekran Resmi 2022-12-15 11 09 31

Result: The theme now changes automatically:

https://user-images.githubusercontent.com/36481442/207809050-b20597fa-968e-4be6-9a86-096e7bc3a0e7.mov

frankrolf commented 1 year ago

Thank you for this!

Here’s the CSS for anyone who wants to switch between Andes (light) and Acid (dark):

:root {
  /* LIGHT THEME*/
  --default_text: #000000;
  --hl_Background: #eeeeee;
  --hl_Number: #800080;
  --hl_String: #a68500;
  --hl_Escape: #ff00ff;
  --hl_Pre_Processor: #0080c0;
  --hl_String_Pre_Processor: #0000ff;
  --hl_Block_Comment: #ff8000;
  --hl_Line_Comment: #f27900;
  --hl_Line_Number: #303030;
  --hl_Operator: #ff0080;
  --hl_Interpolation: #9E5DFF;
  --hl_Keyword-1: #bb7977;
  --hl_Keyword-2: #8080c0;
  --hl_Keyword-3: #0080c0;
  --hl_Keyword-4: #004466;
  --hl_Keyword-5: #0dc375;
  --hl_Keyword-6: #0db6c3;
}

@media (prefers-color-scheme: dark) {
  /* DARK THEME*/
  :root {
  --default_text: #f0f0f0;
  --hl_Background: #0f0f0f;
  --hl_Number: #dfaf87;
  --hl_String: #ffff77;
  --hl_Escape: #df8787;
  --hl_Pre_Processor: #afdf87;
  --hl_String_Pre_Processor: #ffff77;
  --hl_Block_Comment: #33ff00;
  --hl_Line_Comment: #33ff00;
  --hl_Line_Number: #993366;
  --hl_Operator: #ff00cc;
  --hl_Interpolation: #8FDBDF;
  --hl_Keyword-1: #66aaff;
  --hl_Keyword-2: #66ff99;
  --hl_Keyword-3: #cc9966;
  --hl_Keyword-4: #ff99aa;
  --hl_Keyword-5: #687fc4;
  --hl_Keyword-6: #bdbdbd;
  }
}
/*Syntax Highlight*/

body.hl { background-color: var(--hl_Background);} /* Canvas */
pre.hl  { color: var(--default_text);} /* Default text */
pre.hl  { background-color: var(--hl_Background);} /* Default content BG*/
.hl.num { color: var(--hl_Number); font-weight: normal;} /* Numbers */
.hl.esc { color: var(--hl_Escape); font-weight: normal;} /* Escape */
.hl.sng { color: var(--hl_String); font-weight: normal;} /* String */
.hl.pps { color: var(--hl_String_Pre_Processor); font-weight: normal;} /* Preprocessor */
.hl.slc { color: var(--hl_Line_Comment); font-weight: normal;}  /* Single line comment */
.hl.com { color: var(--hl_Block_Comment); font-weight: normal;} /* Multi line comment */
.hl.ppc { color: var(--hl_Pre_Processor); font-weight: normal;} /* Post-processor */
.hl.opt { color: var(--hl_Operator); font-weight: normal;}  /* Operator */
.hl.ipl { color: var(--hl_Interpolation); font-weight: normal;} /* Interpolation */
.hl.lin { color: var(--hl_Line_Number); font-weight: normal;}   /* Line numbers */
.hl.kwa { color: var(--hl_Keyword-1); font-weight: normal;} /* Keyword a */
.hl.kwb { color: var(--hl_Keyword-2); font-weight: normal;} /* Keyword b */
.hl.kwc { color: var(--hl_Keyword-3); font-weight: normal;} /* Keyword c */
.hl.kwd { color: var(--hl_Keyword-4); font-weight: normal;} /* Keyword d */
.hl.kwe { color: var(--hl_Keyword-5); font-weight: normal;} /* Keyword e */
.hl.kwf { color: var(--hl_Keyword-6); font-weight: normal;} /* Keyword f */

/* hl.hvr {}    LS Hover
hl.err {}   LS Syntax Error
hl.sta {}   LS Type
hl.stb {}   LS Class
hl.stc {}   LS Struct
hl.std {}   LS Interface
hl.ste {}   LS Parameter
hl.stf {}   LS Variable
hl.stg {}   LS Enum Member
hl.sth {}   LS Function
hl.sti {}   LS Method
hl.stj {}   LS Keyword
hl.stk {}   LS Number
hl.stl {}   LS Regexp
hl.stm {}   LS Operator */