@@ -2080,19 +2080,31 @@ var theme = (function() {
20802080 var hsl = arrayItem . color . hsl ;
20812081 for ( var i = 1 ; i <= shadeSteps ; i ++ ) {
20822082 if ( i > 1 ) {
2083- if ( arrayItem . style == "dark" ) {
2083+ var shiftDark = function ( ) {
20842084 rgb = helper . convertColor . hsl . rgb ( {
20852085 h : hsl . h ,
20862086 s : hsl . s ,
20872087 l : hsl . l - ( ( arrayItem . color . contrast . dark ) * ( i * 2 ) )
20882088 } ) ;
2089- } else if ( arrayItem . style == "light" ) {
2089+ } ;
2090+ var shiftLight = function ( ) {
20902091 rgb = helper . convertColor . hsl . rgb ( {
20912092 h : hsl . h ,
20922093 s : hsl . s ,
20932094 l : hsl . l + ( ( arrayItem . color . contrast . light ) * ( i * 2 ) )
20942095 } ) ;
20952096 } ;
2097+ if ( arrayItem . style == "dark" ) {
2098+ shiftDark ( ) ;
2099+ } else if ( arrayItem . style == "light" ) {
2100+ shiftLight ( ) ;
2101+ } else if ( arrayItem . style == "system" ) {
2102+ if ( window . matchMedia ( "(prefers-color-scheme:dark)" ) . matches ) {
2103+ shiftDark ( ) ;
2104+ } else if ( window . matchMedia ( "(prefers-color-scheme:light)" ) . matches ) {
2105+ shiftLight ( ) ;
2106+ } ;
2107+ } ;
20962108 } ;
20972109 for ( var colorKey in rgb ) {
20982110 if ( rgb [ colorKey ] < 0 ) {
@@ -2103,11 +2115,11 @@ var theme = (function() {
21032115 rgb [ colorKey ] = Math . round ( rgb [ colorKey ] ) ;
21042116 } ;
21052117 var themePresetBackground = helper . node ( "span|class:theme-preset-background-0" + i ) ;
2106- themePresetBackground . style . setProperty ( "background-color" , "rgb(" + rgb . r + ", " + rgb . g + ", " + rgb . b + ")" ) ;
2118+ themePresetPreview . style . setProperty ( "--theme-preset- background-0" + i , rgb . r + ", " + rgb . g + ", " + rgb . b ) ;
21072119 themePresetPreview . appendChild ( themePresetBackground ) ;
21082120 } ;
21092121 var themePresetAccent = helper . node ( "span|class:theme-preset-accent" ) ;
2110- themePresetAccent . style . setProperty ( "background-color " , "rgb(" + arrayItem . accent . rgb . r + ", " + arrayItem . accent . rgb . g + ", " + arrayItem . accent . rgb . b + ")" ) ;
2122+ themePresetPreview . style . setProperty ( "--theme-preset-accent " , arrayItem . accent . rgb . r + ", " + arrayItem . accent . rgb . g + ", " + arrayItem . accent . rgb . b ) ;
21112123 themePresetPreview . appendChild ( themePresetAccent ) ;
21122124 if ( arrayItem . name != null && arrayItem . name != "" ) {
21132125 var themePresetName = helper . node ( "span:" + arrayItem . name + "|class:theme-preset-name" ) ;
@@ -2200,11 +2212,11 @@ var theme = (function() {
22002212 rgb [ colorKey ] = Math . round ( rgb [ colorKey ] ) ;
22012213 } ;
22022214 var themeCustomBackground = helper . node ( "span|class:theme-custom-background-0" + i ) ;
2203- themeCustomBackground . style . setProperty ( "background-color" , "rgb(" + rgb . r + ", " + rgb . g + ", " + rgb . b + ")" ) ;
2215+ themeCustomPreview . style . setProperty ( "--theme-custom- background-0" + i , rgb . r + ", " + rgb . g + ", " + rgb . b ) ;
22042216 themeCustomPreview . appendChild ( themeCustomBackground ) ;
22052217 } ;
22062218 var themeCustomAccent = helper . node ( "span|class:theme-custom-accent" ) ;
2207- themeCustomAccent . style . setProperty ( "background-color " , "rgb(" + arrayItem . accent . rgb . r + ", " + arrayItem . accent . rgb . g + ", " + arrayItem . accent . rgb . b + ")" ) ;
2219+ themeCustomPreview . style . setProperty ( "--theme-custom-accent " , arrayItem . accent . rgb . r + ", " + arrayItem . accent . rgb . g + ", " + arrayItem . accent . rgb . b ) ;
22082220 themeCustomPreview . appendChild ( themeCustomAccent ) ;
22092221 if ( arrayItem . name != null && arrayItem . name != "" ) {
22102222 var themeCustomName = helper . node ( "span:" + arrayItem . name + "|class:theme-custom-name" ) ;
0 commit comments