diff --git a/src/base.css b/src/base.css index 627f763..8ecee71 100644 --- a/src/base.css +++ b/src/base.css @@ -1,67 +1,35 @@ -html { - --bg_h: #f9f5d7 !important; - --bg: #fbf1c7 !important; - --bg_s: #f2e5bc !important; - --bg1: #ebdbb2 !important; - --bg2: #d5c4a1 !important; - --bg3: #bdae93 !important; - --bg4: #a89984 !important; +:root { + --bg_h: #1d2021; + --bg: #282828; + --bg_s: #32302f; + --bg1: #3c3836; + --bg2: #504945; + --bg3: #665c54; + --bg4: #7c6f64; - --fg: #282828 !important; - --fg1: #3c3836 !important; - --fg2: #504945 !important; - --fg3: #665c54 !important; - --fg4: #7c6f64 !important; + --fg: #fbf1c7; + --fg1: #ebdbb2; + --fg2: #d5c4a1; + --fg3: #bdae93; + --fg4: #a89984; - --red: #9d0006 !important; - --green: #79740e !important; - --yellow: #b57614 !important; - --blue: #076678 !important; - --purple: #8f3f71 !important; - --aqua: #427b58 !important; - --orange: #af3a03 !important; - --gray: #928374 !important; + --red: #fb4934; + --green: #b8bb26; + --yellow: #fabd2f; + --blue: #83a598; + --purple: #d3869b; + --aqua: #8ec07c; + --gray: #928374; + --orange: #fe8019; - --red-dim: #cc2412 !important; - --green-dim: #98971a !important; - --yellow-dim: #d79921 !important; - --blue-dim: #458598 !important; - --purple-dim: #b16286 !important; - --aqua-dim: #689d6a !important; - --orange-dim: #d65d0e !important; - --gray-dim: #7c6f64 !important; -} - -html.dark { - --bg_h: #1d2021 !important; - --bg: #282828 !important; - --bg_s: #32302f !important; - --bg1: #3c3836 !important; - --bg2: #504945 !important; - --bg3: #665c54 !important; - --bg4: #7c6f64 !important; - - --fg: #fbf1c7 !important; - --fg1: #ebdbb2 !important; - --fg2: #d5c4a1 !important; - --fg3: #bdae93 !important; - --fg4: #a89984 !important; - - --red: #fb4934 !important; - --green: #b8bb26 !important; - --yellow: #fabd2f !important; - --blue: #83a598 !important; - --purple: #d3869b !important; - --aqua: #8ec07c !important; - --gray: #928374 !important; - --orange: #fe8019 !important; - - --red-dim: #cc2412 !important; - --green-dim: #98971a !important; - --yellow-dim: #d79921 !important; - --blue-dim: #458588 !important; - --purple-dim: #b16286 !important; - --aqua-dim: #689d6a !important; - --gray-dim: #a89984 !important; - --orange-dim: #d65d0e !important; + --red-dim: #cc2412; + --green-dim: #98971a; + --yellow-dim: #d79921; + --blue-dim: #458588; + --purple-dim: #b16286; + --aqua-dim: #689d6a; + --gray-dim: #a89984; + --orange-dim: #d65d0e; + --monospaceFontFamily: "ComicCodeLigatures Nerd Font", "Ubuntu Mono", + monospace, emoji; } diff --git a/src/pocketbase.user.css b/src/pocketbase.user.css index fb16176..74d68bf 100644 --- a/src/pocketbase.user.css +++ b/src/pocketbase.user.css @@ -1,5 +1,5 @@ /* ==UserStyle== -@name Dracula for Pocketbase +@name Gruvbox for Pocketbase @namespace git.m3.fyi/Marsn3 @version 1.0.0 @description A dark Theme for Pocketbase @@ -12,35 +12,67 @@ @-moz-document domain("api.m3.fyi") { /*~~~~~ Base Colors ~~~~~*/ :root { + --bg_h: #1d2021; + --bg: #282828; + --bg_s: #32302f; + --bg1: #3c3836; + --bg2: #504945; + --bg3: #665c54; + --bg4: #7c6f64; + + --fg: #fbf1c7; + --fg1: #ebdbb2; + --fg2: #d5c4a1; + --fg3: #bdae93; + --fg4: #a89984; + + --red: #fb4934; + --green: #b8bb26; + --yellow: #fabd2f; + --blue: #83a598; + --purple: #d3869b; + --aqua: #8ec07c; + --gray: #928374; + --orange: #fe8019; + + --red-dim: #cc2412; + --green-dim: #98971a; + --yellow-dim: #d79921; + --blue-dim: #458588; + --purple-dim: #b16286; + --aqua-dim: #689d6a; + --gray-dim: #a89984; + --orange-dim: #d65d0e; --monospaceFontFamily: "ComicCodeLigatures Nerd Font", "Ubuntu Mono", monospace, emoji; - --txtPrimaryColor: #f8f8f2; - --txtHintColor: #7b81a6; - --txtDisabledColor: #9599b7; - --primaryColor: #969dca; - --bodyColor: #282a36; - --baseColor: #282a36; - --baseAlt1Color: #585b74; - --baseAlt2Color: #4d5166; - --baseAlt3Color: #424457; - --baseAlt4Color: #373949; - --infoColor: #8be9fd; - --infoAltColor: #8be9fd; - --successColor: #50fa7b; - --successAltColor: #50fa7b; - --dangerColor: #ff5555; - --dangerAltColor: #ff5555; - --warningColor: #bd93f9; - --warningAltColor: #ffffa5; - --overlayColor: rgba(65, 82, 105, 0.25); - --tooltipColor: rgba(255, 255, 255, 0.85); - --shadowColor: rgba(0, 0, 0, 0.05); - accent-color: var(--primaryColor); + + --txtPrimaryColor: var(--fg); + --txtHintColor: var(--fg2); + --txtDisabledColor: var(--fg3); + --primaryColor: var(--green-dim); + --bodyColor: var(--bg); + --baseColor: var(--bg); + --baseAlt1Color: var(--bg4); + --baseAlt2Color: var(--bg3); + --baseAlt3Color: var(--bg2); + --baseAlt4Color: var(--bg1); + --infoColor: var(--blue); + --infoAltColor: var(--blue-dim); + --successColor: var(--green); + --successAltColor: var(--green-dim); + --dangerColor: var(--red); + --dangerAltColor: var(--red-dim); + --warningColor: var(--orange); + --warningAltColor: var(--orange-dim); + --overlayColor: rgba(168, 153, 132,0.25); + --tooltipColor: var(--bg4) + --shadowColor: rgba(50, 48, 47, 0.5); + --accent-color: var(--primaryColor); } /*~~~~~ Buttoms ~~~~~*/ .btn-sm .btn-warning { - background-color: pink !important; + background-color: var(--warningColor) !important; } .btn.btn-secondary, .btn.btn-outline { @@ -83,16 +115,16 @@ color: var(--warningColor); } .prism-light .token.number { - color: #ffb86c; + color: var(--orange); } .prism-light .token.class-name { - color: #8be9fd; + color: var(--blue); } .prism-light .token.comment { - color: #9599b7; + color: var(--fg4); } .prism-light .token.function { - color: #bd93f9; + color: var(--purple); } /*~~~~~ Colored Delete Icon ~~~~~*/ @@ -102,7 +134,7 @@ /*~~~~~ Syntax Highlighting for Regex Fields ~~~~~*/ .ͼb { - color: #bd93f9; + color: var(--purple); } .ͼe { color: var(--dangerColor);