diff --git a/styles.css b/styles.css index 06b7a73..c14a3a8 100644 --- a/styles.css +++ b/styles.css @@ -13,48 +13,24 @@ text-align: right; } -@media (prefers-color-scheme: light) { - .file-diff__top-line__bg { - background-color: #d9f4ef; - border-radius: 0.25rem; /* 4px */ - } - - .file-diff_top-line__character { - background-color: #99e1d3; - border-radius: 0.25rem; /* 4px */ - } - - .file-diff__bottom-line__bg { - background-color: #d9edff; - border-radius: 0.25rem; /* 4px */ - } - - .file-diff_bottom-line__character { - background-color: #b1d4f2; - border-radius: 0.25rem; /* 4px */ - } -} - -@media (prefers-color-scheme: dark) { - .file-diff__top-line__bg { - background-color: #25403b; - border-radius: 0.25rem; /* 4px */ - } - - .file-diff_top-line__character { - background-color: #236559; - border-radius: 0.25rem; /* 4px */ - } - - .file-diff__bottom-line__bg { - background-color: #25394b; - border-radius: 0.25rem; /* 4px */ - } - - .file-diff_bottom-line__character { - background-color: #2e618d; - border-radius: 0.25rem; /* 4px */ - } +.file-diff__top-line__bg { + background-color: color-mix(in srgb, var(--background-primary), #0fc 15%); + border-radius: 0.25rem; /* 4px */ +} + +.file-diff_top-line__character { + background-color: color-mix(in srgb, var(--background-primary), #0fc 50%); + border-radius: 0.25rem; /* 4px */ +} + +.file-diff__bottom-line__bg { + background-color: color-mix(in srgb, var(--background-primary), #08f 15%); + border-radius: 0.25rem; /* 4px */ +} + +.file-diff_bottom-line__character { + background-color: color-mix(in srgb, var(--background-primary), #08f 50%); + border-radius: 0.25rem; /* 4px */ } .file-diff__no-bottom-border { @@ -68,7 +44,7 @@ } .file-diff__action-line { - color: #919191; + color: var(--text-muted); } /* Tailwind CSS */