@import "../variables.styl" $code-foreground = lighten($default-text-color, 2%) $code-background = darken($background-color, 5%) $highlight-foreground = lighten($default-text-color, 2%) $highlight-background = darken($background-color, 2%) $highlight-gutter-color = lighten($default-text-color, 5%) $highlight-gutter-bg-color = darken($background-color, 5%) $highlight-comment = #8e908c $highlight-red = #c82829 $highlight-orange = #f5871f $highlight-yellow = #eab700 $highlight-green = #718c00 $highlight-aqua = #3e999f $highlight-blue = #4271ae $highlight-purple = #8959a8 $highlight-deletion = #fdd $highlight-addition = #dfd $night-code-foreground = lighten($dark-default-text-color, 2%) $night-code-background = darken($dark-background-color, 10%) $night-highlight-foreground = lighten($dark-default-text-color, 2%) $night-highlight-background = darken($dark-background-color, 8%) $night-highlight-gutter-color = lighten($dark-default-text-color, 5%) $night-highlight-gutter-bg-color = darken($dark-background-color, 10%) $night-highlight-comment = #969896 $night-highlight-red = #cc6666 $night-highlight-orange = #de935f $night-highlight-yellow = #f0c674 $night-highlight-green = #b5bd68 $night-highlight-aqua = #8abeb7 $night-highlight-blue = #81a2be $night-highlight-purple = #b294bb $night-highlight-deletion = #008000 $night-highlight-addition = #800000 code-theme(mode) { --code-foreground: mode == 'light' ? $code-foreground : $night-code-foreground; --code-background: mode == 'light' ? $code-background : $night-code-background; --highlight-background: mode == 'light' ? $highlight-background : $night-highlight-background; --highlight-foreground: mode == 'light' ? $highlight-foreground : $night-highlight-foreground; --highlight-comment: mode == 'light' ? $highlight-comment : $night-highlight-comment; --highlight-red: mode == 'light' ? $highlight-red : $night-highlight-red; --highlight-orange: mode == 'light' ? $highlight-orange : $night-highlight-orange; --highlight-yellow: mode == 'light' ? $highlight-yellow : $night-highlight-yellow; --highlight-green: mode == 'light' ? $highlight-green : $night-highlight-green; --highlight-aqua: mode == 'light' ? $highlight-aqua : $night-highlight-aqua; --highlight-blue: mode == 'light' ? $highlight-blue : $night-highlight-blue; --highlight-purple: mode == 'light' ? $highlight-purple : $night-highlight-purple; --highlight-gutter-color: mode == 'light' ? $highlight-gutter-color : $night-highlight-gutter-color; --highlight-gutter-bg-color: mode == 'light' ? $highlight-gutter-bg-color : $night-highlight-gutter-bg-color; } :root { code-theme('light'); } @media (prefers-color-scheme: dark) { :root { code-theme('dark'); } } .light-mode { code-theme('light'); } .dark-mode { code-theme('dark'); }