diff --git a/web/assets/css/styles.css b/web/assets/css/styles.css index 126b6c9..a46e035 100644 --- a/web/assets/css/styles.css +++ b/web/assets/css/styles.css @@ -22,7 +22,7 @@ body { } body.dark { - background-color: #0f0f0f; + background-color: #181A1B; } main { @@ -34,6 +34,10 @@ a { text-decoration: underline; } +.dark a { + color: #9551EC; +} + .cel-logo { height: 24px; } @@ -48,7 +52,7 @@ a { } .dark .navbar{ - background-color: black; + background-color: #1D1F21; } .navbar .title { @@ -64,7 +68,7 @@ a { } .dark .navbar .divider { - background-color: rgba(255, 255, 255, 0.88); + background-color: #FFFFFF1F; } .navbar .logo { @@ -88,8 +92,8 @@ a { color: rgba(0, 0, 0, 0.5); } -.dark>.navbar span { - color: rgb(180, 180, 180) +.dark .navbar span { + color: rgb(255, 255, 255,0.9) } .nav-links { @@ -118,7 +122,7 @@ a { } .dark .nav-divider{ - background-color: rgba(255, 255, 255, 0.88); + background-color: #FFFFFF1F; } .share-url__container { @@ -134,6 +138,11 @@ a { position: relative; } +.dark .share-url__container { + background: #212426; + border-color: #34383C; +} + .share-url__input { display: flex; width: 220px; @@ -146,6 +155,11 @@ a { border:none; } +.dark .share-url__input { + background: #212426; + color: #FFFFFFE5; +} + .share-url__tooltip { color: #3EAA63; font-size: 12px; @@ -178,6 +192,10 @@ a { cursor: pointer; } +.dark .share-url__copy{ + background:#2B2E31; +} + .nav-link { display: flex; justify-content: center; @@ -191,7 +209,8 @@ a { } .dark .nav-link{ - background-color: rgba(132, 71, 209, 0.25); + background-color: #8447D13D; + color: #9551EC; } /* Containers */ @@ -225,6 +244,10 @@ a { overflow: visible; } +.dark .editor { + border-color: #2A2D32; +} + .editor__header { padding: 1rem; border-bottom: 1px solid #E3E3E3; @@ -233,6 +256,11 @@ a { align-items: center; } +.dark .editor__header { + background: #25282C; + border-bottom-color: #33373D; +} + .editor__header .title { color: #34454C; font-weight: 500; @@ -241,7 +269,7 @@ a { } .dark .editor__header .title { - color: #e7f8ff; + color: #FFFFFF; } .editor__header .description { @@ -251,7 +279,7 @@ a { } .dark .editor__header .description { - color: #92dcff; + color: #FFFFFFCC; } .editor>.editor__input { height: 100%; @@ -296,6 +324,10 @@ a { height: 32px; } +.dark .button{ + background: #9551EC; +} + .button:hover { background: #925CD6; } @@ -319,7 +351,7 @@ footer { } .dark footer { - color: rgba(255, 255, 255, 0.5); + color: #FFFFFFE5; } footer .version { @@ -329,7 +361,7 @@ footer .version { } .dark footer .version{ - background-color: #2c2c2c; + background-color: #202D32; } .version a { @@ -337,12 +369,20 @@ footer .version { color: inherit; } +.dark .version a { + color: #FFFFFFE5; +} + footer .langdef { padding: 4px 4px; border-radius: 4px; margin-left: auto; } +.dark footer .langdef { + color: #FFFFFF29; +} + /* Ace Custom */ .ace-clouds .ace_marker-layer .ace_active-line { @@ -428,6 +468,34 @@ footer .langdef { text-overflow: ellipsis; } +.dark .nice-select .option.focus, .nice-select .option.selected.focus { + background: #2A2D32; +} + +.dark .nice-select { + background: #25282C; + color: #ffffff; + border-color: #383C43; +} + +.dark .nice-select .nice-select-dropdown { + background: #2A2D32; + border: 1px solid #383C43; +} + +.dark .nice-select .option { + color: #FFFFFFD9; + +} + +.dark .nice-select .option.disabled { + color:#ffffff; +} + +.dark .nice-select .option:hover { + background-color: #8447D114; +} + .nice-select .list { max-height: 50vh; overflow-y: scroll; diff --git a/web/assets/img/logo-dark.svg b/web/assets/img/logo-dark.svg index ee23acb..f5a14dc 100644 --- a/web/assets/img/logo-dark.svg +++ b/web/assets/img/logo-dark.svg @@ -1,85 +1,80 @@ - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + - + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - diff --git a/web/assets/img/moon.svg b/web/assets/img/moon.svg index 5249c4f..c158f23 100644 --- a/web/assets/img/moon.svg +++ b/web/assets/img/moon.svg @@ -1 +1,11 @@ - \ No newline at end of file + + + + + + + + + + + diff --git a/web/assets/img/sun.svg b/web/assets/img/sun.svg index 51d3a39..85ab9fe 100644 --- a/web/assets/img/sun.svg +++ b/web/assets/img/sun.svg @@ -1 +1,11 @@ - \ No newline at end of file + + + + + + + + + + + diff --git a/web/assets/js/main.js b/web/assets/js/main.js index 71e8dda..b70b9e1 100644 --- a/web/assets/js/main.js +++ b/web/assets/js/main.js @@ -65,15 +65,15 @@ function toggleMode(theme) { if (theme === "dark") { document.body.classList.add('dark'); - toggleIcon.src = "./assets/img/sun.svg"; - celEditor.editor.setTheme("ace/theme/idle_fingers") - dataEditor.editor.setTheme("ace/theme/idle_fingers") + toggleIcon.src = "./assets/img/moon.svg"; + celEditor.editor.setTheme("ace/theme/tomorrow_night") + dataEditor.editor.setTheme("ace/theme/tomorrow_night") celLogo.src = "./assets/img/logo-dark.svg"; localStorage.setItem("theme", "dark"); } else { document.body.classList.remove('dark'); - toggleIcon.src = "./assets/img/moon.svg"; + toggleIcon.src = "./assets/img/sun.svg"; celEditor.editor.setTheme("ace/theme/clouds") dataEditor.editor.setTheme("ace/theme/clouds") celLogo.src = "./assets/img/logo.svg"; diff --git a/web/index.html b/web/index.html index 10d02ed..0d67a70 100644 --- a/web/index.html +++ b/web/index.html @@ -48,9 +48,6 @@ Quickly test Common Expression Language
- - Change Theme -
-
+ + + + + + + +

Share

+ + + Change Theme + +
GitHub Visit our GitHub