Skip to content

Commit 9b944d6

Browse files
jainal09jainal09
authored
Add dark mode implementation via CSS (#398)
Implements light vs. dark mode using CSS device query.
1 parent 11f9b45 commit 9b944d6

File tree

1 file changed

+364
-1
lines changed

1 file changed

+364
-1
lines changed

‎internal/resources/webform/webform-sample.css‎

Lines changed: 364 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@
2727
color: #777;
2828
}
2929

30-
.grpc-desc button#grpc-descriptions-toggle {
30+
button#grpc-descriptions-toggle {
3131
position: absolute;
3232
z-index: 3;
3333
padding: 0;
@@ -763,3 +763,366 @@ button#grpc-history-clear, button#grpc-history-save {
763763
padding: 1em;
764764
margin-bottom: 1em;
765765
}
766+
767+
/* Dark mode - automatically detects system preference */
768+
@media (prefers-color-scheme: dark) {
769+
#grpc-form {
770+
background-color: #1a1a1a;
771+
color: #e1e4e8;
772+
color-scheme: dark;
773+
}
774+
775+
body {
776+
background-color: #1a1a1a;
777+
color: #e1e4e8;
778+
}
779+
780+
#grpc-form a {
781+
color: #63a4ff;
782+
}
783+
784+
#grpc-form .grpc-form-label,
785+
#grpc-form h3,
786+
#grpc-form h4 {
787+
color: #f0f6fc;
788+
}
789+
790+
#grpc-form .grpc-desc pre {
791+
border-left: 1px solid #333;
792+
color: #6e7681;
793+
}
794+
795+
#grpc-form #grpc-method-description {
796+
color: #f0f6fc;
797+
}
798+
799+
button#grpc-descriptions-toggle {
800+
background: #21262d;
801+
color: #e1e4e8;
802+
}
803+
804+
#grpc-form select,
805+
#grpc-form input,
806+
#grpc-form textarea {
807+
background-color: #21262d;
808+
color: #e1e4e8;
809+
border: 1px solid #444c56;
810+
}
811+
812+
#grpc-form textarea:disabled,
813+
#grpc-form input[type=text]:disabled,
814+
#grpc-form select:disabled {
815+
background-color: #2a2a2a;
816+
color: #777;
817+
border-color: #2f2f2f;
818+
}
819+
820+
#grpc-form button {
821+
background: #21262d;
822+
border: 1px solid #444c56;
823+
color: #e1e4e8;
824+
}
825+
826+
#grpc-form button:hover {
827+
background: #30363d;
828+
border-color: #606166;
829+
}
830+
831+
#grpc-form button:disabled {
832+
background: #2a2a2a;
833+
border: 1px solid #2f2f2f;
834+
color: #555;
835+
}
836+
837+
#grpc-form #grpc-request-response ul.ui-tabs-nav {
838+
background: #161b22;
839+
border: none;
840+
padding: 0;
841+
}
842+
843+
#grpc-form #grpc-request-response ul.ui-tabs-nav .ui-tabs-anchor {
844+
color: inherit;
845+
}
846+
847+
#grpc-form #grpc-request-response li.ui-tabs-tab {
848+
border-color: #444c56;
849+
background: #21262d;
850+
color: #8b949e;
851+
}
852+
853+
#grpc-form #grpc-request-response li.ui-tabs-tab.ui-tabs-disabled {
854+
background: #161b22;
855+
color: #484f58;
856+
border-color: #30363d;
857+
}
858+
859+
#grpc-form #grpc-request-response li.ui-tabs-tab.ui-tabs-disabled a {
860+
color: #484f58 !important;
861+
cursor: not-allowed;
862+
}
863+
864+
#grpc-form #grpc-request-response li.ui-tabs-active {
865+
border-color: #444c56;
866+
border-bottom-color: #1a1a1a;
867+
color: #f0f6fc;
868+
background: #1a1a1a;
869+
}
870+
871+
#grpc-form #grpc-request-response li.ui-tabs-active a {
872+
color: #ffffff;
873+
}
874+
875+
#grpc-form #grpc-request-response .grpc-tabcontent.ui-tabs-panel {
876+
border-color: #444c56;
877+
background-color: #1a1a1a !important;
878+
color: #e1e4e8;
879+
}
880+
881+
#grpc-form .ui-tabs-panel {
882+
background-color: #1a1a1a !important;
883+
color: #e1e4e8;
884+
}
885+
886+
#grpc-form #grpc-request-examples-container {
887+
border-color: #333;
888+
background-color: #1a1a1a;
889+
}
890+
891+
#grpc-form #grpc-request-examples-container h3 {
892+
border-bottom-color: #333;
893+
}
894+
895+
#grpc-form #grpc-request-examples li:hover {
896+
background-color: #242424;
897+
}
898+
899+
#grpc-form #grpc-request-examples .ui-selected {
900+
background: #2d2d2d;
901+
}
902+
903+
#grpc-form #grpc-request-metadata-form th {
904+
background-color: #1f1f1f;
905+
border-bottom-color: #333;
906+
color: #f2f2f2;
907+
}
908+
909+
#grpc-form #grpc-request-metadata-form td {
910+
color: #f2f2f2;
911+
}
912+
913+
#grpc-form #grpc-request-form div.input_container {
914+
background-color: #1a1a1a;
915+
}
916+
917+
#grpc-form #grpc-request-form div.oneof {
918+
border-left-color: #444;
919+
}
920+
921+
#grpc-form #grpc-request-form div.one-of-3 {
922+
border-color: #444;
923+
}
924+
925+
#grpc-form #grpc-request-form div.two-of-3 {
926+
border-color: #444;
927+
}
928+
929+
#grpc-form #grpc-request-form div.three-of-3 {
930+
border-color: #555;
931+
}
932+
933+
#grpc-form #grpc-request-form .grpc-bytes-container label.grpc-file-button {
934+
background: #2a2a2a;
935+
border-color: #3c3c3c;
936+
color: #f2f2f2;
937+
}
938+
939+
#grpc-form #grpc-request-form .grpc-bytes-container label.grpc-file-button.disabled {
940+
background: #242424;
941+
border-color: #333;
942+
color: #666;
943+
}
944+
945+
#grpc-form #grpc-request-form .invalid-input {
946+
border-color: #d56a8a;
947+
background-color: #4a1d2b;
948+
}
949+
950+
#grpc-form #grpc-request-form td.name {
951+
color: #c9d1d9;
952+
}
953+
954+
#grpc-form #grpc-request-form td.name strong {
955+
color: #f2f2f2;
956+
}
957+
958+
#grpc-form .grpc-metadata-table th {
959+
background-color: #1f1f1f;
960+
border-bottom-color: #333;
961+
color: #f2f2f2;
962+
}
963+
964+
#grpc-form .grpc-metadata-table td,
965+
#grpc-form .grpc-metadata-table th {
966+
border-color: #333;
967+
}
968+
969+
#grpc-form #grpc-response-data div.output_container {
970+
background-color: #1a1a1a;
971+
color: #e1e4e8;
972+
}
973+
974+
#grpc-form #grpc-response-data,
975+
#grpc-form #grpc-response-data pre,
976+
#grpc-form #grpc-response-data code {
977+
color: #e1e4e8;
978+
background-color: #1a1a1a;
979+
}
980+
981+
#grpc-form #grpc-response-data .null {
982+
color: #999999;
983+
}
984+
985+
#grpc-form #grpc-response-data div.one-of-3 {
986+
border-color: #444;
987+
}
988+
989+
#grpc-form #grpc-response-data div.two-of-3 {
990+
border-color: #444;
991+
}
992+
993+
#grpc-form #grpc-response-data div.three-of-3 {
994+
border-color: #555;
995+
}
996+
997+
#grpc-form #grpc-response-error {
998+
color: #ff6b6b;
999+
}
1000+
1001+
#grpc-form #grpc-response-error #grpc-response-error-num,
1002+
#grpc-form #grpc-response-error #grpc-response-error-msg {
1003+
color: #ff8787;
1004+
}
1005+
1006+
#grpc-form #grpc-history-list .history-item-header {
1007+
border-bottom-color: #333;
1008+
color: #f2f2f2;
1009+
}
1010+
1011+
#grpc-form #grpc-history-list > .ui-accordion:first-child {
1012+
border-top-color: #333;
1013+
}
1014+
1015+
#grpc-form #grpc-history-list .history-item-header .history-item-result.error {
1016+
color: #ff8787;
1017+
}
1018+
1019+
#grpc-form #grpc-history-list .history-item-header .history-item-messages {
1020+
color: #bbbbbb;
1021+
}
1022+
1023+
#grpc-form #grpc-history-list .history-item-panel {
1024+
background-color: #1a1a1a;
1025+
border: 1px solid #333;
1026+
}
1027+
1028+
#grpc-form .grpc-curl-panel {
1029+
background-color: #1a1a1a;
1030+
border-color: #333;
1031+
}
1032+
1033+
#grpc-form #grpc-request-form .duration-unit,
1034+
#grpc-form #grpc-request-form label.disabled,
1035+
#grpc-form #grpc-request-form td.empty_message {
1036+
color: #bbbbbb;
1037+
}
1038+
1039+
/* Dark mode styles for jQuery UI datepicker */
1040+
.ui-datepicker {
1041+
background: #21262d !important;
1042+
border: 1px solid #444c56 !important;
1043+
color: #e1e4e8 !important;
1044+
}
1045+
1046+
.ui-datepicker-header {
1047+
background: #30363d !important;
1048+
border: 1px solid #444c56 !important;
1049+
color: #f0f6fc !important;
1050+
}
1051+
1052+
.ui-datepicker-title {
1053+
color: #f0f6fc !important;
1054+
}
1055+
1056+
.ui-datepicker-prev,
1057+
.ui-datepicker-next {
1058+
background: #30363d !important;
1059+
border: 1px solid #444c56 !important;
1060+
color: #e1e4e8 !important;
1061+
}
1062+
1063+
.ui-datepicker-prev:hover,
1064+
.ui-datepicker-next:hover {
1065+
background: #484f58 !important;
1066+
border-color: #606166 !important;
1067+
}
1068+
1069+
.ui-datepicker-calendar {
1070+
background: #21262d !important;
1071+
}
1072+
1073+
.ui-datepicker-calendar th {
1074+
background: #30363d !important;
1075+
color: #f0f6fc !important;
1076+
border: 1px solid #444c56 !important;
1077+
}
1078+
1079+
.ui-datepicker-calendar td {
1080+
background: #21262d !important;
1081+
border: 1px solid #444c56 !important;
1082+
}
1083+
1084+
.ui-datepicker-calendar td a {
1085+
color: #e1e4e8 !important;
1086+
background: transparent !important;
1087+
border: none !important;
1088+
}
1089+
1090+
.ui-datepicker-calendar td a:hover {
1091+
background: #30363d !important;
1092+
color: #f0f6fc !important;
1093+
}
1094+
1095+
.ui-datepicker-calendar .ui-datepicker-today a {
1096+
background: #1f6feb !important;
1097+
color: #ffffff !important;
1098+
}
1099+
1100+
.ui-datepicker-calendar .ui-state-active a {
1101+
background: #238636 !important;
1102+
color: #ffffff !important;
1103+
}
1104+
1105+
.ui-datepicker-buttonpane {
1106+
background: #30363d !important;
1107+
border: 1px solid #444c56 !important;
1108+
}
1109+
1110+
.ui-datepicker-buttonpane button {
1111+
background: #21262d !important;
1112+
border: 1px solid #444c56 !important;
1113+
color: #e1e4e8 !important;
1114+
}
1115+
1116+
.ui-datepicker-buttonpane button:hover {
1117+
background: #30363d !important;
1118+
border-color: #606166 !important;
1119+
}
1120+
1121+
.ui-widget-content {
1122+
background: #30363d !important;
1123+
}
1124+
1125+
hr {
1126+
border-color: #606166 !important;
1127+
}
1128+
}

0 commit comments

Comments
 (0)