[IDISPLAY] Implementing the dark mode (#1304)

Should close:

Author: oualib

verticapy/__init__.py

@@ -38,7 +38,7 @@
 __license__: str = "Apache License, Version 2.0"
 __version__: str = "1.1.0-beta"
 __iteration__: int = 1
-__date__: str = "10052024"
+__date__: str = "10072024"
 __last_commit__: str = "a58bb45bb5a8e491e36b14a7346a730206c1c821"
 __long_version__: str = f"{__version__}-{__iteration__}—{__date__}-{__last_commit__}"
 __codecov__: float = 0.84

verticapy/jupyter/_javascript.py

@@ -246,6 +246,7 @@ def datatables_repr(
     Returns the HTML/javascript
     representation of the table.
     """
+    theme = conf.get_option("theme")
     dtype = format_type(dtype, dtype=dict)
     if not repeat_first_column:
         index_column = list(range(1 + offset, len(data_columns[0]) + offset))
@@ -277,11 +278,17 @@ def datatables_repr(
         table_header,
     )
     output = replace_value(output, "#table_id", f"#{tableId}", 2)
+    if theme == "dark":
+        style = read_package_file("html/style-dark.css")
+    elif theme == "sphinx":
+        style = read_package_file("html/style.css")
+    else:
+        style = read_package_file("html/style.css")
     output = replace_value(
         output,
         "<style></style>",
         f"""<style>
-        {read_package_file("html/style.css")}
+        {style}
         </style>""",
     )
     dt_data = json.dumps(data, cls=DateTimeEncoder)

verticapy/jupyter/html/style-dark.css

@@ -0,0 +1,55 @@
+table td {
+    text-overflow: ellipsis;
+    overflow: hidden;
+    text-align: center !important;
+    background-color: #18181A;
+    white-space: nowrap !important;
+    color: #FFFFCC;
+}
+
+table tr:nth-child(1)  {
+    background-color: #000000;
+    color: #FFFFFF;
+}
+
+table th {
+    text-overflow: ellipsis;
+    overflow: hidden;
+    text-align: center !important;
+}
+
+tr td:nth-child(1) {
+    border: 1px solid #555555;
+    background-color: #000000;
+    color: #1A6AFF;
+    min-width: 95px;
+    max-width: 95px;
+}
+
+tr td:nth-child(n+2) {
+    border: 1px solid #333333;
+    max-width: 240px;
+}
+
+thead input {
+    width: 100%;
+    padding: 3px;
+    box-sizing: border-box;
+}
+
+table thead tr td {
+    background-color: #000000;
+    color: #FFFFFF;
+  }
+
+table.dataTable thead>tr>th.sorting:before,table.dataTable thead>tr>th.sorting_asc:before,table.dataTable thead>tr>th.sorting_desc:before,table.dataTable thead>tr>th.sorting_asc_disabled:before,table.dataTable thead>tr>th.sorting_desc_disabled:before,table.dataTable thead>tr>td.sorting:before,table.dataTable thead>tr>td.sorting_asc:before,table.dataTable thead>tr>td.sorting_desc:before,table.dataTable thead>tr>td.sorting_asc_disabled:before,table.dataTable thead>tr>td.sorting_desc_disabled:before {
+    bottom: 50%;
+    content: "▴";
+    font-size: x-large !important;
+}
+
+table.dataTable thead>tr>th.sorting:after,table.dataTable thead>tr>th.sorting_asc:after,table.dataTable thead>tr>th.sorting_desc:after,table.dataTable thead>tr>th.sorting_asc_disabled:after,table.dataTable thead>tr>th.sorting_desc_disabled:after,table.dataTable thead>tr>td.sorting:after,table.dataTable thead>tr>td.sorting_asc:after,table.dataTable thead>tr>td.sorting_desc:after,table.dataTable thead>tr>td.sorting_asc_disabled:after,table.dataTable thead>tr>td.sorting_desc_disabled:after {
+    top: 50%;
+    content: "▾";
+    font-size: x-large !important;
+}